Home/ Questions/Q 8928839
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T08:32:22+00:00

I’m trying to implement both dragging and zooming event handlers for a circle item

  • 0

I’m trying to implement both dragging and zooming event handlers for a circle item using d3js. I’ve added behaviors for both events as given below 

var circle = svg.append("circle")
    .attr("fill", "green")
    .attr("opacity", 0.6)
    .attr("cx", 100)
    .attr("cy", 100)
    .attr("r", 13)
    .call(d3.behavior.drag().on("drag", drag))
    .call(d3.behavior.zoom().on("zoom", zoom));

without zooming the object, dragging works fine. after zooming in/out of the object, dragging does not work, yet all events containing a mousedown is caught as “zoom” event.

For full source please see http://jsfiddle.net/xTaDC/

Seems that i did not understand the “d3.behavior”. https://github.com/mbostock/d3/blob/master/examples/mercator/mercator-zoom-constrained.html provides only zoom handler and handles both dragging and zooming.

What am i doing wrong here?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    As far as I know, d3’s zoom behavior already handles dragging, so the drag thing is redundant. Try making use of the zoom’s d3.event.translate (which is a 2 element array, so if you want to get the x value only, you can go d3.event.translate[0]) to replicate the functionality in your Drag into your Zoom.

    Additional tip: To make things easier on yourself, make sure that you apply your call(zoom) on the parent of whatever it is that you’re trying to drag. This will prevent jittery and shaky behavior.

    Source is of course, the d3 wiki.
    “This behavior automatically creates event listeners to handle zooming and panning gestures on a container element. Both mouse and touch events are supported.”
    https://github.com/mbostock/d3/wiki/Zoom-Behavior

    • 0