Zoom-Ereignis auf bestehendes SVG anwenden (d3.js v4)

Ich versuche, meine SVG in d3.js (Version 4) zoombar zu machen.Zoom-Ereignis auf bestehendes SVG anwenden (d3.js v4)

Sie meinen Versuch sehen hier: JSFiddle

HTML

<svg id="mySVG" width="800px" height="600px" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background: lightgrey;"> 
    <g> 
    <path d="M 0 0 L 100 0 L 100 20 L 0 20 Z" fill="red"></path> 
    <path d="M 500 500 L 600 500 L 600 520 L 500 520" fill="green"></path> 
    </g> 
</svg>

$(function() { 
    var svg = d3.select("#mySVG") 
    .call(d3.zoom().on("zoom", function() { 
    svg.attr("transform", "translate(" + d3.event.transform.x + " " + d3.event.transform.y + ") scale(" + d3.event.transform.k + ")"); 
    })); 

    // For test purposes 
    //$('#mySVG').css('transform', 'scale(2)'); 
});

In der Tat scheint alles da zu arbeiten, wenn ich in dem Google-Check Code-Inspektor, mit Schwerpunkt auf meinem SVG-Element, sehe ich den Wert von trans spät und Maßstab ändern, wie ich Mausrad vorwärts/rückwärts. Aber dem eigentlichen Element passiert nichts, was sehr merkwürdig ist, da ich auch versucht habe, diesen Skalierungs-/Translationswert durch einfache jQuery zu ändern, und das SVG antwortet mit einer korrekten Skalierung.

Kann mir jemand für diese Aufgabe in die richtige Richtung zeigen?

Zur Erinnerung, hier ist die offizielle Dokumentation für die d3.zoom() Funktion.

Quelle

2016-08-04 Anwar Nairi

Sie bewerben sich die Attribut auf Ihre svg verwandeln, ist dies nicht valid. In Ihrem jquery Beispiel wenden Sie die Art Umwandlung an Ihre svg an, das ist gültig. Die übliche Methode d3 besteht darin, den gezoomten Bereich in eine g umzubrechen und die Attributtransformation darauf anzuwenden. Darüber hinaus sind Sie nicht ein Komma in Ihrem übersetzen:

d3.event.transform.x + " " + d3.event.transform.y //<-- there should be a comma in there

Quelle

2016-08-04 17:04:33 Mark

Wrapping in g und die Transformation Anwendung funktioniert jetzt: [** JSFiddle aktualisiert **] (https://jsfiddle.net/ghpo6ayo/6/). Bleibt ein Fehler, wenn ich auf meinem Pfad zoome der Zoom verhält sich richtig, aber nicht, wenn ich Mausrad auf den Bereich des '' Tags, das den Pfad nicht enthält (aber es ist nicht der Zweck dieser Frage). –

Edit: Ich musste 'g.call (d3.drag(). On ('ziehen', function() {/ * ... * /})));' vor der Skala, um dies zu beheben. –

eine id Ihr g Element hinzufügen und anwenden Zoom es eher als die svg Wurzel

Quelle

2016-08-04 17:02:59

Zoom-Ereignis auf bestehendes SVG anwenden (d3.js v4)

Antwort

Verwandte Themen