javascript - 如何在链接上移动工具提示文本？

Question

我是D3的初学者。目前我正在研究一个没有强制力的网络图。现在我在将鼠标悬停在链接上时显示工具提示有问题。显示所需的文本，但始终位于左上角。

到目前为止，这就是我创建链接的方式：

        rect.data.links = [
            {"source":0,"target":1, "distance":100, "weight": 4, "color" : "black"},
            {"source":1,"target":2, "distance":100, "weight": 12, "color" : "black"},
            {"source":1,"target":3, "distance":100, "weight": 4, "color" : "black"},
            {"source":2,"target":0, "distance": 100, "weight": 9, "color" : "black"},
            {"source":2,"target":4, "distance": 100, "weight": 6, "color" : "black"},
            {"source":0,"target":4, "distance": 100, "weight": 12, "color" : "black"},
            {"source":3,"target":0, "distance": 100, "weight": 12, "color" : "black"},
            {"source":3,"target":2, "distance": 100, "weight": 9, "color" : "black"}

        ];

        // Initialize the links
        var links = rect.svg
            .selectAll("line")
            .data(rect.data.links)
            .enter()
            .append("svg:g")
            .attr("class", "link");

        links
            .append("line")
            .attr("x1", function(l) {
                var sourceNode = rect.data.nodes.filter(function(d, i) {
                    return i == l.source
                })[0];
                d3.select(this).attr("y1", sourceNode.y);
                return sourceNode.x
            })
            .attr("x2", function(l) {
                var targetNode = rect.data.nodes.filter(function(d, i) {
                    return i == l.target
                })[0];
                d3.select(this).attr("y2", targetNode.y);
                return targetNode.x
            })
            .style('stroke', function (d) {
                return d.color;
                }
            )
            .style('stroke-width', function(d) {
                return Math.sqrt(d.weight);
            })
            .on("mouseover", function() {
                return tooltip_links.style("visibility", "visible");})
            .on("mouseout", function() {
                return tooltip_links.style("visibility", "hidden");
            });


        // create a tooltip with keywords
        var keywords = links
        .append("foreignObject")
            .data(rect.data.links)
            .attr("width", "170px")
            .attr("height", "75px")
            .attr("x", d => ((d.source.x + d.target.x) / 2))
            .attr("y", d => ((d.source.y + d.target.y) / 2));


        // create a tooltip
        var tooltip_links = keywords
            .append("xhtml:div")
            .style("position", "absolute")
            .style("visibility", "visible")
            .text("Lorem ipsum");

这是一个小提琴：https ://jsfiddle.net/9facu458/

如何强制链接工具提示出现在链接上？

标签： javascriptd3.jstexthyperlinktooltip

Answer 1

你可以试试这个（适用于 D3 v3/v4）：

tooltip_links
  .style('left', `${d3.event.offsetX}px`)
  .style('top', `${d3.event.offsetY}px`)
  .style('visibility', 'visible');

请注意，您的小提琴一直卡住，请修复它。

更新：对于 D3 v6，使用：

tooltip_links
  .style('left', e => `${e.offsetX}px`)
  .style('top', e => `${e.offsetY}px`)
  .style('visibility', 'visible');