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

Answer 1

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.