如何显示节点的名称，当鼠标悬停在可折叠树图中的节点上时 [英] how to display name of node when mouse over on node in collapsible tree graph

问题描述

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

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(?,?)

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

请尝试帮助我
感谢

Please try to help me Thanks

推荐答案

类节点的组转换到其位置，如果要在其下添加项，可以使用相对坐标。例如，圆的中心（默认）位于相对于组的（0,0）坐标处。如果您要在圆圈下面添加一个文本10 px，而在右边添加20 px，则应该执行以下操作：

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

回答。

这篇关于如何显示节点的名称，当鼠标悬停在可折叠树图中的节点上时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！