D3.js 单击时缩放和平移到元素

Question

我已经浏览了几篇关于如何缩放到更大的 SVG 中的元素的帖子，该 SVG 本身也具有缩放和平移功能，但没有任何运气。我有一张大地图，您可以在其中手动缩放和平移到元素，但我希望它在单击此类元素时缩放和平移到任何元素本身。我似乎无法为转换获得正确的值。

这是我到目前为止所得到的一个 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);

});

Answer 1

好的，我设法找到了正确的坐标。我只需要再次调用缩放并使用我从文本元素中获得的 X 和 Y，然后它会缩放对象位于左上角，因为这就是您视图的原点。因此，如果我将视图的高度和宽度除以 2，我将在中心进行缩放。使用缩放行为不会弄乱我的标准缩放和鼠标平移，并且始终使用当前的 X 和 Y 缩放到我点击的元素。

    svg.transition().duration(3000)
    .call(zoom.translate([((x * -scale) + (svgWidth / 2)), ((y * -scale) + svgHeight / 2)])
    .scale(scale).event);

这是一个更新的小提琴：http://jsfiddle.net/1gyjd2xt/4/