d3.js - 如何使用 dc.js 显示行图表的底部数据

Question

我正在使用基于 d3 和 crossfilter 的 Dimensional Charting javascript 库 dc.js 制作行图。我正在显示顶部 (10) 数据的行图。但我正在尝试显示底部 (10) 数据的行图，但图形可以显示为与顶部 (10) 数据相同。如何显示底部 (10) 数据。

  constRowChart.width(350)
    .height(1000)
    .margins({top: 20, left: 120, right: 10, bottom: 20})
    .transitionDuration(750)
    .dimension(density)
    .group(const_total)
    .renderLabel(true)
    .gap(1)
    .title(function (d) {
        return "";
    })
    .elasticX(true)
    .colors(d3.scale.category20c())
    .ordering(function(d) { return d.value })
    .xAxis().ticks(3).tickFormat(d3.format("s"));

constRowChart.data(function (group) {
    return group.top(10);
});

Answer 1

如果您不想按照@LarsKotthoff 的建议创建另一个维度/组，您还可以使用 .top(Infinity) 然后使用 .splice(-10) 数组的最后十个条目。

在拥有额外维度与对所有数据进行排序之间存在效率权衡，因此您可以尝试两者，看看哪个表现更好。