[英]How to move D3 graph to initial zoom and at 0,0 position - RESET Graph?
您好,只要按一下按钮,我只是希望图表位于0,0位置并缩小,基本上是一个重置按钮。 可能吗? 我可以在哪个元素上执行此操作?
那将会 :-
d3.select('svg').select('g').transition()
.duration(1000).attr('transform', "translate(0,0)scale(1)")
但是上面移动了包括x和y轴在内的整个图形,只是将其缩小了。 我只希望绘制区域内的元素像线,点,x和y轴上的值一样变化。
请帮忙。 JSFiddle
基本上,您只需要将所有位置重新设置为(0,0)并缩放1。
您应该实现一种集中所有输入控件的方法。
http://jsbin.com/niqara/2/edit?js,输出
function reset(source) {
d3.select('g').transition()
.duration(750)
.attr("transform", "translate(0,0)scale(1)");
zoomListener.scale(1);
zoomListener.translate([0, 0]);
}
我仅使用以下几行就可以实现“重置”(将图形元素移动到0,0并缩小到初始位置):
function resetGraph(){
zoom.scale(1); //Zoom out to this scale
zoom.translate([0, 0]); //move/drag chart to 0,0 xy position
zoomed(); //Handler that updates all elements after zoom performed
slided(); //Optional- to update slider which works to zoom in and zoom out
}
基本上所有这些都可以在函数中使用,并且可以在任何地方调用或单击按钮以重置图形。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.