JavaScript D3 - call zoom - get transform x und y

[GustlPC]

Hallo zusammen,

ich habe ein svg element mit d3.v4.js erzeugt.

draw = d3.select("#drawing").append("svg:svg")
                              .attr("width", "100%" )
                              .attr("height", "100%")
                              .attr("viewBox", view_data.x + " " + view_data.y + " " + view_data.w + " " + view_data.h)
                              .attr("transform", "scale(" + scaleX + ", -1)")
                              .call(d3.zoom().on("zoom", function zoomFn() {
                                  viewport.attr('transform', 'translate(' + d3.event.transform.x + ',' + d3.event.transform.y + ') scale(' + d3.event.transform.k + ')');
                              }));
  
  viewport = draw.append("g").attr("class", 'viewport');

Ich kann das Element wegen dem call(d3.zoom...) sehr schön verschieben und auch zoomen.

Jetzt möchte ich aber über einen Button zu einem bestimmten transform verschieben lassen:

viewport.transition().duration(300).attr("transform", "translate(-10, -10)");

Funktioniert auch. Jetzt wenn ich aber mit der Maus wieder verschieben dann geht der draw vom urspürglichen Ausgangspunkt aus. Also hat die x y Werte, die ich über den Button gesetzt habe nicht übernommen.

Jetzt müsste ich, vor der Verschiebung durch ein Event, die von der zoom Funktion die x y Koordinaten vom transform auslesen.

Könnte mir da wer helfen? Keine Ahnung wie ich die dann auslesen bzw. dann wieder setzen kann.
So dass beim nächsten Verschieben mit dem Mauszeiger er auch den Ausgangspunkt vom aktuellen SVG nimmt (nicht vor der Button Verschiebung )

Hoffe es ist einigermaßen Verständlich ausgedrückt?!

Hoffe auf Hilfe.

Danke im Voraus.

Gruß,
Gustl

Ergänzung (1. Dezember 2017)

Hallo,

ich habe es dann doch selbst finden können:

var retrievedTransform = d3.zoomTransform(draw.node());
retrievedTransform.y = -10;
retrievedTransform.x = -10;