如何在鏈接上移動工具提示文本？

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/

如何強制鏈接工具提示出現在鏈接上？

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