2013-09-25 17 views
5

私はdc.jsのドキュメントを注意深く見て、マルチシリーズ折れ線グラフを取り巻く未解決の問題に気付きました。dc.jsのマルチシリーズ折れ線グラフ

私はこのようになり、データがあります。crossfilterするために追加されますしたら、私は4本のラインを持つ折れ線グラフを作成したいと思います

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. 
]; 

を:「テキスト」フィールドの値ごとに1( 「field_1」、「field_2」、「field_3」、「field_4」)。 This threadは、このようなことが可能であることを示唆しています。アドバイスhereに続いて、this gistのコードを思いついた。

データ系列を4つの別々の行に分ける方法を理解できません。私はデータ上でfilterを使用しようとしましたが、私はちょうどその中のすべてのポイントを持つように見える1つのシリーズで終わっています。すべてのヘルプははるかに高く評価されるだろう http://bl.ocks.org/jsundram/6690354

現在地コードの実際の例を見ることができます。

更新:作業のコードはここにある:http://bl.ocks.org/jsundram/6728956

+0

私のために働く唯一のコードは:http://bl.ocks.org/espinielli/9f129ac2ed6ca642cb2a – Geeklhem

答えて

4

私が働くようで、あなたの要点のフォークを投稿: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

+0

ありがとう!左のグラフでは、X軸に時間を表示し、温度ではなくY軸でカウントしようとしていました。私はそれが私の軸をラベリングしないために得たものだと思います。しかし、私はこのアプローチがうまくいくと思います。私はコードを掲示し、私がそれを働かせたらこの答えを受け入れるでしょう。 –

+0

したがって、コードで温度をフィルタリングすると(60-90度の範囲を選択するなど)、折れ線グラフは予期せず動作します。この線は、もはや時間と温度との間の1:1マッピングではない。あなたはそれが何であるか知っていますか? –

+0

'd.value> 0'チェックのためです。それがなければ、うまくいくようです。なぜあなたはその小切手を追加しましたか? –

関連する問題