D3.js语义缩放行为不当(D3.js semantic zoom misbehaving)

 我一直试图教自己D3.js，但我似乎无法获得语义缩放（缩放位置，但不是形状）为我工作。 
 
 我在这里阅读了d3缩放文档，并试图在功能上复制svg语义缩放示例代码 
 
 这是我的代码： 
 
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);
 
 在jsfiddle的现场版本。 
 
 这应该很简单。 我创建的网格应该在未应用缩放时准确触摸（距离为50像素，直径为50像素）。 当我放大时，我预计圆圈会分开，鼠标下方的点保持静止。 我期望在应用鼠标滚轮时变焦平滑和线性。 尽管如此，这些圆圈应保持相同的大小，以便在放大时它们会停止触摸; 当我缩小时它们应该重叠。 
 
 相反，最初，这些圈子应该分开两倍。 当我放大和缩小时，中心点不在鼠标下面（并根据我如何移动而移动）。 缩放是非常非线性的，当我缩小时渐近接近1的比例（接触圆），并且在我放大时快速加速。 
 
 这看起来很奇怪，我不能发现我的代码和语义缩放示例之间的显着差异，它按预期工作。 我得出结论，我实际上并不了解D3变焦应该如何工作。 有人能把我排除在外吗？ 

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.
 
I've read the d3 zoom docs here, and attempted to functionally copy the svg semantic zoom example code
 
This is my 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);
 
Live version at jsfiddle.
 
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.
 
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.
 
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?

原文：https://stackoverflow.com/questions/20159644