d3.js - D3 v4 : element 'snaps' to previous translate after programmatic transform

Question

function zoomed() { svg.attr("transform", d3.event.transform); }
var zoom = d3.zoom().on("zoom", zoomed);

var svgMain = d3.select('body').append('svg').call(zoom);
var svg = svgMain.append('g') // All the drawing done here

当我使用 svg.call(zoom.translateBy, 100, 100) 以编程方式翻译 svg 时，然后用鼠标拖动元素，svg > 变换属性会恢复到拖动之前的值。

这几乎就像 svg.call 所影响的变换没有被存储或保存，而是恢复为存储在 d3.event.transform 中的变换。

This question尽管对于 v3，似乎也遇到了同样的问题。

Answer 1

似乎您正在将缩放行为应用于两个不同的节点 - svgMain 和 svg。

尝试运行 svgMain.call(zoom.translateBy, 100, 100) 而不是 svg.call(...) 并查看是否可以解决问题。