目标小于容器时的D3缩放translateExtent计算答案

【问题标题】：D3 zoom translateExtent calculation when target smaller than container目标小于容器时的D3缩放translateExtent计算
【发布时间】：2018-10-10 14:56:44
【问题描述】：

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

https://codesandbox.io/s/ryzp6x5lkn

在上面的代码框中，我有一个红色的rect 包含在一个方形的svg (node) 画布中的g (container) 中。

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% 工作。

提前致谢！

【问题讨论】：

标签： javascript d3.js svg zooming translate-animation

【解决方案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

【讨论】：

感谢您的记录，这非常有帮助！