dc.js中的多系列折线图

我仔细查看了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线的线路图：一种为“文本”字段的每个值（即“field_1”，“field_2”，“field_3”，“field_4”）。 This thread暗示这样的事情是可能的。根据建议here我想出了代码this gist。

我不能完全弄清楚如何将数据系列分成4个单独的行。我已经尝试在数据上使用filter，但我一直以一系列似乎只有它的所有要点而结束。

您可以查看这里的代码的一个活生生的例子： http://bl.ocks.org/jsundram/6690354

任何帮助将非常感激。

更新：工作代码是在这里：http://bl.ocks.org/jsundram/6728956

来源

2013-09-25 Jason Sundram

由于某种原因，唯一的代码适用于我：http://bl.ocks.org/espinielli/9f129ac2ed6ca642cb2a – Geeklhem

我贴你要点的一个分支，似乎工作：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现在正在使用一系列图表来自动执行此操作。请参阅：http://nickqizhu.github.io/dc.js/examples/series.html

来源

2013-09-26 06:58:16 JRideout

谢谢！对于左侧的图表，我试图在X轴上显示时间，并计算Y轴，而不是温度。我想这就是我没有标记我的轴。但我认为这种方法可行。我会在发布代码时接受这个答案。 –

因此，当我在代码中过滤温度（例如，选择60-90度范围）时，折线图表现出乎意料的。线条不再是时间和温度之间的1：1映射。你知道那是怎么回事吗？ –

看起来是因为'd.value> 0'检查。没有这个，它似乎工作得很好。你为什么加上这张支票？ –

dc.js中的多系列折线图

回答

相关问题