D3 树图 - 限制缩放、平移

Question

我有d3v4树状图。我应该能够在平移/缩放限制下缩放和平移树。

缩放和平移效果运行良好。出于限制，zooming受到使用scaleExtent的限制。

svg.call(d3.zoom().on('zoom', () => {
g.attr('transform', d3.event.transform)
})
.scaleExtent([0.5, 3]));

但是此代码对限制平移没有影响，平移是指树状图的拖动。

height和width是根据节点数动态计算的。

this.svg.call(d3.zoom().on('zoom', () => {
const scale = d3.event.scale;
d3.event.transform.y = (height / 2);
d3.event.transform.x = Math.min(d3.event.transform.x, 5);
d3.event.transform.x = Math.max(d3.event.transform.x, (1 - d3.event.transform.k) * width );

// I have tried this but couldn't able to drag backwards
this.wrapperG.attr("transform", d3.event.transform.toString().replace(/scale((.*?))/) + "scale(" + scale + ")");
})
.scaleExtent([0.5, 3]));

想听听做这项工作的建议

提前感谢！

Answer 1

要限制平移，您可以使用：

svg.call(d3.zoom().on('zoom', () => {
g.attr('transform', d3.event.transform)
})
.scaleExtent([0.5, 3])
.translateExtent([[0,0],[width,height]])); // limit pan to original SVG dimensions 

在上面的示例代码中，您必须将值设置为x0和y0，它在此处[0,0]显示

更多参考，请在此处查看答案