Question

对于工作项目，我需要约束容器中的可缩放svg元素。我在这里有一个简化的问题例子：

在上面的代码框中，我在方括号rect（g）画布中的container（svg）中包含红色node。

container已应用缩放“zoom”。在缩放事件中，d3.event.transform将应用于rect。

要求rect在所有缩放比例下都包含在svg node内。

要做到这一点，我正在应用zoom.translateExtent并在每次转换时更新它。

const updateTranslateExtent = () => {

  const scale = container.property("__zoom").k;
  const containerBBox = container.node().getBBox();
  const containerTransform = container.node().getCTM();
  const containerTranslateX = containerTransform.e;
  const containerTranslateY = containerTransform.f;
  const viewportWidth = parseInt(node.attr("width"));
  const viewportHeight = parseInt(node.attr("height"));

  const extent = [
    [
      (viewportWidth - containerBBox.width - containerTranslateX) / scale * -1,
      (viewportHeight - containerBBox.height - containerTranslateY) / scale * -1
    ],
    [
      viewportWidth / scale + containerTranslateX * scale,
      viewportHeight / scale + containerTranslateY * scale
    ]
  ];

  zoom.translateExtent(extent);
};

这在一定程度上起作用，但在应用比例时会失效。

任何有d3 zoom经验的人都可以帮助我吗？

我已经尝试了广泛的谷歌搜索和试验+错误与范围计算，但未能让它100％工作。

提前致谢！

Answer 1

经过多次反复试验证明这是正确的计算结果：

const extent = [
  [
    (viewportWidth - containerBBox.width - containerTranslateX) / scale * -1,
    (viewportHeight - containerBBox.height - containerTranslateY) / scale * -1
  ],
  [
    viewportWidth / scale + containerTranslateX / scale,
    viewportHeight / scale + containerTranslateY / scale
  ]
];

只是略有不同，但得出这个结论真是太痛苦了！

这是一个更新的代码集：https://codesandbox.io/s/7m5v9n0jmq

当目标小于容器时，D3 zoom translateExtent计算

1 个答案: