我正在尝试实现 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>
您在两个不同的“g”元素上调用缩放，您只需附加一次，只需删除第二个附加即可。
svg = svg.append("g")
.attr("transform", "translate(0,25)")
.call(zoom)
这就是您遇到此问题的原因，缩放功能正在应用于嵌套元素
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
