悬停时显示文本的连接线

这就是你要找的吗?

Codepen DEMO

新代码的更改:

1. 您有一个绑定到圆圈的dragstart和dragend事件。同样,现在这些行也有这些事件。

   d3.selectAll('line.connector').call(d3.drag()
       .on('start', displayConnectorName)
       .on('end', removeName));
   

   对于显示名称,我使用的函数与您对圆所使用的函数类似,但在本例中,位置将明显不同。

   功能如下:

   函数displayConnectorName(d){ var thisLine=d3。选择(本);

               var textX = (+thisLine.attr('x1')+(+thisLine.attr('x2')))/2;
               var textY = (+thisLine.attr('y1')+(+thisLine.attr('y2')))/2;
   
               //create a text element
               //give it an id so it can be deleted at drag end
               //attributes are based on the line being dragged
   
               d3.select('svg')
                   .append('text')
                   .attr('id', 'dragName')
                   .attr('x', textX)
                   .attr('y', textY).attr('dx', '-3em')
                   .text(d.source + ' - ' + d.target)
                   .attr('font-size', 20)
       .attr('fill', 'orange');
   

   }

   对于 正在删除 这个名字,相同 removeName 函数用作 id 附加到 text 与圆形相同,即。 dragName

2. 位置 因为到目前为止,文本都在线条的中心,文本是

源目标

但我认为,你可以从这里开始,并根据要求进行更改。

3. 圆圈代表 各州 而不是国家。:)

希望这有帮助。:)

我想你要找的是工具提示。 它可以通过附加 svg:title 元素到每个圆。 下一个浏览器将显示工具提示,您不必担心悬停事件。

遵循以下链接:它们可能会帮助您了解您需要什么。

https://github.com/caged/d3-tip

http://bl.ocks.org/Caged/6476579