Show hint link d3.layout.force when you hover over

Question

How to implement mouse tooltips over links in a D3 layout of a directional graph? I am fitting an example of the power of D3 , so setting up node popups was simple using code like this:

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

Attempting a similar technique using links did not result in a mouse hint:

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

Answer 1

You can find various solutions suggested by Mike Bostock in this Google Groups thread "show value when you click or hover over d3.svg.line"

Answer 2

I think you are looking for a combination of these two answers:

d3js: _on () _ does not send the current datum object to the onmouse function

and

Adding a tooltip to a histogram generated using the svg path

Both have jsFiddles that you can play with.

Answer 3

Setting the link title, as shown above, leads to the mouse over the tooltips - if you allow the mouse to hover over any part of the link for a couple of seconds.