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.

Решение: вместо этого установите классы.

Для линий:

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

И для кругов:

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

Затем получить класс на события мыши (используйте selectAll, не select):

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

вот обновленная скрипка: http://jsfiddle.net/gx4zc8tq/