Javascript 精确平移和缩放到svg节点

我正在尝试使用d3js平移和缩放到svg节点。但是我在这里无法理解数学

如果我强制所需的缩放级别为1，那么我似乎得到了正确的结果。 下面是一个例子：

let svg = d3.select('svg'),
    svgW = svg.node().getBoundingClientRect().width,
    svgH = svg.node().getBoundingClientRect().height,
    svgCentroid = {
        x : svgW / 2, 
        y : svgH / 2
    };

// zoom functionality has been applied to this one
let selector = d3.select('#container');

let elem = d3.select('[id="6"]'),
    elemBounds = elem.node().getBBox(),
    elemCentroid = {
        x : elemBounds.x + (elemBounds.width / 2), 
        y : elemBounds.y + (elemBounds.height / 2)
    };

let position = {
        x : svgCentroid.x - elemCentroid.x, 
        y : svgCentroid.y - elemCentroid.y
    };

selector.transition()
        .duration(750)
        .call(this.zoom.transform, d3.zoomIdentity
        .translate(position.x, position.y)
            // set scale to 1
            .scale(1)
        );

我第一个天真的想法是“小菜一碟”。我将把计算出的位置乘以所需的缩放级别。但是，令人惊讶的是，这让我大错特错了

// failed miserably
selector.transition()
        .duration(750)
        .call(this.zoom.transform, d3.zoomIdentity
            .translate(position.x * 5, position.y * 5)
            .scale(5)
        );

我一直在尝试这个例子：

它几乎概括了我的意图，但即使它就在那里，我也不完全理解它，因此它不能与我的其余代码一起正常工作。我想这个例子最让我困惑的是变量的名称是如何声明的

如果有人能给我指出正确的方向，我将不胜感激。我怎样才能做到这一点？在SVG中正确缩放和平移的适当数学是什么

---

谢谢：）

我想你要找的是：

function () {
    var t = d3.transform(d3.select(this).attr("transform")),
        x = t.translate[0],
        y = t.translate[1];

    var scale = 10;

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

---

其中，它表示元素。请看一个工作示例。在本例中，您可以在按下元素后缩放到该元素。此外，如果平移和缩放svg是您所需要做的全部，请签出库。它只起作用，不需要数学：）。

你看过你给出的例子了吗。使用JS函数

创建边界框

，但阅读咖啡脚本中的注释。一切都很顺利。一个小错误是在函数中使用了

margin

参数。你能为你已经拥有的添加一个提琴吗？我不明白你的要求。您已经给出了一个运行良好的示例，并且说它与您的代码不兼容。但我看不出你使用了示例中给出的内容。我是不是遗漏了什么？