我认为您基本上有一个要解决的碰撞/交叉口检测问题.就像我在上面发布的链接中提到的那样，似乎没有一致的浏览器支持，无法在SVG或D3中执行此操作.

I think you basically have a collision/intersection detection problem to solve. And as mentioned in the links I posted above, there seems to be inconsistent browser support for a reliable way of doing this in SVG or D3.

但是，在您的树形示例中，一种绕过此问题的方法(来自此答案的技术1)是一种绘制方法与节点相同的x，y坐标周围的较大的透明圆.然后，您可以检测到这些鼠标悬停事件并绘制临时连接器以显示给用户.

However, in your tree example, a way (Technique 1 from this answer) to get around this is to draw larger transparent circles around the same x,y coordinates as the nodes. Then you can detect mouseover events on these and draw your temporary connector to show the user.

我在这里有一个可行的例子: http://bl.ocks.org/explunit/5603250

I have a working example of this here: http://bl.ocks.org/explunit/5603250

关键部分是绘制较大的透明节点，然后在其上检测鼠标悬停事件:

The key section is drawing the larger transparent node and then detecting mouseover events on it:

  node.append("circle")
    .attr("r", 60)
    .attr("opacity", 0.0) // change this to non-zero to see the target area
    .on("mouseover", overCircle)
    .on("mouseout", outCircle)

其余的代码只是围绕事物的拖动和跟踪源/目标的逻辑.

The rest of the code is just logic around dragging and keeping track of source/target as things move around.

我不确定这是否比此答案中的技术2好得多，但是您的问题让我感到好奇尝试这种方法.

I'm not sure this is much better than Technique 2 from this answer, but your question made me curious to try out this approach.