title: how to display name of node when mouse over on node in collapsible tree graph
body: <p>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.</p>
  
  <pre><code>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'); });
  </code></pre>
  
  <blockquote>
    <p>translate(?,?)</p>
  </blockquote>
  
  <p>collapsible tree graph link : <a href="http://bl.ocks.org/mbostock/4339083" rel="noreferrer">http://bl.ocks.org/mbostock/4339083</a></p>
  
  <p>Please try to help me
  Thanks</p>