how to display name of node when mouse over on node in collapsible tree graph

Question

I am developing collapsible tree graph. I am trying to generate mouse over event on node. When i mouse over on node at that time it should display name of node. I tried but i don't know how to calculate transform attribute value to show name above or below the node.

var nodeEnter = node.enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
      .on("click", click)
      .on("mouseover", function(d){
            alert("over");
        d3.select(this).attr('transform', function(d){ return 'translate(?,?)'})
        .text(d.name + ": " + d.id)
        .style('display', null);
      })
      .on("mouseout", function(d){ alert("out"); d3.select(this).style('display', 'none'); });

translate(?,?)

collapsible tree graph link : http://bl.ocks.org/mbostock/4339083

Please try to help me Thanks

Are you looking for [a tooltip](http://stackoverflow.com/questions/10805184/d3-show-data-on-mouseover-of-circle/10806220#10806220)? — Lars Kotthoff, Oct 10 '13 at 14:17
Is your question how does `translate` work? `translate` moves a shape along the x- and y-axis according to its two parameters `x` and `y`. For your reference, here's a [simple `translate` tutorial](http://tutorials.jenkov.com/svg/svg-transformation.html#translate). — mdml, Oct 10 '13 at 14:26
@lars : As of now i just wanna show text. My next phase is to generate tooltip when mouse over on node. Thanks a lot Lars. — Maddy Chavda, Oct 11 '13 at 06:43
@mtitan8 : I had the confusion about x and y parameter values but now i got it. Thanks a lot. — Maddy Chavda, Oct 11 '13 at 06:43

score 17 · Accepted Answer · answered Oct 10 '13 at 14:49

The groups of class node translated to its location, if you want to add an item under it you can use relative coordinates. The center of the circle, for instance, is located (by default) at the (0, 0) coordinates relative to the group. If you want to add a text 10 px under the circle, and 20 px to the right, you should do:

var nodeEnter = node.enter().append("g")
  .attr("class", "node")
  .attr("transform", function(d) { 
      return "translate(" + source.y0 + "," + source.x0 + ")"; 
  })
  .on("click", click)
  .on("mouseover", function(d) {
      var g = d3.select(this); // The node
      // The class is used to remove the additional text later
      var info = g.append('text')
         .classed('info', true)
         .attr('x', 20)
         .attr('y', 10)
         .text('More info');
  })
  .on("mouseout", function() {
      // Remove the info text on mouse out.
      d3.select(this).select('text.info').remove();
  });

Regards.

What he said (beat me by a couple minutes :) But, here's a fiddle that demonstrates it: http://jsfiddle.net/reblace/6FkBd/2/ — reblace, Oct 10 '13 at 14:52

how to display name of node when mouse over on node in collapsible tree graph

1 Answers1

Linked