StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POD3.js semantic zoom misbehaving
text
Body
copied!<p>I've been trying to teach myself D3.js, but I can't seem to get semantic zoom (zooming positions but not shapes) to work for me.</p> <p>I've read the d3 zoom docs <a href="https://github.com/mbostock/d3/wiki/Zoom-Behavior#wiki-zoom" rel="nofollow">here</a>, and attempted to functionally copy the <a href="http://bl.ocks.org/mbostock/3680957" rel="nofollow">svg semantic zoom example code</a></p> <p>This is my code:</p> <pre><code>var X, Y, circle, circles, h, i, j, svg, transform, w, zoom, _i, _j; w = 1200; h = 600; circles = []; for (j = _i = 0; _i <= 6; j = ++_i) { for (i = _j = 0; _j <= 12; i = ++_j) { circles.push({r: 25, cx: i * 50, cy: j * 50}); } } X = d3.scale.linear() .domain([0, 1]) .range([0, 1]); Y = d3.scale.linear() .domain([0, 1]) .range([0, 1]); zoom = d3.behavior.zoom() .x(X) .y(Y) .on("zoom", function() { return circle.attr("transform", transform); }); transform = function(d) { return "translate(" + (X(d.cx)) + ", " + (Y(d.cy)) + ")"; }; svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h) .call(zoom) .append("g"); circle = svg.selectAll("circle") .data(circles) .enter().append("circle") .attr("r", function(d) { return d.r; }).attr("cx", function(d) { return d.cx; }).attr("cy", function(d) { return d.cy; }).attr("transform", transform); </code></pre> <p>Live version at <a href="http://jsfiddle.net/t6Fhq/" rel="nofollow">jsfiddle</a>.</p> <p>This should be pretty simple. I'm creating grid of circles that should exactly touch when no zoom is applied (distance is 50 px, diameter is 50 px). When I zoom in, I expect the circles to spread apart, with the point under the mouse remaining stationary. I expect the zoom to be smooth and linear with applied mouse wheeling. The circles should remain the same size, though, so that they stop touching when I zoom in; they should overlap when I zoom out.</p> <p>Instead, initially, the circles are spread out exactly twice as far as they should be. When I zoom in and out, the center point is not under the mouse (and moves around depending on how I pan). Zoom is highly nonlinear, asymptotically approaching a scale of 1 (circles touching) as I zoom out, and rapidly accelerating as I zoom in.</p> <p>This seems really odd, and I can't spot significant differences between my code and the semantic zoom example, which works as expected. I conclude that I don't actually understand how D3 zoom is supposed to work. Can someone sort me out?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload