d3.js V4 按钮缩放实现表现怪异

Question

我正在尝试实现 d3 平移和缩放功能。默认平移和缩放可以正常工作，但要求是我们还需要放大和缩小按钮。我还实现了缩放按钮，它也可以工作。奇怪的部分是当我第一次移动图像并单击缩放按钮时，图像被移回以前的位置，不仅当我第一次用鼠标缩放并再次使用按钮开始缩放时，图像缩小到默认值并开始缩放再次。我如何设法从从鼠标事件转移到按钮单击事件的位置开始缩放。

let imgHeight = 400,
  imgWidth = 900,
  width = 900,
  height = 450;

let zoom = d3.zoom().scaleExtent([1, 8]).on("zoom", zoomed);

let svg = d3.select("#canvas").append("svg")
  .attr("width", width + "px")
  .attr("height", height + "px");

svg = svg.append("g")
  .attr("transform", "translate(0,25)")
  .call(zoom)
  .append("g");

svg.append("image")
  .attr("width", imgWidth + "px")
  .attr("height", imgHeight + "px")
  .attr("href", "https://www.w3schools.com/howto/img_fjords.jpg");

function zoomed() {
  svg.attr("transform", d3.event.transform);
}

let zoomIn = d3.select("#zoom-in");

zoomIn.on("click", function() {
  zoom.scaleBy(svg.transition().duration(750), 1.2);
})

<div id='canvas'>
</div>
<div id="tools">
  <button id="zoom-in">
    +
  </button>
</div>
<script src="https://d3js.org/d3.v4.min.js"></script>

Answer 1

您在两个不同的“g”元素上调用缩放，您只需要追加一次，只需删除第二次追加即可。

svg = svg.append("g")
  .attr("transform", "translate(0,25)")
  .call(zoom)

这就是您遇到此问题的原因，缩放功能正在应用于嵌套元素