d3.js 拖动和缩放时网格移动

Question

我试图复制显示的网格的行为 here。

我的密码是here

问题是，当我拖动或缩放时，网格会随着其他所有内容一起移动，而它不应该移动。

我怀疑问题出在这部分：

function zoomed() {
          svg.select(".x.axis").call(xAxis);
          svg.select(".y.axis").call(yAxis);
          svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
        }

事实上，当我删除最后一行时，网格工作正常 （或多或少） :

function zoomed() {
          svg.select(".x.axis").call(xAxis);
          svg.select(".y.axis").call(yAxis);
        }

但是，在this的情况下，我的可视化（线条）不再移动：

如何让我的线条和网格以正确的方式移动？

Answer 1

我已经更正了你的代码

这里的工作示例：http://jsfiddle.net/cyril123/p4cmx1kj/3/

您还需要更新沿轴缩放的线条。

function zoomed() {
              svg.select(".x.axis").call(xAxis);
              svg.select(".y.axis").call(yAxis);
              lines.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
            }

d3.js 拖动和缩放时网格移动

d3.js grid moving around when dragging and zooming

javascript

svg

gridlines

d3.js