我已经阅读了一些关于如何在具有缩放和平移功能的较大SVG内缩放到一个元素的帖子,但没有成功。我有一个大地图,您可以手动缩放和平移到元素,但是当单击这样的元素时,我希望它自己缩放和平移到该元素。我似乎无法得到正确的转换值。
以下是我目前拥有的jsfiddle:http://jsfiddle.net/1gyjd2xt/1/
以下是我目前拥有的jsfiddle:http://jsfiddle.net/1gyjd2xt/1/
var svg = d3.select("#svg-container svg");
var container = svg.select("#container");
zoom = d3.behavior.zoom()
.translate([0, 0])
.scale(1)
.scaleExtent([1, 10])
.on("zoom", zoomed);
svg.call(zoom);
function zoomed() {
container.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
d3.selectAll(".text").on("click", function () {
var t = d3.transform(d3.select(this).attr("transform")),
x = t.translate[0],
y = t.translate[1];
console.log(x);
console.log(y);
var scale = 10;
//Zoom to element
//svg.transition()
//.call(zoom
//.translate( calculate X, calculate Y)
//.scale(scale).event);
});