我悬停时会显示连接行以显示文本

Question

现在当你按住并点击每个圆圈文字出现;当你放开鼠标点击时，文字会消失。对于连接到每个不同圈子（国家/地区）的线路，我希望它们具有可点击的文本，就像圆圈一样。当我将鼠标悬停在线上时，如何在连接线上显示文字？

转到codepen（https://codepen.io/apextrea/pen/JMXmgY）了解更多信息。

window.onload = function () {
    var drawOptions = {     
        // dimensions of svg element 
        SVG_WIDTH:        800,
        SVG_HEIGHT:       600,  
        SHRINK_FACTOR: 100,
        BIG_CIRCLE: 200
    };
}

Answer 1

这是你在找什么？

Codepen DEMO

新代码的变化：

1. 您有一个与圈子绑定的dragstart和dragend事件。同样，现在线也有这些事件。

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

   为了显示名称，我使用与圆圈相似的功能，但在这种情况下，位置会有明显不同。 这是功能： function displayConnectorName（d）{var thisLine = d3.select（this）;

               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. 圆圈代表国家而不是国家。 :)

希望这可以帮助。 :)

Answer 2

我认为您正在寻找的是工具提示。它可以通过将svg:title元素附加到每个圆圈来实现。下一个浏览器将显示工具提示，您不必担心悬停事件。

请按照以下链接：它们可以帮助您了解您的需求。

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

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