在D3力导向图中添加可点击链接或onClick处理程序？

Question

当用户点击D3 force directed diagram中的某个节点时，是否可以将其发送到网址或调用JavaScript，例如提醒（“您点击了节点1”）？

Answer 1

点击侦听器可以应用于选择。因此，您可以通过在节点选择上调用.on("click",function(d){...})将其应用于节点。这对于力布局来说并不是特别的。

大多数情况下，力布局与拖动行为相结合。您应该知道，在节点上的拖动结束后也会触发点击。

如果您使用前导图的this example，则可以使用node选项并将其更改为：

var node = svg.selectAll(".node")
    .data(graph.nodes)
  .enter().append("circle")
    .attr("class", "node")
    .attr("r", 5)
    .style("fill", function(d) { return color(d.group); })
    .on("click", function(d){
      console.log(d);
      alert("You clicked on node " + d.name);
    });
    //.call(force.drag);

如果您希望合并点击和拖动行为，则可以添加.call(force.drag)。