I'm trying this example and I applied the d3.behavior.drag with the function

var drag = d3.behavior.drag()
        .on("drag", function(d,i) {
            d.x += d3.event.dx
            d.y += d3.event.dy
            d3.select(this).attr("transform", function(d,i){
                return "translate(" + [ d.x,d.y ] + ")"
            })
        });

Please see my example here.

My problem is after dragging the svg.

When I click on an element the zoom isn't well apllied.

For instance, the root disappear...

How can I fix this situation?

Thanks, Carlos.

I'm trying this example and I applied the d3.behavior.drag with the function

var drag = d3.behavior.drag()
        .on("drag", function(d,i) {
            d.x += d3.event.dx
            d.y += d3.event.dy
            d3.select(this).attr("transform", function(d,i){
                return "translate(" + [ d.x,d.y ] + ")"
            })
        });

Please see my example here.

My problem is after dragging the svg.

When I click on an element the zoom isn't well apllied.

For instance, the root disappear...

How can I fix this situation?

Thanks, Carlos.

• javascript
• d3.js

3 Answers 3

The problem is that when you try to drag the elements the click event is also fired and both the event handlers are getting executed.

You need to ignore the click event if it was suppressed (i.e. when you are dragging).

Modify your click event handler as

function click(d) {
    // Ignore the click event if it was suppressed
    if (d3.event.defaultPrevented){
     return;
    }
    path.transition()
      .duration(750)
      .attrTween("d", arcTween(d));
    };

Given in your case that an element can be dragged and clicked, in addition to prashant's answer, you'll want to suppress the click on drag as follows:

drag.on("dragstart", function() {
  d3.event.sourceEvent.stopPropagation(); // silence other listeners
});

See http://bl.ocks/mbostock/6123708 for an example :-)

use this, d3.event.sourceEvent.stopPropagation();