在 d3 强制布局图中的节点上显示文本

Question

我正在使用 d3 创建一个强制布局图，并且当我将鼠标悬停在该节点上时，我试图使特定节点的名称出现。我知道如何在任何鼠标悬停效果之前添加文本，并认为我可以将那部分代码移动到鼠标悬停函数中，但这不起作用。当我将鼠标移出节点时，我还需要使文本消失。这是我尝试将名称添加到节点的鼠标悬停功能：

function mouseover() {
    d3.select(this).transition()
         .duration(750)
         .attr("r", function(d) {return d.size + 10;});
    var labels = gnodes.append("text")
         .text(function(d) { return d.name;})
         console.log(labels);
                    }

这里也是完整代码的链接：

http://jsfiddle.net/ohiobucks23/QvVU6/

Answer 1

如果不使用 Bhatt 推荐的工具提示，您需要：

1) 在drawGraph() 函数之外声明gnodes 以便鼠标函数可见，并且

2) 对鼠标功能进行如下修改：

function mouseover(d) {
   d3.select(this).transition()
       .duration(750)
       .attr("r", function (d) {return d.size + 10;});

   // locate node and append text; add class to facilitate subsequent deletion
   gnodes.filter(function (o) {return o.index === d.index;})
       .append("text")
       .attr("class", "nodetext")
       .text(d.name);
}

function mouseout(d) {
   d3.select(this).transition()
       .duration(750)
       .attr("r", function (d) {return d.size;});

   // delete text based on class
   d3.selectAll(".nodetext").remove();
}

这是完整的FIDDLE。我更改了根节点元素的文本，以便您可以看到mouseover 函数确实作用于所选节点。