用戶嘗試平移時圖像閃爍

Question

我正在嘗試使用d3.js實現平移和縮放功能，一切正常，但是當用戶嘗試平移初始狀態時，圖像會嚴重閃爍。

重新討論這個問題

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

 <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

您必須在SVG上調用縮放功能，而不是在<g>元素上調用：

var svg = d3.select("#canvas").append("svg")
  .attr("width", width + "px")
  .attr("height", height + "px")
  .call(zoom)

另外，你已經有了初步翻譯......

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

...你應該將它添加到svg選擇中：

.call(zoom.transform, d3.zoomIdentity.translate(0, 25).scale(1));

否則，當您開始平移時，圖像將“跳”25px。

以下是包含這些更改的代碼：

 var imgHeight = 400, imgWidth = 900, width = 900, height = 450; var zoom = d3.zoom().scaleExtent([1, 8]).on("zoom", zoomed); var svg = d3.select("#canvas").append("svg") .attr("width", width + "px") .attr("height", height + "px") .call(zoom) .call(zoom.transform, d3.zoomIdentity.translate(0, 25).scale(1)); var g = svg.append("g") .attr("transform", "translate(0,25)"); g.append("image") .attr("width", imgWidth + "px") .attr("height", imgHeight + "px") .attr("href", "https://www.w3schools.com/howto/img_fjords.jpg"); function zoomed() { if (g) { g.attr("transform", d3.event.transform); } } var zoomIn = d3.select("#zoom-in"); zoomIn.on("click", function() { zoom.scaleBy(svg.transition().duration(750), 1.3); }) 

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

Answer 2

您應該在.call(zoom)之后添加另一個g元素：

svg = svg.append("g")
    .attr("transform", "translate(0,25)")
    .append("g")
    .attr('class', 'zoom-target')
    .call(zoom)
    .append("g"); // <== !!!

並以這種方式更改click事件處理程序：

zoomIn.on("click", function() {
    zoom.scaleBy(d3.select('.zoom-target').transition().duration(750), 1.3);
})

查看演示：

 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)") .append("g") .attr('class', 'zoom-target') .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(d3.select('.zoom-target').transition().duration(750), 1.3); }) 

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