d3.js - D3 js multiple line graph toggle dots on/off

Question

This D3 js example shows all the code to produce a multi-line graph that can be toggled. Each line in the graph includes dots for existing data points.

While the lines can be toggled on/off, the dots stay stagnant. I would like for the toggle to work for both turning on/off the line & the dots that are associated with the same line.

I suspect that the svg.append("text") is the part that requires code update to also enable the dots to be turned on/off along with the line.

Here is the existing code snipet that turns on/off the line graph, but it doesn't turn on/off the dots.

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); 

Please help.

Answer 1

IDs are unique. You cannot set the same ID for several different DOM elements.

Solution: set classes instead.

For the lines:

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

And for the circles:

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

Then, get the class on the click event (use selectAll, not select):

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

here is the updated fiddle: http://jsfiddle.net/gx4zc8tq/