D3.js点击缩放和平移元素

Question

我已经阅读了一些关于如何在具有缩放和平移功能的较大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);

});

- Dries Crauwels

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/

- Dries Crauwels

---

缩放感觉有点奇怪，我想知道这是你的实际意图吗？ - kwoxer

我通过为缩放行为添加大小来使其更好地工作。在这里https://github.com/mbostock/d3/wiki/Zoom-Behavior中指出，需要一个大小来支持平滑的过渡缩放。 - Dries Crauwels