javascript - 如何在 dc.js 中为多标签数据制作行图

标签 javascript dc.js crossfilter reductio

我有一列数据,它是每个数据点的标签列表。我想使用 dc.js 制作一个图表,绘制每个标签的出现次数。

数据看起来像这样:

日期,标签
2015 年 1 月 1 日,“A、B、C”
2015 年 1 月 2 日,“B”
1/3/2015 , "C, A"
2015 年 1 月 4 日,“A”

我想要一个像这样聚合它们的行图表:
答:3
乙:2
C:2

到目前为止我的代码:

var labels = ["A", "B", "C"];
var labelBar = dc.rowChart("#label-bar");
d3.csv('data.csv', function (csv) {
    var data = crossfilter(csv);
    var labelDim = data.dimension(function(d){return d["Labels"];});
    var labelGroup = labelDim.group().reduce(
        function(p,v) { //add
            for (i = 0; i < labels.length; i++) {
                if(v["Labels"].indexOf(labels[i]) > -1)
                    p[labels[i]]++;
            }
            return p;
        },
        function(p,v) { //subtract
            for (i = 0; i < labels.length; i++) {
                if(v["Labels"].indexOf(labels[i]) > -1)
                    p[labels[i]]--;
            }
            return p;
        },
        function(p,v) { //initial
            p = {};
            for (i = 0; i < labels.length; i++) {
                p[labels[i]] = 0;
            }
            return p;
        });
    labelBar
        .dimension(labelDim)
        .group(labelGroup)
        .elasticX(true);
});

代码只创建了一个行图表,每个数据点都有一个条形,而不是每个标签。任何帮助将不胜感激。

最佳答案

您需要为此使用 dimension.groupAll 并自行管理分组。如果您将一个工作示例与您的维度放在一起,我可以向您展示如何执行此操作。

但是,您是否看过 Reductio,这使得这很容易? https://github.com/esjewett/reductio#groupall-aggregations

用你的数据你会做类似的事情

var dim = data.dimension(function(d) { return d.Labels.split(','); });
groupAll = dim.groupAll();

reducer = reductio()
  .groupAll(function(record) {
    return record.Labels.split(',');
  })
  .count(true);

reducer(groupAll);
groupAll.all(); // Should give you groups with keys "A", "B", "C"

工作示例:https://jsfiddle.net/z4k78odx/4/

关于javascript - 如何在 dc.js 中为多标签数据制作行图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33828083/

相关文章:

javascript - 使用 dc.js 按条值对条形图中的条进行排序(排序)

javascript - 使用文本框进行交叉过滤

javascript - 如何在 Python 中使用 Selenium 定位 onmouseover 元素?

javascript - 如何返回一个需要 2 个参数和 1 个参数的函数

javascript - 我可以处理 gapi.client.load promise 的错误吗?

javascript - dc.js:向饼图添加图例

javascript - 如何清除openwysiwyg编辑器的内容?

javascript - 在 dc.js 图表中显示前 n 个结果

dc.js - 如何在 dc.js numberDisplay 中获取动态字段计数?

ruby-on-rails - 如何正确安装 dc.js 以便与 Rails 5 一起使用?