将选定的弧线悬停在用户前方并使所有其他弧线的显示变暗

Question

我使用D3.js创建了一个可视化，它可以连接地图上的弧线。从csv文件读取数据，并使用一些过滤器连接弧。根据用户提供的输入，在某些情况下，会出现在地图上不同点之间绘制的杂波（见下图）。目前我编写了这样的代码，当用户在弧上盘旋时，该特定弧将突出显示。

我对这种情况有两个问题： -

1）如果有杂乱的弧线，如何将用户悬停的弧线带到显示屏的前面

2）是否可以调暗所有其他弧的背景颜色，并仅突出显示用户选择的相关弧。换句话说，除了用户选择的弧之外，我希望将所有其他弧的显示强度调暗

Answer 1

嗯，在没有看到任何代码的情况下提供答案非常困难，但这里是：

首先，为弧设置一个类（如.foo）。然后，定义mouseover和mouseout事件：

var myArcs = d3.selectAll(".foo");

myArcs.on("mouseover", function(d){
    myArcs.attr("opacity", 0.2);//tweak this value
    d3.select(this).attr("opacity", 1);
    d3.select(this).raise();
}).on("mouseout", function(){
    myArcs.attr("opacity", 1);
});

请注意，raise()仅适用于D3 v4.x.除此之外，如果这些路径被隐藏在不同的组中，raise()将不起作用（对于你想要的）。

这是一个演示：

＆＃13;

＆＃13;

var w = 500, h = 300;
var svg = d3.select("body")
	.append("svg")
	.attr("width", w)
	.attr("height", h);
	
var data = d3.range(100);

var color = d3.scaleOrdinal(d3.schemeCategory10);

var lines = svg.selectAll(".lines")
	.data(data)
	.enter()
	.append("line")
	.attr("stroke-width", 4)
	.attr("stroke", (d,i)=> color(i))
	.attr("x1", ()=>Math.random()*w)
	.attr("x2", ()=>Math.random()*w)
	.attr("y1", ()=>Math.random()*h)
	.attr("y2", ()=>Math.random()*h);
	
lines.on("mouseover", function(d){
    lines.attr("opacity", 0.2);
    d3.select(this).attr("opacity", 1);
    d3.select(this).raise();
}).on("mouseout", function(){
    lines.attr("opacity", 1);
});

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>

＆＃13;

＆＃13;

＆＃13;