Unable to show the line in decreasing way in dc.js

问题

index.html:

<div id="line-chart2" class="svg-container">
    <div class="chart-title">
        <span>
            <strong>Line Types</strong>
        </span>
        <span>
            <a href="javascript:lineChart2.filterAll(); dc.redrawAll();" style="display:none;" class="reset">reset</a>
        </span>
    </div>
</div>

index.js:

const lineChart2 = dc.lineChart("#line-chart2");
var data = crossfilter([{foo:"one",bar:1},{foo:"two",bar:2},{foo:"three",bar:3},{foo:"one",bar:4},{foo:"one",bar:5},{foo:"two",bar:6}]);

var dim = data.dimension(function(d) {
   return d.foo;
});
var group = dim.group();
let TypeGroup = group.reduceCount(function(d) {
   return d.bar;
});

lineChart2
   .height(500)
   .width(lineChart2.width() * 0.95) //give it a width
   // .margins({top: 10, right: 10, bottom: 20, left: 100})//give it margin left of 100 so that the y axis ticks dont cut off
   .dimension(dim)
   .group(TypeGroup)
   .x(d3.scale.ordinal())
   .xUnits(dc.units.ordinal)
   .ordering(function(kv) {
      console.log("val:", kv.value);
      return -kv.value;
   })
   .interpolate('linear')
   .elasticY(true)
   .renderArea(true)
   .xAxis().ticks(3).tickFormat(function(d) {
      // console.log("kkk:",d)
      return d;
   });

Output:

I want something like this:

Line going downward and showing point values(count).

I tried ordering but it's not working (console.log is not working there)

Edit: I updated the code: index.js:

var data = crossfilter([
  { foo: 'one', bar: 1 },
  { foo: 'two', bar: 2 },
  { foo: 'three', bar: 3 },
  { foo: 'one', bar: 4 },
  { foo: 'one', bar: 5 },
  { foo: 'two', bar: 6 },
]);

var dim = data.dimension(function(d) { return d.foo; });
var group = dim.group();


let TypeGroup = group.reduceCount(function(d) { 
    return d.bar; }
    );

TypeGroup.order(function(p) {
    return p;
});

TypeGroup.all = function() {
    return TypeGroup.top(Infinity);
}

    lineChart2
        .height(600)
        .width(lineChart2.width()*0.95) //give it a width
        // .margins({top: 10, right: 10, bottom: 20, left: 100})//give it margin left of 100 so that the y axis ticks dont cut off
        .dimension(dim)
        .group(TypeGroup) 
        .ordering(function(kv) { 
            console.log("val:",kv.value);
            return -kv.value; })
        .x(d3.scale.ordinal( ))
        .xUnits(dc.units.ordinal)
        .interpolate('linear')
        .elasticY(true)
        .renderArea(true)
         .renderlet(function(chart){chart.selectAll("circle.dot").style("fill-opacity", 1).on('mousemove', null).on('mouseout', null);})

        // .renderTitle(true)
        .renderLabel(true)
        .xAxis().ticks(3).tickFormat(function(d) {
            return d;
        });

renderLabel doesn't work. I need to show label value on top of it.

来源：https://stackoverflow.com/questions/60924803/unable-to-show-the-line-in-decreasing-way-in-dc-js

标签

javascript

d3.js

dc.js