Hi on click of a button i simply want graph to be at 0,0 position with zoomed out, basically its a reset button. Is it possible? on which element can i do that?
Will it be :-
d3.select('svg').select('g').transition()
.duration(1000).attr('transform', "translate(0,0)scale(1)")
But above moved whole graph including x and y axis and just zooms it out. I want only elements inside plotted area to change like lines, dots, values on x and y axis.
Please help. JSFiddle
Basically you just need to set all back to position (0,0) and scale 1.
You should implement a way to centralize all input controls.
http://jsbin.com/niqara/2/edit?js,output
function reset(source) {
d3.select('g').transition()
.duration(750)
.attr("transform", "translate(0,0)scale(1)");
zoomListener.scale(1);
zoomListener.translate([0, 0]);
}
I was able to achieve "reset" (moving graph elements to 0,0 and zoom out to initial) using just below lines:-
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
}
Basically all this can go in a function and can be called anywhere or on click of a button to reset graph.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.