d3拖放鼠标单击事件不触发

Question

我正在开发 d3 拖放功能，我点击了链接

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

对于 d3 拖放功能，它按照 d3 v3 版本示例完美运行，但我想做 d3 v4，所以我查看了 根据 d3 master 的变化

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 + ")";
                                   });

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

Answer 1

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

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

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

看看如何调整给定的值（1 可能会这样做，你可能想要更多或更少）对你有用。