javascript - d3.js 网格在拖动和缩放时四处移动

Question

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

我的代码在这里

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

我怀疑问题出在这部分：

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);
        }

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

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

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 + ")");
            }