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

Question

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

在上面的codesandbox中，我有一个红色的rect包含在一个g（container）内的一个正方形svg（node）canvas.

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计算

D3 zoom translateExtent calculation when target smaller than container

javascript

svg

zooming

translate-animation

d3.js