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在与正在使用的图形组一起动态使用时效果最好。它带有两个参数：{ "query": { "bool": { "should": [ { "match_phrase": { "description": "lorem" } }, { "nested": { "path": "entries", "query": { "match_phrase": { "entries.description": "lorem" } }, "inner_hits": {} } } ] } } }和topLeft，它们分别是x和y坐标。

在我的示例中，我借助bottomRight并添加一些边距，根据图形的大小重新计算了范围。看一下，它可能会对您有所帮助：https://bl.ocks.org/agnjunio/fd86583e176ecd94d37f3d2de3a56814

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

getBBox()

D3 v5缩放限制平移

1 个答案: