How to display the name of a node when you hover over a node in a collapsible tree chart

Question

I am developing a resettable tree graph. I am trying to create a mouse event over an event on a node. When I click on node, at this time it should display the name of the node. I tried, but I don’t know how to calculate the value of the transform attribute to show the 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'); }); 

translation (?,?)

resettable tree graph: http://bl.ocks.org/mbostock/4339083

Please try to help me. Thanks.

Answer 1

The groups of the node class are translated to its location, if you want to add an element under it, you can use relative coordinates. For example, the center of the circle is located (by default) in coordinates (0, 0) relative to the group. If you want to add 10 px text under the circle and 20 pixels 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(); }); 

Sincerely.