拖动和缩放时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 + ")");
            }