Javascript 在鼠标上方显示连接的节点显示交叉链接
我有一个力定向图,其中在节点鼠标上,未连接到当前节点的元素淡出,基于以下内容。问题是,如果光标快速移动,并且它穿过一个不是目标节点连接一部分的链接,它仍然以完全不透明度显示,因为在途中触发了交叉链接鼠标悬停,但显然没有时间完成其鼠标悬停功能。例如,您可以看到: 在图中,鼠标从上到下快速移动,光标停在HSA-MIR-424处。与目标节点的连接显示正确,但也可以看到三个额外的链接,因为当光标穿过它们时会触发鼠标悬停。如果我对同一个节点缓慢地重复从上到下的运动,或者将从下到上的运动移动到该节点,那么就看不到这样的问题(因为在图片中,没有在该方向交叉的链接) 如何避免这个问题 代码的相关部分,link mouseover/mouseout:Javascript 在鼠标上方显示连接的节点显示交叉链接,javascript,events,graph,d3.js,fade,Javascript,Events,Graph,D3.js,Fade,我有一个力定向图,其中在节点鼠标上,未连接到当前节点的元素淡出,基于以下内容。问题是,如果光标快速移动,并且它穿过一个不是目标节点连接一部分的链接,它仍然以完全不透明度显示,因为在途中触发了交叉链接鼠标悬停,但显然没有时间完成其鼠标悬停功能。例如,您可以看到: 在图中,鼠标从上到下快速移动,光标停在HSA-MIR-424处。与目标节点的连接显示正确,但也可以看到三个额外的链接,因为当光标穿过它们时会触发鼠标悬停。如果我对同一个节点缓慢地重复从上到下的运动,或者将从下到上的运动移动到该节点,那么
.on("mouseover", function(d) {
var selection = d3.select(this);
var initialWidth = Number( selection.style("stroke-width") );
selection.transition().style("stroke-width", initialWidth + Number(4) )
.style("stroke-opacity", 1.0);
//.style("stroke", linkOverColor);
} )
.on("mouseout", function(d) {
var selection = d3.select(this);
selection.transition().style("stroke-width", getLinkStroke( selection.data()[0] ) )
.style("stroke-opacity", conf.link_def_opacity);
})
// display closest neighbors and fade others out
.on("mouseover", fade(0.10) )
// return to default view
.on("mouseout", fade(conf.node_def_opacity) );
节点鼠标悬停/鼠标悬停:
.on("mouseover", function(d) {
var selection = d3.select(this);
var initialWidth = Number( selection.style("stroke-width") );
selection.transition().style("stroke-width", initialWidth + Number(4) )
.style("stroke-opacity", 1.0);
//.style("stroke", linkOverColor);
} )
.on("mouseout", function(d) {
var selection = d3.select(this);
selection.transition().style("stroke-width", getLinkStroke( selection.data()[0] ) )
.style("stroke-opacity", conf.link_def_opacity);
})
// display closest neighbors and fade others out
.on("mouseover", fade(0.10) )
// return to default view
.on("mouseout", fade(conf.node_def_opacity) );
衰落函数:
function fade(opacity) {
return function(d) {
d3.event.stopPropagation();
var thisOpacity;
// return to default view
if( opacity === conf.node_def_opacity )
{
d3.selectAll('marker > path').transition().style("opacity", 1);
nodeGroup.transition().style("opacity", conf.node_def_opacity);
link.style("stroke-opacity", conf.link_def_opacity);
}
else // fade not-neighborhood away
{
d3.selectAll('marker > path').transition().style("opacity", 0);
// d3.selectAll('marker > path').transition().style('display', 'none');
nodeGroup.transition().style("opacity", function(o)
{
thisOpacity = isConnected(d, o) ? conf.node_def_opacity : opacity;
return thisOpacity;
});
link.style("stroke-opacity", function(o) {
return o.source === d || o.target === d ? conf.link_def_opacity : opacity;
});
}
}
}
通过为节点和链接鼠标移动操作引入计时器,解决了此问题。代码列在下面的列表中