如何仅在单击/悬停时在d3.js中显示具有特定属性值的数据

如何解决如何仅在单击/悬停时在d3.js中显示具有特定属性值的数据

我有一个可视化的here平行坐标图。

我要做的是仅将鼠标悬停在数据集1的行上时才能可视化数据集2的数据。

因此，我不希望仅在单击同一行"dataset": "dataset2",的行时才显示具有此属性type的数据，例如宝马。

例如：

 {
    "type": "bmw","dataset": "dataset1","car1": 0.1068310912868661,"car2": 0.10347688576554598,"car3": 0.11709226547153888
  },{
    "type": "bmw","dataset": "dataset2","car1": 0.5068310912868661,"car2": 0.30347688576554598,"car3": 0.21709226547153888
  },

从这两个数据点中，我只希望在图中显示第一个数据点。当我单击或将鼠标悬停在第一个数据点上时，另一个数据点将出现。

我正在努力在d3可视化中添加此功能，因此，我们将不胜感激任何帮助。谢谢！

P.S。 要先隐藏它，我尝试了类似的方法，但即使这样也无法正常工作。

// remove dataset2 data
data.filter(function(d) { return d.dataset == "dataset2"; })
    .each(function (d) {
        if (d.dataset == "dataset2" ) {
            this.hide();
            //this.remove();
        }
    });

解决方法

您可以在添加组“ g”的过程中尝试设置不透明度。 您可以查看此link来了解概念。

我更改了以下代码行：

CSS：

    .hidder {
      opacity: 0 !important;
    }

JavaScript：

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