javascript - 将鼠标悬停在链接上时显示文本

Question

我试图在链接上的鼠标悬停上显示文本，但我看不到任何文本。我只能像下面所附的代码一样更改颜色。

也欢迎任何有关工具提示的帮助，因为我也尝试过。

Here is the code to the jsfiddle .

Answer 1

试试这个方法。

link.on('mouseover', function(d, i) {
    d3.select(this).style("stroke", "red");
    if (!d3.select("#link-label-" + i).node()) {
        svg.append("text")
            .attr("id", "link-label-" + i)
            .attr("font-family", "Arial, Helvetica, sans-serif")
            .attr("x", function() {
                if (d.target.x > d.source.x) {
                    return (d.source.x + (d.target.x - d.source.x) / 2);
                } else {
                    return (d.target.x + (d.source.x - d.target.x) / 2);
                }
            })
            .attr("y", function() {
                if (d.target.y > d.source.y) {
                    return (d.source.y + (d.target.y - d.source.y) / 2);
                } else {
                    return (d.target.y + (d.source.y - d.target.y) / 2);
                }
            })
            .attr("fill", "Black")
            .style("font", "normal 12px Arial")
            .attr("dy", ".35em")
            .text(function() {
                return d.source.name + " - " + d.target.name;
            });
    }
}).on('mouseout', function(d, i) {
    d3.select(this).style("stroke", d.target.group == 2?"black":"#9ecae1");
    d3.select("#link-label-" + i).remove();
});

已更新fiddle