[Solved]-how to display name of node when mouse over on node in collapsible tree graph-d3.js

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.