D3グラフに凡例機能（トグル）を含める

Question

データ視覚化のためにhttp://mcaule.github.io/d3-timeseries/を使用してグラフを作成しました。使用

コード：

//data : 
// [{date:new Date('2013-01-01'),n:120,n3:124,ci_up:130,ci_down:118} ...] 
var chart = d3.timeseries() 
    .addSerie(data,{x:'timestamp',y:'a'},{interpolate:'linear',color:"#a6cee3",label:"value"}) 
    .addSerie(data, 
     {x:'timestamp',y:'b'}, 
     {interpolate:'monotone',dashed:true,color:"#a6cee3",label:"prediction"}) 
    .width(900) 

chart('#chart') 

私はaddSeriメソッドを追加することにより、グラフ内の複数の行を含めています。

グラフに表示されるユーザーに応じて、これらの行を表示または非表示にできる機能を含める必要があります。

thisのようになります。この機能をグラフに含めるにはどうすればよいですか？

私はすでにグラフに複数の行を持っていますが、私は機能をトグルするだけです。

Answer 1

チャートデータを更新する機能はありますか？ 答えが「はい」の場合、主なデータに新しいフラグを追加し、ユーザーが凡例をクリックしてグラフを再描画または更新するときに、そのフラグを有効または無効にするだけです。描画関数で、フラグが各行に対して有効になっているかどうかをチェックしてから、描画を許可する必要があります。

ができますが、後（または時）あなたの行の参照を取得するために...そして...多分その解を更新機能を持っていない場合は、あなたの親コンテナに追加し、その後、伝説をクリックして作りますあなたが与えられた例を達成する必要がある場合は、すべてゼロにドットだが、まだあなたは...あなたの軸を再描画する必要がので、私はあなたが新しいデータに基づいてチャートを再描画することができ、あなたのチャートを更新機能を作る提案することができます。

アップデート：私はちょうどあなたが最初からD3チャートを開発していると思ったが、私はこれを掲示した後、私はあなたがアップデート2

D3.js

に基づいて折れ線グラフを生成する機能を持っているスクリプトを使用している気づい： 私はいくつかは、（あなたのチャート要素の外に）あなたのHTMLでどこボタン... 場所あなたの全体のスクリプトが、私はこれがあなたのために働くかもしれないだけで推測することができますどのように見えるかを正確にわからないよう

<button onclick="toggleLine('.ci-area',1)">Toggle Spreaded Region</button> 
<button onclick="toggleLine('.line',1)">Toggle Line 1</button> 
<button onclick="toggleLine('.line',2)">Toggle Line 2</button> 

もグラフスクリプトの下部にこれを追加してください

function toggleLine(selector,index){ 
    var line = d3.selectAll(selector).filter(function(d,i){ return i==index-1;}); 

    // so here we get a reference to initial opacity if its not always "1" 
    if(!line.attr("initial-opacity")){ 
     line.attr("initial-opacity",line.style('opacity')); 
    } 


    line.style('opacity',(line.style('opacity')==0 ? line.attr("initial-opacity") : 0)); 
} 

ところで、あなたはまた、CSSクラスを使用してのように、あなたの選択したグラフ要素のためにそれを切り替えることができます。

.hide-graph-element{ opacity:0 } 

はそれがお役に立てば幸いです。