如何使用 dc.js 显示行图的底部数据答案

【问题标题】：how to display bottom data for row chart using dc.js如何使用 dc.js 显示行图的底部数据
【发布时间】：2014-04-22 09:28:40
【问题描述】：

我正在使用基于 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);
});

【问题讨论】：

没有bottom 功能，但您可以尝试颠倒元素的顺序并再次获得前 10 名。
感谢@LarsKotthoff 帮助回答了这么多问题。即使您不关心声誉，也请考虑使用“答案”部分，以便我们可以将更多这些问题标记为已回答。它会让我的“园艺”更容易。

标签： d3.js dc.js

【解决方案1】：

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

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

【讨论】：

使用此解决方案第一次可以使用，但过滤后无法显示
1.在调试器中的该行上放一个断点，看看为什么它不起作用 2. 作为猜测，过滤后可能没有 10 个条目？