D3 js複数の折れ線グラフトグルドットのオン/オフ

Question

This D3 js exampleは、トグルできるマルチライングラフを生成するためのすべてのコードを示します。グラフの各行には、既存のデータ点の点が含まれています。

行をオン/オフすることができますが、ドットは停滞したままです。私はのためにトグルが働くようにしたいと思います同じラインに関連付けられているドット&をオン/オフします。

svg.append("text")は、コードの更新を必要とする部分であり、ドットをオン/オフすることができると思われます。

折れ線グラフをオン/オフする既存のコードスニペットですが、ドットのオン/オフはしません。

svg.append("text") 
     .attr("x", (legendSpace/2)+i*legendSpace) // space legend 
     .attr("y", height + (margin.bottom/2)+ 5) 
     .attr("class", "legend") // style the legend 
     .style("font-size","15px") // Change the font size 
     .style("font-weight", "bold") // Change the font to bold 
     .style("text-anchor", "middle") // center the legend 
     .style("fill", function() { // Add the colours dynamically 
      return d.color = color(d.key); }) 
     .on("click", function(){ 
      // Determine if current line is visible 
      var active = d.active ? false : true, 
      newOpacity = active ? 0 : 1; 
      // Hide or show the elements based on the ID 
      d3.select("#tag"+d.key.replace(/\s+/g, '')) 
       .transition().duration(100) 
       .style("opacity", newOpacity); 
      // Update whether or not the elements are active 
      d.active = active; 
      }) 
     .text(d.key); 

助けてください。

Answer 1

IDはユニークです。いくつかの異なるDOM要素に対して同じIDを設定することはできません。

解決策：代わりにクラスを設定します。その後

.attr("class", d=>'tag'+d.symbol.replace(/\s+/g, '')) 

、クリックイベント（使用selectAll、ないselect）上のクラスを取得します：

.attr("class", 'tag'+d.key.replace(/\s+/g, '')) 

や円のために：ライン用

d3.selectAll(".tag"+d.key.replace(/\s+/g, '')) 

ここに更新されたフィドルです：http://jsfiddle.net/gx4zc8tq/