如何从 d3 中的数据集中访问元素

Question

我有一个平行坐标图，我想显示线条onclick以d.dataset = train隐藏它们。.filter()我想像这样访问该行：data.filter(function(d) { return d.dataset == "train"; }).attr("visibility", "hidden");然后将 attr 可见性设置为隐藏，这样之后我就可以编写一个函数来onclick使可见性可见，如下所示：   // 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");                        }        });我也发现了这个 d3.selectAll("[dataset=train]").attr("visibility", "hidden");，但是在处理数据元素时这不起作用吗？现在我尝试了这些但没有任何反应。这是我正在使用的jsfiddle。带有的线"dataset":"train",是可见的并且不会隐藏。如何在平行坐标图中隐藏线条"dataset":"train",，然后在何时向其他线条显示它们？onclick任何帮助将不胜感激。

Answer 1

首先，在每条路径上做一些标记，比如给一个类名，这样coorPath方便查找。我为两者都添加了它background，foreground因为我不知道它们的区别。

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

        })

然后，找出火车的线路，一开始让它不可见

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

   trainline.attr("visibility", "hidden");

单击其他线路之一时显示火车线路。

   svg.selectAll(".coorPath").on("click", function(d) {

      // show train when click others

      trainline.attr("visibility", "visible")

   });

这里有一个演示