d3拖放鼠标单击事件不会激活

Posted 2021-04-20

我正在研究d3拖放功能，我按照链接

http://bl.ocks.org/robschmuecker/7880033

对于d3拖放功能，它完全按照d3 v3版本示例工作，但我想做d3 v4所以我按照d3主变化查看主变化

https://github.com/d3/d3/blob/master/CHANGES.md

我转换所有的变化一切正常，除了鼠标点击和双击事件，所以我在d3论坛中经历了这个问题我找到了一些解决方案

Why doesn't click event always fire?

但仍然是开放问题或关闭，你能否知道如何解决这个问题让我知道，分享链接。谢谢。

var nodeEnter =  node.enter().append('g').call(d3.drag()                                     
                                .on("start", dragstarted)
                                .on("drag", dragged)
                                .on("end", dragended)).on("click",collapse)
                              .on("mouseover", overCircle)                                
                             .on("mouseout", outCircle)                   
                             .attr('class', 'node')
                             .attr('cursor', 'pointer')                                 
                             .attr("transform", function (d) {
                                return "translate(" + source.y0 + "," + source.x0 + ")";
                                   });

对于click事件，我需要展开并折叠到Children节点。对于这种情况，单击不会触发，但没有拖放事件单击工作正常。

答案

d3的drag()行为拦截点击事件，并测量鼠标在鼠标按钮下降和鼠标按钮上升之间的移动量。如果鼠标指针在两个事件之间移动了一段距离，则会阻止click事件触发。因此，对物体进行非常快速，轻微的点击通常会起作用，但较重，较慢的物体则不会。

单击点击的距离为零像素，但幸运的是，您可以使用clickDistance function更改此值。尝试：

node.enter().append('g').call(d3.drag()
   .clickDistance(1)
   .on("start", [etc.]

并看看如何调整给定的值（1可能会做，你可能想要更多或更少）为你工作。