我有d3 v4树图。我应该能够缩放和平移树,与平移/缩放限制。
缩放和平移效果运行良好。由于限制,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]));
型
希望听到建议,使这项工作
提前感谢!
1条答案
按热度按时间iyfjxgzm1#
要限制平移,您可以使用用途:
字符串
在上面的示例代码中,必须将value设置为
x0
和y0
,这里显示为[0,0]
更多参考,查看答案here