问题在 Y 轴上对行图进行排序。 dc-js 行图答案

【问题标题】：Issues sorting Row Chart in Y axis. Dc-js RowChart问题在 Y 轴上对行图进行排序。 dc-js 行图
【发布时间】：2018-07-21 10:28:02
【问题描述】：

这是我的第一个问题，我被一个问题发疯了。我正在使用 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 轴进行排序。我可以在条形图中进行这项工作，但在 RowChart 中不起作用。请帮忙！

【问题讨论】：

标签： javascript dc.js crossfilter

【解决方案1】：

用小提琴来测试会更容易，但看起来在你的ordering 函数中，你假设减少的值将有一个Kurs 字段（y.value.Kurs）。

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

所以这应该可以工作

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

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

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

【讨论】：