Question

我正在研究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节点。对于这种情况，点击不会触发，但没有拖放事件点击工作正常。

Answer 1

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

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

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

看看如何调整给定的值（1可能会这样做，你可能想要更多或更少）为你做好准备。

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

1 个答案: