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: 213

Filed under:

extjs

|

d3.js

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

date renderer issue in extjs

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi, I have a date renderer issue for a column. when browser language is in english the date is displayed in this format 09/14/2009 09:23 AM But when i change the browser language to german(or any other language except english) the date is not rendered it displays NAN/NAN/NAN 12:NAN PM Here is… >>> More
how to set style to grid in extjs

as seen on Stack Overflow - Search for 'Stack Overflow'
how to set style to grid so that it display font-family i am tring like this style: {'font-family': 'Brush Script MT', 'font-weight': 'bold' } but result does not show according to it. and i m also trying style:'font-family:Brush Script MT; font-size:300px', but it… >>> More
ExtJS: remove a grid from a tabpanel when its underlying store is empty

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi, I have TabPanel which contains, among other things, a Grid connected to a Store. Several events may remove elements from the store. I would like the Grid to be removed from the TabPanel when the store is empty and, possibly, to have a single place in my code to check for this event. I thought… >>> More
how to set font to grid in extjs

as seen on Stack Overflow - Search for 'Stack Overflow'
i want to set a DVB-TTYogesh Normal (true type) font to grid. how to set font to grid in extjs? is there any font-family: attribute in extjs? if yes then pls tell me how to use it? >>> More
ExtJs - Set a fixed width in a center layout in a Panel

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi all, Using ExtJs. I'm trying to design a main which is divided into three sub panels (a tree list, a grid and a panel). The way it works is that you have a tree list (west) with elements, you click on an element which populates the grid (center), then you click on an element in the grid and that… >>> More

Related posts about d3.js

D3.js binding an object to data and appending for each key

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm a D3.js newbie and I'm learning how to play around with data. Let's say I have an object with names as keys, and each key has an array of numbers like this: var userdata = { 'John' : [0, 1, 3, 9, 8, 7], 'Harry': [0, 10, 7, 1, 1, 11], 'Steve': [3, 1, 4, 4, 4, 17], 'Adam' : [4… >>> More
D3.js transition callback on frame

as seen on Stack Overflow - Search for 'Stack Overflow'
Does anyone know how I could accomplish a per frame callback for a transition with D3. Here is and example of what I am doing currently. link.transition() .duration(duration) .attr("d", diagonal) .each("end",function(e) { if(e.target.id == current) show_tooltip(e.target) … >>> More
d3.js force layout increase linkDistance

as seen on Stack Overflow - Search for 'Stack Overflow'
How to increase linkDistance without affecting the node alignment, example: http://mbostock.github.com/d3/talk/20110921/force.html when I try to increase the circle radius and linkDistance the it collapse <script type="text/javascript"> var w = 1280, h = 800, z = d3.scale.category20c(); var… >>> More
Having trouble animating Line in D3.js using and array of objects as data

as seen on Stack Overflow - Search for 'Stack Overflow'
I can't seem to get an animated transition between line graphs when I pass in a new set of data. I am using an array of objects as data like this: [{ clicks: 40 installs: 10 time: "1349474400000" },{ clicks: 61 installs: 3 time: "1349478000000" }]; I am using this… >>> More
Filter on button click D3.js?

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm working on a version of this bubble chart http://vallandingham.me/vis/gates/. As I'm using a different set of data - instead of the "All Grants" and "Grants by Year" buttons - I have one for 5 consecutive years - 2010, 2009 etc. My opening graph depicts the data for 2010 which is achieved… >>> More