Question

我正在尝试使用d3.js实现平移和缩放功能，一切正常，但是当用户尝试平移初始状态时图像会严重闪烁。

重新讨论问题

SET @csum := 0;
SET @id := -1;

UPDATE client c
    SET cumulative = (CASE WHEN @id = id
                           THEN @csum := @csum + profit
                           WHEN @id := id
                           THEN @csum := profit
                           ELSE @csum := profit
                      END)
    ORDER BY id, year, month;

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

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

否则，图像将跳过＆＃34;当您开始平移时，25px。

以下是包含这些更改的代码：

＆＃13;

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

＆＃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 2

您应该在g：

之后添加另一个.call(zoom)元素

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

以这种方式更改点击事件处理程序：

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>

用户尝试平移时图像闪烁

2 个答案: