在dc.js中的系列折线图
我仔细查看了dc.js的文档,发现了围绕多系列折线图的一些未解决的问题。
我有这样的数据:
var data = [
//['time', 'text', 'temperature', 'count'],
['1379952000', 'field_1', 91, 56],
['1379952000', 'field_2', 50, 20],
['1379952000', 'field_3', 88, 24],
['1379952000', 'field_4', 50, 37],
['1379953200', 'field_1', 97, 58],
['1379953200', 'field_2', 84, 86],
['1379953200', 'field_3', 85, 62],
['1379953200', 'field_4', 88, 73]
// etc.
];
一旦将它添加到交叉过滤器中,我想创建一个包含4行的折线图:“text”字段的每个值(即“field_1”,“field_2”,“field_3”,“field_4”)。 这个线程表明这样的事情是可能的。 遵循这里的建议,我在这个要点中提出了代码。
我无法弄清楚如何将数据系列分成4行。 我已经尝试过在数据上使用filter
,但是我总是以一系列似乎只有它的所有要点而结束。
您可以在这里查看代码的实例:http://bl.ocks.org/jsundram/6690354
任何帮助将非常感激。
更新 :工作代码在这里:http://bl.ocks.org/jsundram/6728956
我发布了你的要点分叉似乎工作:http://bl.ocks.org/jrideout/6710590
关键在于编写功能:
.compose(fields.top(Infinity).map(function(d,fi) {
var field = d.key;
return dc.lineChart(time_chart)
.group({all:function() {
return time_fields.all().filter(function(d) {
var f = JSON.parse(d.key)[1];
return f==field && d.value > 0;});
}},field)
.colors(['#1f77b4', '#ff7f0e', '#2ca02c','#d62728'])
.colorAccessor(function(){return fi;})
.keyAccessor(dateAcc);
}));
我创建了一个类似于对象{all:data}
的组,其中包含您的组,但是通过密钥进行了过滤。
编辑: DC现在正在使用一个seriesChart来自动执行此操作。 请参阅:http://nickqizhu.github.io/dc.js/examples/series.html
链接地址: http://www.djcxy.com/p/32711.html上一篇: series line chart in dc.js
下一篇: dc Charts not interacting with each other (with crossfilter on server side)