javascript – dc.js中的多系列折线图

前端之家收集整理的这篇文章主要介绍了javascript – dc.js中的多系列折线图前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我仔细查看了dc.js的文档,并注意到围绕多系列折线图的一些未解决的问题.

我的数据看起来像这样:

var data = [
 //['time','text','temperature','count'],['1379952000','field_1',91,56],'field_2',50,20],'field_3',88,24],'field_4',37],['1379953200',97,58],84,86],85,62],73]
 // etc.
];

一旦它被添加到crossfilter,我想制作一个有4行的折线图:一个用于“text”字段的每个值(即“field_1”,“field_2”,“field_3”,“field_4”).
This thread表明这样的事情是可能的.按照建议here,我在this gist中提出了代码.

我无法弄清楚如何将数据系列分成4个单独的行.我已经尝试过对数据使用过滤器了,但我最终得到了一个似乎只包含所有点的系列.

您可以在此处查看代码的实时示例:
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

原文链接:https://www.f2er.com/js/429818.html

猜你在找的JavaScript相关文章