Maßstab SVG d3.js (kein Ereignis)

Dies ist mein erster Beitrag und ich hoffe, nichts falsch zu machen. Ich benutze die Bibliothek d3.js und ich habe ein ProblemMaßstab SVG d3.js (kein Ereignis)

Setzen Sie jetzt den Basiscode, den ich verwende, um ein SVG (d3) zu erstellen.

var svg = d3.select("svg"), 
width = +svg.attr("width"), 
height = +svg.attr("height"), 
transform = d3.zoomIdentity;; 

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

svg.call(d3.zoom() 
    .scaleExtent([1/2, 8]) 
    .on("zoom", zoomed)); 

function zoomed() { 
    g.attr("transform", d3.event.transform); 
}

Ich habe nur ein Beispiel für Code, der sich auf Ereignis Zoom bezieht.

Jetzt wollte ich fragen, wie kann ich die Skalierung in meinem Code mit einem anderen Ereignistyp ändern (zum Beispiel, wenn ich einen Knopf drücke, würde ich gerne zu Position x: 0, y: 0 und Skala k zurückkehren : 1)?

bis jetzt habe ich viel den D3V4-Quellcode studiert, und ich habe mit debuger einige von ZoomEvent verwendete Funktionen gefunden, aber ich kann sie nicht von meinem Code aus aufrufen.

dann habe ich versucht, auch die Parameter mit direkt zu ändern:

g.attr("transform", "translate(0,0) scale(1)");

dies funktioniert, aber sobald ich mit der Maus ein Zoom-Ereignis erstellen, gibt die Bibliothek D3 zur alten Waage.

danke und guten Tag

Quelle

2016-08-06 Il Mandorlone

Sie zoom.transform dafür verwenden können (mit d3.zoomIdentity), die wiederum die entsprechenden Ereignisse ausgelöst, die den Zustand der Transformation Aktualisierung:

Komplettes Beispiel:

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="[email protected]" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <svg width="300" height="300"></svg> 
 
    <br/> 
 
    <button>reset zoom</button> 
 
    <script> 
 
    var svg = d3.select("svg"), 
 
     width = +svg.attr("width"), 
 
     height = +svg.attr("height"); 
 
     
 
    var g = svg.append("g"); 
 
    
 
    g.append("text") 
 
     .attr("x", width/2) 
 
     .attr("y", height/2) 
 
     .text("Something to zoom..."); 
 
     
 
    var zoom = d3.zoom() 
 
     .scaleExtent([1/2, 8]) 
 
     .on("zoom", zoomed); 
 

 
    svg.call(zoom); 
 

 
    function zoomed() { 
 
     g.attr("transform", d3.event.transform); 
 
    } 
 
    
 
    d3.select("button") 
 
     .on("click", function(d){ 
 
     svg.call(zoom.transform, d3.zoomIdentity); 
 
     }) 
 
    </script> 
 
</body> 
 

 
</html>

Quelle

2016-08-07 14:26:06 Mark

Antwort

Verwandte Themen