在鼠标悬停时显示连接的节点会显示交叉的链接

Question

我有一个力导向图，根据以下示例 ，在该图上，鼠标悬停在节点上时，未连接到当前节点的元素将淡出。 问题是，如果光标快速移动并且穿过了不属于目标节点连接的一部分的链接，由于交叉链接鼠标悬停在途中被触发，但它仍显示为完全不透明，但是显然没有时间完成其mouseout功能。 例如，您可以看到以下内容：

在图片中，鼠标从上到下快速移动，光标停在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) );

衰落功能：

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

Answer 1

通过为节点和链接鼠标悬停操作引入计时器来解决此问题。 该代码在此答案中列出。