d3.behavior.zoom jitters, shakes, jumps, and bounces when dragging

Posted by BrettonW on Stack Overflow See other posts from Stack Overflow or by BrettonW
Published on 2012-06-11T22:38:11Z Indexed on 2012/06/11 22:39 UTC
Read the original article Hit count: 215

Filed under:
|

I am using the d3.behavior.zoom to implement panning and zooming on a tree layout, but it is exhibiting a behavior I would describe as bouncing or numeric instability. When you start to drag, the display will inexplicably bounce left or right until it just disappears. The code looks like this:

var svg = target.append ("g");
...
svg.call (d3.behavior.zoom()
    .translate ([0, 0])
    .scale (1.0)
    .scaleExtent([0.5, 2.0])
    .on("zoom", function() {
        svg.attr("transform","translate(" + d3.event.translate[0] + "," +  d3.event.translate[1] + ") scale(" +  d3.event.scale + ")");
    })
);

Am I doing something wrong?

© Stack Overflow or respective owner

Related posts about extjs

Related posts about d3.js