Question

我已经阅读了一些关于如何缩放到一个更大的SVG中的元素的帖子，这个SVG本身也具有缩放和平移功能，但没有任何运气。我有一个大的地图，你可以手动缩放和平移元素，但我想让它在点击这样的元素时缩放和平移到任何元素。我似乎无法为转型获得正确的价值。

这是我迄今为止所得到的事情：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/

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

1 个答案: