Question

我正在尝试使用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)
        );

我一直在尝试这个例子： https://bl.ocks.org/smithant/664d6cf86e53442d09687b154a9a411d

它几乎可以概括我的意图，但是即使正确，我也无法完全理解它，因此它无法与我的其余代码一起正常工作。我想这个特定示例最令我困惑的是如何声明变量的名称。

如果有人能指出我正确的方向，我将不胜感激。我该如何实现？在SVG中正确缩放和平移的合适数学是什么？

谢谢：）

精确平移和缩放到svg节点

0 个答案: