could you please help me with zooming to SVG objects. no idea how to do this. i need to zoom and center by click on object, i've made a test plunkr, so please take a look: http://plnkr.co/edit/ZQxhQ8VVoIXjMvdFIvQF
here's full code:
$(function(){
svg = d3.select("#svg");
svg_group = d3.select('#outer_group');
zoom = d3.behavior.zoom()
.translate([0, 0])
.scale(1)
.scaleExtent([.5, 20])
.on("zoom", zoomed);
svg.call(zoom);
function zoomed() {
svg_group.style("stroke-width", 1.5 / d3.event.scale + "px");
svg_group.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
$zoomService.$broadcast('zoom', {
scale: d3.event.scale
});
}
$('.sector').click(function(){
//zoom to somehow??
});
});
You have to use call zoom.event explicitly on the correct element after setting the desired translation and scaling.
var zoomed = false;
$('.sector').click(function(){
var bbox = this.getBBox();
var scale = 4;
// Manually calculating the position to which to transition to
// Will differ on a case by case basis.
svg
.call(zoom
.translate([ (- bbox.x - bbox.width / 2) * scale
, (- bbox.y - bbox.height / 2) * scale
])
.scale(scale).event
);
});
Demo: http://plnkr.co/edit/h1UP87dfQneRCFye9Xtu?p=preview
In the demo, I changed the position of the polygons and the viewBox on the svg to make it easier to calculate the exact coordinates to transition to for the zoom to stay centered. I also added some transitions and zoom-to-zero behavior not shown in the code excerpt above.
Sidenote: You don't have to use jQuery here to bind to click events; D3's selection.on can provide that function.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments