平移和缩放到 SVG 元素

Question

当用户单击JSFiddle example 中的链接时，我正在尝试将 svg 平移和缩放到 svg 的元素（在我的示例中为圆形和矩形），但 svg 没有移动，这是我的代码（I' m 使用 viewBox="0 0 1200 1200")

    var svg = d3.select("#svg");
    var placePositionX = svg.select("#" + id).attr("cx");
    var placePositionY = svg.select("#" + id).attr("cy");
    translate = [ placePositionX, placePositionY ];
    var g = svg.select("g").attr("transform", "translate(" + translate + ")" + " scale(" + scale + ")")

我使用的是 D3 版本 3。

预期的行为是当用户单击圆形链接时，地图应该缩放并平移到 svg 中的圆形元素（矩形链接的行为相同，svg 应该平移和缩放到 svg 中的矩形元素）...行为就像谷歌地图一样，当您搜索一个城市时，地图会平移并缩放到该城市。

Answer 1

我找到了 solution我自己，我应该先把它翻译成窗口大小：

    var g = svg.select("g").attr("transform", "translate(" + window.innerWidth/2 + "," + (window.innerHeight)/2 + ")scale(" + scale + ")translate(" + -placePositionX + "," + -placePositionY + ")");