D3 v4: Element ‚schnappt‘ zu vorherigen übersetzen nach programmatische

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 

Wenn ich mit svg.call(zoom.translateBy, 100, 100) ziehen dann das Element mit der Maus svg programmatisch übersetzen Transformation, Transformation svg -Attribut auf den Wert zurückschnappt aus vor dem Ziehen.

Es ist fast so, als ob die Transformation, die durch svg.call bewirkt wird, nicht gespeichert oder gespeichert wird und zu der in d3.event.transform gespeicherten Transformation zurückkehrt.

This question scheint auf dem gleichen Problem zu schlagen, obwohl für v3.

Answer 1

Scheint so, als ob Sie das Zoom-Verhalten auf zwei verschiedene Knoten anwenden - svgMain und svg.

Versuchen Sie svgMain.call(zoom.translateBy, 100, 100) statt svg.call(...) laufen und sehen, ob es das Problem löst.