d3.js umschreiben zoom Beispiel in der version4

Drag-and-Drop Beispiel

Ich versuche zu umschreiben, dass ein Teil der in diesem Beispiel oben zu verwenden, in meinem code, speziell dieses Stück:

function centerNode(source) {
        scale = zoomListener.scale();
        x = -source.y0;
        y = -source.x0;
        x = x * scale + viewerWidth / 2;
        y = y * scale + viewerHeight / 2;
        d3.select('g').transition()
            .duration(duration)
            .attr("transform", "translate(" + x + "," + y + ")scale(" + scale + ")");
        zoomListener.scale(scale);
        zoomListener.translate([x, y]);
    }

Jedoch bin ich stecken, da das v4 Paket hat sich ziemlich geändert. Ich schrieb meine zoomListener Funktion

    var zoomListener = d3.zoom()
                 .scaleExtent([0.3,2])
                 .on("zoom", zoomed);

    function zoomed() {
       transform = d3.event.transform;
       console.log(d3.event);
         svg.attr("transform", transform);
    } 

function centerNode(source){
  t = transform;
  console.log(t);
  x = t.x*t.k; //I only want things to be centered vertically
  y = (t.y + -source.x0)*t.k + (viewerHeight)/2 ;
  svg.transition()
     .duration(duration)
     .attr("transform","translate(" + x + "," + y +")scale(" + t.k + ")");

  transform.scale(t.k); //DOES NOT WORK
  transform.translate([x, y]); //DOES NOT WORK

}

und ich weiß, dass nach der doc sich die Dinge verändert haben und die Informationen nicht länger gespeichert werden, was würden meine zoomListener
D3 V4 release-note auf zoom Ich glaube, ich bin nur verwirrt, wie ich bin, angenommen, es zu tun mit der neuen version. Die letzten paar Zeilen meines centerNode-Funktion nicht funktionieren, das hat als Effekt, dass, wenn ich Mitte der Knoten, die das Zoomen und schwenken zurücksetzen...

Jede Anregung?

coderwall.com/p/psogia/simplest-way-to-add-zoom-pan-on-d3-js

InformationsquelleAutor Tekill | 2016-07-22

17

So, nach viel Graben und Versuch und Irrtum habe ich die cam mit einer Antwort, die ziemlich gut funktioniert für meine Zwecke. Beachten Sie, dass dieser code ist nur der relevante Teil meines Codes nicht der ganze code, bestimmte variable wurden, erklärt sich von selbst, damit nicht auch Sie. AUCH DIES IST IN der VERSION 4 von d3.js.
```
var zoom = d3.zoom()
             .scaleExtent([0.3,2])
             .on("zoom", zoomed);


var svg = d3.select("body")
            .append("svg")
              .attr("width", viewerWidth)
              .attr("height", viewerHeight);

var zoomer = svg.append("rect")
                .attr("width", viewerWidth)
                .attr("height", viewerHeight)
                .style("fill", "none")
                .style("pointer-events", "all")
                .call(zoom);

var g = svg.append("g");

zoomer.call(zoom.transform, d3.zoomIdentity.translate(150,0)); //This is to pad my svg by a 150px on the left hand side

function zoomed() {
  g.attr("transform", d3.event.transform);//The zoom and panning is affecting my G element which is a child of SVG
}

function centerNode(source){

  t = d3.zoomTransform(zoomer.node());
  console.log(t);

  x =  t.x;
  y = source.x0;

  y = -y *t.k + viewerHeight / 2;

  g.transition()
   .duration(duration)
   .attr("transform", "translate(" + x + "," + y + ")scale(" + t.k + ")")
   .on("end", function(){ zoomer.call(zoom.transform, d3.zoomIdentity.translate(x,y).scale(t.k))});


}
```
Gemäß der Beispiele für die v4 auf die d3.js Seite habe ich ein Rechteck anwenden, das zoom zu

Den zoom-Verhalten angewendet wird, um eine unsichtbare rect überlagerung der SVG
element; dadurch wird sichergestellt, dass es einen Eingang empfängt, und daß der Zeiger
Koordinaten sind nicht betroffen durch den zoom-Verhalten zu verwandeln. Pan & Zoom-Beispiel

In der Mitte Knoten-Funktion, die ich verwende d3.zoomTransform(zoomer.node()); um die aktuelle Transformation angewendet auf die Seite.
Der Zweck dieser Funktion ist nur die Mitte der reduzierbaren Struktur vertikal nicht horizontal, so bin ich die Beibehaltung der aktuellen Transformation.x (hier t.x) die gleichen.
Die Koordinate in meinem svg-flip also warum y= source.x0 source ist ein Knoten, was wurde geklickt in meinem reduzierbaren Struktur. ("Schauen Sie auf das Beispiel verwiesen wird, an die Spitze dieses Threads zu verstehen, was ich bin versucht zu konvertieren auf version 4)

Ich bin anwenden der transformation auf meine G-element und soll ich dann zu verpflichten, diese änderungen an den zoom zu transformieren, zu tun, so dass ich die .on("end", function(){}) ansonsten war es dabei seltsam Verhalten bei dem übergang, damit alle es tut, ist die Einstellung der aktuelle Zustand der Transformation.
```
zoomer.call(zoom.transform, d3.zoomIdentity.translate(x,y).scale(t.k))
```
Diese Zeile vor der Anwendung ist eine übersetzung von x-und y-und a-Skala-gleich ist, ist was der aktuelle Zustand --, um die auf dem Gebiet der Computerkriminalität matrix hat man eine neue Transformation für G, i dann gilt es zu zoomer was ist das element, rief ich zoom auf früher.

Dieser arbeitete wie ein Charme für mich!
- Ich werde durch diese Konvertierung selbst, und fand dies sehr hilfreich. Aber ich verstehe immer noch nicht den Zweck der zusätzlichen "rect" - Objekt. Vielleicht, weil ich nicht verstehen, was sind "Zeiger-Koordinaten", noch wie Sie wäre betroffen durch die zoom-Transformation.
- Ich folgte dem Beispiel, dann umgestaltet werden, um die zu entfernen "rect". Kann nicht sehen, dass etwas nicht stimmt.
InformationsquelleAutor Tekill
0

Aufrufen transform.scale und transform.translate gibt eine neue Transformation, und ändert nichts. Daher:
```
transform = transform.translate([x, y]).scale(k)

svg.call(zoomListener.transform, newTransform)
```
(An dieser Stelle zoomListener ist eine ziemlich ungenaue Bezeichnung für dieses, aber egal...)

k, x, und y können abgeleitet werden aus source, vielleicht, als Sie zeigen, aber ich bin mir nicht sicher, weil ich nicht weiß, was source ist. Aber für mich t.x*t.k sieht verdächtig aus, denn es ist die Multiplikation der vorhandenen Transformationen x, die von Ihrer Größe. Wie es scheint, würde eine feedback-Schleife.

Mehr über die zoom-in-v4 -, check-out das StackOverflow-post, oder in diesem Beispiel wird mit mbostock demonstriert programmgesteuerte Kontrolle über die zoom-Transformation ein element (canvas) und mit übergängen.
- Quelle ist, wo das Ereignis ist, kommt der Baum aus dem Beispiel, ich wies oben..
- richtig, aber ich weiß nicht, die Bedingungen, zu denen source.x0 und source.y0 definiert sind. Wie sind Sie lat/lng, Paare oder Pixel? Ich vermute Pixel. Wie auch immer, ich arbeite auf einer ähnlichen Umwandlung selbst, so haben vielleicht mehr Einblick später...
- Ich entdeckte, dass die Reihenfolge der transformation, eine Menge Fragen bei der Arbeit mit den neuen zoomTransform Objekt. Insbesondere translate() kommen sollte, bevor scale(), andernfalls wird die übersetzung intern multipliziert wird, die von der Skala. Ich veränderte meine Antwort, um dies zu reflektieren.
- Gut zu wissen. Ja, die Quelle.x0 und Quelle.y0 sind aus einer svg-Koordinatensystem, also in Pixel. Die x0 entspricht der y-Koordinate und y0 zu der x-Koordinate für die d3 übersetzen
- Auch wenn ich mit d3.zoomTransform(Knoten) - Funktion alles, was ich bekommen ist die Identitätsmatrix, ich habe zoom und geschwenkt und dann habe ich versucht d3.zoomTransform(zoom) d3.zoomTransform(zoom, svg) und d3.zoomTransform(svg) in der Konsole und es ist immer` k': 1 x: 0 y:0`, ich bin mir nicht sicher, wie die Funktion zu nutzen, um die aktuelle Transformation. Sie haben keine Einsicht auf, dass? @meetamit
- d3.zoomTransform(d3.select("svg").node()) ist, wie die zoomTransform Funktion kann verwendet werden, außerhalb der Ereignis-listener oder d3.event.transformieren (oder gleichwertig d3.zoomTransform(this)) im inneren der Zuhörer. @meetamit
InformationsquelleAutor meetamit

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.