javascript - Zoom event overrides Drag behavior in d3js - Stack Overflow

admin管理员组

文章数量:1279043

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 /

Seems that i did not understand the "d3.behavior". .html provides only zoom handler and handles both dragging and zooming.

What am i doing wrong here?

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/xTaDC/

Seems that i did not understand the "d3.behavior". https://github./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?

• javascript
• svg
• zooming
• d3.js
• drag

Share Improve this question Follow asked Nov 23, 2012 at 18:19 altunyurtaltunyurt 2,94644 gold badges3939 silver badges5353 bronze badges 3

• Hi, I am having the same problem, Can you please point me to a working example where node dragging, pan and zoom are working? – user602599 Commented Oct 3, 2013 at 3:10
• d3js zoom provides both dragging and zooming. Upon zoom, you can then either translate() or scale() your shapes. See Levi's reply. – altunyurt Commented Oct 3, 2013 at 7:55
• Specifically, I am unable to implement node drag in this example: bl.ocks/mbostock/3680999 – user602599 Commented Oct 4, 2013 at 19:18

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

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./mbostock/d3/wiki/Zoom-Behavior

I faced similar problem and solved it by overriding other sub events of zoom.

Add below code after zoom and drag event listeners

.on("mousedown.zoom", null)
.on("touchstart.zoom", null)
.on("touchmove.zoom", null)
.on("touchend.zoom", null);

So the full code will look like

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))
    .on("mousedown.zoom", null)
    .on("touchstart.zoom", null)
    .on("touchmove.zoom", null)
    .on("touchend.zoom", null);

Append your graph with sensitive event area (must be the last append) :

var rect = svg.append("svg:rect")
    .attr("class", "pane")
    .attr("width", w)
    .attr("height", h);

AFTER (not include) add event management on this area

rect.call(d3.behavior.zoom().x(x).scaleExtent([0.5, 4]).on("zoom", draw));

and the draw function is

function draw() {
    svg.select("g.x.axis").call(xAxis);
    svg.select("g.y.axis").call(yAxis);
    svg.select("path.area").attr("d", area);
    svg.select("path.line").attr("d", line);
}

see this exemple : https://groups.google./forum/?fromgroups=#!topic/d3-js/6p7Lbnz-jRQ%5B1-25-false%5D

In 2020, use d3.zoom to enable zooming and panning: https://observablehq./@d3/zoom

If you want to enable panning for the background, while allowing to drag the circle, see the official example where d3.drag and d3.zoom are used on different elements: https://observablehq./@d3/drag-zoom

本文标签： javascriptZoom event overrides Drag behavior in d3jsStack Overflow