繁体   English   中英

dc.js中的多系列折线图

[英]Multi-series line chart in 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.
];

一旦它被添加到crossfilter,我想制作一个有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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM