javascript - 使用 dc.js 根据存储在字典中的已处理数据创建条形图

Question

我有一个字典，其中包含 Facebook 对话中为每个人发送的消息数量，存储在一个变量中，如下所示:

data = {
"Person1": 55132,
"Person2": 3556,
"Person3": 4848,
"Person4": 21184,
"Person5": 4364,
"Person6": 20716,
"Person7": 51172
}

我想用 dc.js 制作条形图。我见过一些例子，人们通过创建交叉过滤器维度来使其发挥作用。到目前为止，这是我所得到的:

var msgCountChart = dc.barChart("#msg-count-row-chart");

var ndx = crossfilter([data]);
authorDimension = ndx.dimension(function(d) {return Object.keys(d);});
sumGroup = authorDimension.group().reduceSum(function(d) {return d;});

msgCountChart
        .width(300)
        .height(280)
        .x(d3.scale.ordinal().domain(Object.keys(data)))
        .y(d3.scale.linear().domain([0, Math.ceil(Math.max(...Object.values(data)) / 10000) * 10000]))
        .xUnits(dc.units.ordinal)
        .brushOn(false)
        .dimension(authorDimension)
        .yAxisLabel("Messages sent")
        .barPadding(0.1)
        .outerPadding(0.05)
        .group(sumGroup);

msgCountChart.render();

我的代码基于此示例，该示例具有类似的数据结构:https://github.com/dc-js/dc.js/blob/master/web/examples/ordinal-bar.html

ndx 中的数据似乎为空。如何将我的数据放入 crossfilter 实例中以使其正常工作？

还有其他更简单的解决方案来制作条形图吗？

Answer 1

Crossfilter 将数组作为输入。你有一个对象。

dimension constructor接受一个返回每行键的函数。因此，您当前的设置为您提供了一行数据，其中包含所有键的数组作为其键。可能不是 null 但可能不是您想要的。

如果您的目标是现代浏览器，从对象获取数组的最简单方法是 Object.entries() 。这将为您提供一个 [key, value] 对数组。

所以:

var ndx = crossfilter(Object.entries(data)),
  authorDimension = ndx.dimension(d => d[0]),
  sumGroup = authorDimension.group().reduceSum(d => d[1]);

通常不需要设置X和Y尺度的域；使用 .elasticX(true).elasticY(true) 通常会为您解决这个问题。