如何在dc.js中为多标签数据制作行图
How to make row chart for multilabel data in dc.js
我有一列数据,这是每个数据点的标签列表。我想用dc.js制作一个行图,绘制每个标签的出现次数。
数据如下:
日期,标签
2015年1月1日,"A、B、C"
2015年1月2日,"B"
2015年1月3日,"C,A"
2015年1月4日,"A"
我想要一个这样聚合它们的折线图:
A: 3
B: 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来完成此操作,并自行管理分组。如果你把一个工作例子和你的维度放在一起,我可以向你展示如何做到这一点。
然而,你有没有看过Redutio,它让这件事变得很容易?https://github.com/esjewett/reductio#groupall-聚合
使用您的数据,您可以执行类似的操作
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/
相关文章:
- 我可以按特定的顺序迭代一个标签中的不同数据标签吗
- 如何将数据标签与数据一起传递,以便在高图中的工具提示中显示
- Highcharts车速表,里程计数器的数据标签
- 高图表数据标签重叠
- 删除高图表数据标签上的阴影/背景发光
- .scrollInto查看带有数据标记的任何元素,或使用类对带有数据标签的内容进行分段
- 圆环饼图中数据标签的自定义CSS类
- jquery数据标签
- Dojo-簇状柱形图数据标签作为Excel
- 具有向下钻取的 Highcharts 列会导致主图表中的数据标签模糊,但向下钻取的列除外
- 如何使用 Jquery Highcharttable 柱形图格式化数据标签
- jQuery功能,用于隐藏基于未在点击上运行的HTML5数据标签的元素
- 高图表 - 调整列大小以修复数据标签
- 根据高图表中的列值更改数据标签颜色、旋转和对齐值
- 数据标签格式化程序在 Highchart 中用于第一个类别
- 如何让 CKEditor 允许数据标签标记
- D3堆积条形图添加数据标签并解决D3标签放置问题
- 如何在我的高图表饼图中获取一个数据标签,这是一个字体很棒的图标
- 高图表条形图:可以在数据标签内组合数据点
- Dimple.js-将数据标签添加到条形图的每个条形图中