Question

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

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）在gnodes函数之外声明drawGraph()，以便鼠标函数可以看到它，并且

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函数确实在所选节点上起作用。

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

1 个答案: