Question

我的网页上有很少的SVG元素。最初我在这样的每个元素上应用D3.zoom（）：

d3.selectAll("svg")
       .call(d3.zoom()
           .scaleExtent([0.5, 10])
           .on("zoom", function () {
           d3.selectAll("g")
               .attr("transform", d3.event.transform)
       }));

这很好用，它可以将我的所有元素放大。

但在此之后我想要一个元素转换到另一个位置，所以我这样做：

d3.select("#myElement")
        .attr("transform", "translate(125,45)");

这样做可以将元素转换为所需的位置。但在此之后，当我缩放时，＃myElement会回到0,0，然后随着之前的缩放而缩放

我想让#myElement放大它改变的位置。

我读到我必须重置缩放点。如果这是正确的，我该怎么办？或者还有其他办法吗？

这是D3文档https://github.com/d3/d3-zoom/blob/master/README.md#zoomTransform

编辑1

正如马克评论的那样，我稍微改变了代码

var zoom = d3.zoom()
   .scaleExtent([0.5, 10])
   .on("zoom", zoomed);

var zoomAll = function () {
    d3.selectAll("svg")
        .call(zoom);
};

function zoomed() {
    d3.selectAll("g")
        .attr("transform", d3.event.transform)
}

var transform = d3.zoomIdentity
        .translate(125, 45);

d3.select("#myElement")
        .call(zoom.transform, transform);

这也导致同样的问题。

在应用D3.zoom（D3 v4）时，元素将位于0,0位置

0 个答案: