Why does d3.js v3 break my force graph when implementing zooming when v2 doesn’t?

by

If you peruse the release notes, you’ll see a full explanation of everything that’s changed between the final release of 2.x (2.10.3) and the most recent release, 3.2.7. In particular, from release 3.2.2:

Better handling of drag gestures in d3.behavior.drag, d3.behavior.zoom and d3.svg.brush by not preventing default behaviors or stopping propagation. For example, mousedown now changes focus, mouseup outside an iframe works correctly, and touchstart does not stutter.

So, in V2, the drag behavior could take priority over the zoom behavior by stopping propagation on zoom events. In V3, this no longer happens automatically, giving you the choice of which behavior takes priority, and when.

If you want to give the drag behavior priority when dragging nodes, then you need to stopPropagation on input events while dragging so that these events are not simultaneously interpreted as panning by the zoom behavior. Stopping propagation on dragstart is sufficient:

var drag = d3.behavior.drag()
    .on("dragstart", function() { d3.event.sourceEvent.stopPropagation(); })
    .on("drag", function() { /* handle drag event here */ });

If using a force layout, the code is:

var drag = force.drag()
    .on("dragstart", function() { d3.event.sourceEvent.stopPropagation(); });

Working example:

drag and zoom

Note: combining these two behaviors means that gesture interpretation is ambiguous and highly sensitive to position. A click on a circle is interpreted as dragging that circle, whereas a click one pixel away could be interpreted as panning the background. A more robust method of combining these behaviors is to employ modality. For example, if the user holds down the SPACE key, clicking and dragging is interpreted as panning, rather than dragging, regardless of the click location. This approach is commonly employed in commercial software such as Adobe Photoshop.

More Related Contents:

  1. Add text label to d3 node in Force directed Graph and resize on hover
  2. Display an arrow head in the middle of D3 force layout link
  3. Scaling d3 v4 map to fit SVG (or at all)
  4. How to add a tooltip to an svg graphic?
  5. Highlight selected node, its links, and its children in a D3 force directed graph
  6. Replacing d3.transform in D3 v4
  7. How do I include newlines in labels in D3 charts?
  8. Fix Node Position in D3 Force Directed Layout
  9. How can d3.transform be used in d3 v4?
  10. Updating SVG Element Z-Index With D3
  11. D3 Appending Text to a SVG Rectangle
  12. d3 add text to circle
  13. How to draw a path smoothly from start point to end point in D3.js
  14. (Embed and) Refer to an external SVG via D3 and/or javascript
  15. D3 fill shape with image using pattern
  16. Add text label to d3 node in Force layout
  17. D3 – how to deal with JSON data structures?
  18. Setting rounded corners for svg:image
  19. Circles in Map Displayed Incorrect Location in D3 V4
  20. Is there a way to zoom into a D3 force layout graph?
  21. Align Marker on node edges D3 Force Layout
  22. svg / d3.js rounded corners on one side of a rectangle
  23. Add names of the states to a map in d3.js
  24. Adding new nodes to Force-directed layout
  25. How do I return y coordinate of a path in d3.js?
  26. D3.js: Remove force.drag from a selection
  27. Calculate SVG Path Centroid with D3.js
  28. Can’t make paths draw growing slowly with D3
  29. D3 put arc labels in a Pie Chart if there is enough space
  30. clicking a node in d3 from a button outside the svg

Leave a Comment