d3树形图-限制缩放、平移

dffbzjpn  于 5个月前  发布在  其他
关注(0)|答案(1)|浏览(81)

我有d3 v4树图。我应该能够缩放和平移树,与平移/缩放限制。
缩放和平移效果运行良好。由于限制,zooming受到使用scaleExtent的限制。

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

字符串
但是这段代码对限制平移没有影响,平移指的是拖动树图。
heightwidth是基于节点的数量动态计算的。

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]));


希望听到建议,使这项工作
提前感谢!

iyfjxgzm

iyfjxgzm1#

要限制平移,您可以使用用途:

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

字符串
在上面的示例代码中,必须将value设置为x0y0,这里显示为[0,0]
更多参考,查看答案here

相关问题