Question

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

＆＃13;

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);
})

＆＃13;

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

＆＃13;

Answer 1

你在两个不同的＆＃34; g＆＃34;上调用缩放功能。元素，你只需要追加一次，只需删除第二个追加。

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

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

d3.js V4按钮放大实现行为怪异

1 个答案: