在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方法在圖形中包含多條線。

我想包括一些功能，在其中可以根據用戶希望在圖形中看到的內容來使這些行可見或不可見。

應該是這樣的 。 如何在圖表中包含此功能？

我在圖形中已經有多條線，我只需要切換功能即可。

Answer 1

有什么功能可以更新您的圖表數據？ 如果答案是肯定的，則只需要在主數據上添加一個新標志，並在用戶單擊圖例並重繪或更新圖表時啟用/禁用它即可。 在繪制功能處，必須檢查是否為每條線啟用了標記，然后才允許繪制它。

但是，如果您沒有更新功能...那么..也許是一種解決方案，可在添加到父容器后（或時）獲得行的引用，然后單擊圖例將所有點都設為零但是，如果要實現給定的示例，仍然必須重新繪制軸。.因此，我建議您對圖表進行更新，以便可以基於新數據重新繪制圖表。

更新：我只是以為您是從頭開始開發D3圖表，但是發布此消息后，我注意到您正在使用一個腳本，該腳本具有基於D3.js生成折線圖的功能

更新2：由於我不確定整個腳本的外觀，我只能猜測這可能對您有用...在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 }

希望能幫助到你。