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

时间:2012-11-03 03:46:48

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

如何在鼠标悬停时为D3有向图布局中的链接实现工具提示?我正在调整D3强制示例,因此使用以下代码设置节点工具提示很简单:

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

3 个答案:

答案 0 :(得分:2)

您可以在此Google网上论坛主题"show value when click or move mouse over on d3.svg.line"

上找到Mike Bostock建议的不同解决方案

答案 1 :(得分:2)

我认为你要找的是这两个答案的组合:

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

Adding tooltip to bar chart generated using svg path

两者都有你可以玩的jsFiddles。

答案 2 :(得分:0)

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