在D3强制引导图中添加可点击链接或onClick处理程序？ [英] Adding clickable links or onClick handler in a D3 force directed diagram?

问题描述

当用户点击 D3力指示图中的节点时，是否可以将它们发送到URL或调用JavaScript（例如alert（您点击节点1））？

When a user clicks on a node in a D3 force directed diagram, is it possible to send them to a URL or to call JavaScript such as alert("You clicked on node 1")?

推荐答案

点击监听器可以应用于选择。因此，您可以通过在节点选择上调用 .on（click，function（d）{...}）将其应用于节点。这不是任何特殊的力布局。

A click listener can be applied to a selection. Therefore you can apply it to the nodes by calling an .on("click",function(d){...}) on your nodes selection. This is not in any kind special for the force layout.

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

Most of the time force layouts are combined with a drag behavior. You should be aware that the click is also triggered after a drag on the node ends.

如果您使用这个例子中，你可以使用节点选项，并将其更改为：

If you take this example of a fore directed diagram, you could use the node selection and change it to this:

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）已添加，如果您想要点击和拖动行为结合。

You can leave the .call(force.drag) added if you want the click and drag behavior combined.

这篇关于在D3强制引导图中添加可点击链接或onClick处理程序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！