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中的多系列折線圖

回答

相關問題