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

Question

我在这里看到了一个平行坐标图。

我想做的是，只有当鼠标悬停在dataset1的行上时，才能可视化dataset2类型的数据。

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

例如：

{
"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();
}
});

Answer 1

您可以尝试在添加组时设置不透明度"g"；。您可以查看此链接以了解该概念。

我更改了以下代码行：

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