javascript - 问题在 Y 轴上对行图表进行排序。 Dc-js 图表

Question

这是我在这里的第一个问题，我被一个问题弄疯了。我正在使用 DC.js(D3 之上的 lib)并且我正在尝试将我自己的数据添加到其中一个。当它像 10 行时，它可以很好地对数据进行排序。但在那之后就到处都是。

我想按价格 (Kurs) 对数据进行分组并将数量加在一起。然后从低价到高价排序。此代码在“dc.barChart”上运行良好，但在 rowChart 上我无法正确缩放。

我一直在使用示例代码，但使用的是我自己的 CSV。 https://dc-js.github.io/dc.js/examples/row.html

var chart = dc.rowChart("#test");
d3.csv("tickdata.csv").then(function(experiments) {

  experiments.forEach(function(x) {
    x.Volym = +x.Volym;
    x.Kurs = +(roundNumber(x.Kurs,0));
    });

  var ndx                 = crossfilter(experiments),
      runDimension        = ndx.dimension(function(d) {return +d.Kurs;}),
      speedSumGroup       = runDimension.group().reduceSum(function(d) {return +d.Volym;});

 chart
    .width(1024)
    .height(600)
    .margins({top: 20, right: 20, bottom: 20, left: 20})
    .ordering(function(y){return -y.value.Kurs})
    .elasticX(true)
    .dimension(runDimension)
    .group(speedSumGroup)
    .renderLabel(true); 


  chart.on('pretransition', function() {
    chart.select('y.axis').attr('transform', 'translate(0,10000)');
    chart.selectAll('line.grid-line').attr('y2', chart.effectiveHeight());
  });

  chart
    .render();
});

csv 看起来像这样:

Tid,Volym,Volym_fiat,Kurs
2018-06-27 09:46:00,5320,6372,1515.408825
2018-06-27 09:47:00,3206,4421,1515.742652
2018-06-27 09:48:00,2699,4149,1515.013167
2018-06-27 09:49:00,3563,4198,1515.175342

我想按“Kurs”值对 Y 轴进行排序。我可以在条形图中使用它，但它在行图中不起作用。请帮忙!

Answer 1

用 fiddle 测试它会更容易，但在您的 ordering 函数中，您假设减少的值将有一个 Kurs 字段(y.value.Kurs).

但是，当您使用 group.reduceSum() , 只会生成一个简单的数字 value。

所以这应该可行

.ordering(function(y){return -y.value})

这是 default behavior in dc.js 2.1+所以你可能根本不需要这条线。

顺便说一句，如果您在猜测缩减数据的正确形状时遇到问题，解决任何访问器问题的方法是在其中放置一个断点或 console.log。对于这样的案例，您应该很快就能看出哪里出了问题。