在链接

Question

我正在尝试在mouseover上显示链接上的文字，但我无法看到任何文字。我只能改变颜色，如下面的代码所示。

我也欢迎任何有关工具提示的帮助。

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

Answer 2

由于您的circle已绑定到数据，因此您可以执行此类操作

d3.select('circle')
    .attr('title', function(d){
        return d.name; //or whatever
    });

使用默认浏览器工具提示