D3 v5 缩放限制平移

Question

我试图限制 d3 缩放中的平移，但我没有得到正确的结果。我正在使用以下代码来扩展scale 和translate。

var treeGroup = d3.select('.treeGroup');
var rootSVG = d3.select('.rootSVG')
var zoom = d3.zoom()
     .scaleExtent([1.6285, 3])
     .translateExtent([[0, 0],[800, 600]])
     .on('zoom', function(){
           treeGroup.attr('transform', d3.event.transform);
     })

rootSVG.call(zoom);

这里是 JSFiddle：https://jsfiddle.net/nohe76yd/45/

scaleExtent 工作正常，但 translateExtent 出现问题。如何为 translateExtent 指定正确的值，以便在平移内容时始终保留在 svg 容器内？

Answer 1

translateExtent 在动态用于您正在使用的图形组时效果最佳。它有两个参数：topLeft 和 bottomRight，分别是 x 和 y 坐标。

在我的示例中，我在 getBBox() 的帮助下根据图形的大小重新计算范围并添加了一些边距。看看吧，或许对你有帮助：https://bl.ocks.org/agnjunio/fd86583e176ecd94d37f3d2de3a56814

编辑：在缩放功能中添加执行此操作的代码，以便于阅读。

// Define some world boundaries based on the graph total size
// so we don't scroll indefinitely
const graphBox = this.selections.graph.node().getBBox();
const margin = 200;
const worldTopLeft = [graphBox.x - margin, graphBox.y - margin];
const worldBottomRight = [
    graphBox.x + graphBox.width + margin,
    graphBox.y + graphBox.height + margin
];
this.zoom.translateExtent([worldTopLeft, worldBottomRight]);