javascript - Show d3.layout.force link tooltip on mouse over - Stack Overflow

admin管理员组

文章数量:1394544

How do I implement tooltips on mouse over for links in a D3 directed graph layout? I'm adapting the D3 force example, so setting up node tooltips was straightforward using code like this:

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

Trying a similar technique with the links didn't result in mouse over tool tips:

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

How do I implement tooltips on mouse over for links in a D3 directed graph layout? I'm adapting the D3 force example, so setting up node tooltips was straightforward using code like this:

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

Trying a similar technique with the links didn't result in mouse over tool tips:

    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

Share Improve this question Follow edited Jun 10, 2014 at 11:07 VividD 10.5k88 gold badges6666 silver badges112112 bronze badges asked Nov 3, 2012 at 3:46 softweavesoftweave 1,54522 gold badges1717 silver badges2828 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

You can find different solutions suggested by Mike Bostock on this Google Groups thread "show value when click or move mouse over on d3.svg.line"

I think what you are looking for is a bination of these two answers:

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

and

Adding tooltip to bar chart generated using svg path

Both have jsFiddles you can play with.

Setting the link title as shown above does result in mouse over tooltips -- iff you let the mouse hover over any portion of the link a couple of seconds.

本文标签： javascriptShow d3layoutforce link tooltip on mouse overStack Overflow