Question

我正在创建一个d3力导向图。我的要求是单击并双击节点单击一下，我需要执行不同的任务，双击，其他一些任务。

这就是我的代码：

var node = svg.append("g")
          .attr("class", "nodes")
          .selectAll("circle")
          .data(graph.nodes)
          .enter().append("circle")
          .attr("cx", function(d) { return d.x; })
          .attr("cy", function(d) { return d.y; })
          .attr("r", 5)
          .on("click",function(d){ alert("node was single clicked"); })
          .on("dblclick",function(d){ alert("node was double clicked"); })

这里的问题是，即使我双击节点，也会调用单击功能。

当我双击节点时，如何防止调用click函数换句话说，单击节点时，必须调用click函数，双击时，必须调用dblclick函数。

非常感谢能够帮助我解决这个问题的任何人。

Answer 1

您可以使用setTimeout区分单击和双击，查看演示：

＆＃13;

var timeout = null;

d3.select('rect').on("click", function(d) {
    clearTimeout(timeout);
    
    timeout = setTimeout(function() {
      console.clear();
      console.log("node was single clicked", new Date());
    }, 300)
  })
  .on("dblclick", function(d) {
    clearTimeout(timeout);
    
    console.clear();
    console.log("node was double clicked", new Date());
  });

＆＃13;

rect {
  fill: steelblue;
}

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>
Open the console and click / double click on the rect:
<svg width="400" height="110">
  <rect width="100" height="100" />
</svg>

＆＃13;

单击和双击d3力导向图中的节点

1 个答案: