How to access elements from dataset in d3

Question

I have a parallel coordinates plot and I want to show lines onclick for d.dataset = train else hide them.

I wanted to access the row using .filter() like this:

data.filter(function(d) { return d.dataset == "train"; }).attr("visibility", "hidden");

and then set the attr visibility to hidden so that afterwards I can write a function with onclick to make the visibility visible, something like this:

   // On Click, we want to add data to the array and chart
      svg.on("click", function() {
          var line = d3.mouse(this);

                    if (d.dataset === "train"){
                
              //Display line of d.dataset === train 
              // line.attr("visibility", "visible");
              
          }
        });

This one I found also d3.selectAll("[dataset=train]").attr("visibility", "hidden"); but this doesn't work when doing with data elements right?

Right now I tried these and nothing happens. This is the jsfiddle I am working in. The line with "dataset":"train", is visible and doesn't hide.

How can I hide the lines when "dataset":"train", and then show them when onclick to the other lines in the parallel coordinates plot?

Any help would be highly appreciated.

Answer 1

First, make some marks on each path, for example, give a class name like coorPath so that it will be easier to find them. I added it for both background and foreground since I didn't know their difference.

    svg.append("g")
        .attr("class", "background coorPath") // add classname
        .selectAll("path")
        .data(dataSet)
        .enter().append("path")
        .attr("d", draw);

    // CHANGE: duplicate with below code
    /* svg.append("g") 
        .attr("class", "foreground coorPath")
        .selectAll("path")
        .data(dataSet)
        .enter().append("path")
        .attr("d", draw); */

    // USE THE COLOR SCALE TO SET THE STROKE BASED ON THE DATA
    foreground = svg.append("g")
        .attr("class", "foreground coorPath")
        .selectAll("path")
        .data(dataSet)
        .enter().append("path")
        .attr("d", draw)
        .style("stroke", function(d) {
            var company = d.type.slice(0, d.type.indexOf(' '));
            return color(company);
        })

Then, find out the line of train, and make it invisible at first

   let trainline = d3.selectAll("path").filter(function(d) { return d.dataset == "train"; })
   trainline.attr("visibility", "hidden");

Show the line of train when one of other lines is clicked.

   svg.selectAll(".coorPath").on("click", function(d) {
      // show train when click others
      trainline.attr("visibility", "visible")
   });

a demo here