d3 drag and drop mouse click event not fire

Question

I am working on the d3 drag and drop functionality ,i followed the link

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

for the d3 drag and drop functionality , it working perfectly as per the d3 v3 version example but i want to do d3 v4 so i looked on the master changes in as per the d3 master changes

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

I converted all the changes everything working fine , except the mouse click and double click event, so i gone through the issue in the d3 forum i find out some solution on that

Why doesn't click event always fire?

But still that was open issue or closed ,Could you anyone know how to solve that issue let me know , share the links.Thanks.

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

for the click event i need to expand and collapse to the Children node.for this scenario the click is not firing , but without drag and drop event click is working properly.

Answer 1

d3's drag() behaviour intercepts click events, and measures how much the mouse has moved between the mouse button going down, and the mouse button going up. If the mouse pointer has moved a distance between the two events, then it prevents a click event from firing. So a very fast, light click on an object will generally work, but a heavier, slower one will not.

The distance for a click to be a click is zero pixels, but fortunately, you can change this with the clickDistance function . Try:

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

And see how adjusting the value given (1 might do it, you may want more or less) works out for you.