D3.js拖动和缩放时四处移动的网格

d3.js grid moving around when dragging and zooming

本文关键字：四处 移动 网格 拖动 js 缩放 D3      更新时间：2023-09-26

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

我拥有的代码在这里

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

我怀疑问题出在这一部分：

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

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

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

我已经更正了你的代码

这里的工作示例：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 + ")");
            }
相关文章：