在鼠标悬停时显示 d3.layout.force 链接工具提示答案

【问题标题】：Show d3.layout.force link tooltip on mouse over在鼠标悬停时显示 d3.layout.force 链接工具提示
【发布时间】：2012-11-03 03:46:48
【问题描述】：

如何在鼠标悬停时为D3 有向图布局中的链接实现工具提示？我正在调整D3 force 示例，因此使用如下代码设置节点工具提示非常简单：

    node.append("title")
        .text(function(n) {
            return n.id;
        });

用链接尝试类似的技术并没有导致鼠标悬停在工具提示上：

    var link = svg.selectAll("line.link")
        .data(json.links)
        .enter().append("line")
        .attr("class", "link")
        .style("stroke-width", function(d) {
            return 4;
        });

link.append("title")
    .text(function(n) {
            return n.info;
        });

【问题讨论】：

标签： javascript d3.js hyperlink tooltip force-layout

【解决方案1】：

您可以在此 Google 网上论坛帖子 "show value when click or move mouse over on d3.svg.line" 上找到 Mike Bostock 建议的不同解决方案

【讨论】：

【解决方案2】：

我认为您正在寻找的是这两个答案的组合：

d3js: _on()_ doesn't send the current datum object to the onmouse function

和

Adding tooltip to bar chart generated using svg path

两者都有可以玩的 jsFiddles。

【讨论】：

【解决方案3】：

如上所示设置链接标题确实会导致鼠标悬停在工具提示上 -- 如果您让鼠标悬停在链接的任何部分上几秒钟。

【讨论】：