如何从 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")   });这里有一个演示