Search code examples
javascriptd3.jstooltipmouseoverforce-layout

Show box on mousehover

I am beginning with d3.js and I would like to know the simplest way to show a box containing text (a tooltip) when my the mouse is over a node of my force-directed graph. Moreover, the text contained in this box must be custom for each node (something like function(d){return d.fullName;}))

Here is a sample code of what I have for now.

var node = vis.selectAll("g.node")
    .data(json.nodes)
    .enter().append("svg:g")
    .attr("class", "node"); 

node.append("circle")
    .attr("r", 12)
    .style("fill", "orange");

Thanks in advance

Solution

  • By box, do you mean a tooltip? In Mike's examples, he uses this idiom:

    node.append("title")
    .text(function(d) { return d.fullName: });

    (With other types of elements (divs only?) you can just use element.setAttribute("title", "title");.)