d3.js - 当鼠标悬停在可折叠树图中的节点上时如何显示节点的名称

Question

我正在开发可折叠的树图。我正在尝试在节点上生成鼠标悬停事件。当我当时将鼠标悬停在节点上时，它应该显示节点的名称。我试过但我不知道如何计算转换属性值以在节点上方或下方显示名称。

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'); });

翻译（？，？）

可折叠树图链接：http ://bl.ocks.org/mbostock/4339083

请尝试帮助我谢谢

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.