d3.js schwenken und zoomen springt bei Verwendung der Maus nach dem programmatischen Zoom

Ich versuche, meinen d3-Graphen zu zentrieren, wenn es lädt. So laufe ichd3.js schwenken und zoomen springt bei Verwendung der Maus nach dem programmatischen Zoom

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

//... then later 

g.call(zoom.transform, center);

Es ist nicht eigentlich Zentrierung, es ist nur Skalierung jetzt. Aber die Skala funktioniert. Das Problem ist, wenn ich dann scrolle, um zu vergrößern oder zu verkleinern, beginnt es von 1 anstelle von 0.5. Also springt es.

Hier ist meine jsbin.

Quelle

2016-07-26 Tyler Graf

Sie setzen Ihre Veranstaltung auf ein anderes Objekt (die g) dann, was der Zoom eingerichtet ist (die svg). Da das Zoom-Ereignis auf das Element verweist, auf das es angewendet wird, behandelt d3 jetzt nicht Ihre anfängliche Zentrierung. Von der docs:

Der Zoomverhalten speichert der Zoom-Zustand auf dem Element, an dem das Zoomverhalten angewandt wurde, nicht auf dem Zoom-Verhalten selbst. Dies ist , da das Zoomverhalten gleichzeitig auf viele Elemente angewendet werden kann und jedes Element unabhängig voneinander gezoomt werden kann. Der Zoom-Status kann entweder bei Benutzerinteraktion oder programmgesteuert über zoom.transform geändert werden.

Wenn Sie Ihren Anruf auf svg.call(zoom.transform, center); ändern, wird Ihr Problem behoben.

komplette Code:

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

 
var points = d3.range(2000).map(phyllotaxis(10)); 
 

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

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

 
g.selectAll("circle") 
 
    .data(points) 
 
    .enter().append("circle") 
 
    .attr("cx", function(d) { return d.x; }) 
 
    .attr("cy", function(d) { return d.y; }) 
 
    .attr("r", 2.5) 
 
    .call(d3.drag() 
 
     .on("drag", dragged)); 
 

 
svg.call(zoom); 
 

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

 
function center() { 
 
    return d3.zoomIdentity 
 
     .scale(0.5); 
 
} 
 

 
function dragged(d) { 
 
    d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y); 
 
} 
 

 
function phyllotaxis(radius) { 
 
    var theta = Math.PI * (3 - Math.sqrt(5)); 
 
    return function(i) { 
 
    var r = radius * Math.sqrt(i), a = theta * i; 
 
    return { 
 
     x: width/2 + r * Math.cos(a), 
 
     y: height/2 + r * Math.sin(a) 
 
    }; 
 
    }; 
 
} 
 

 
svg.call(zoom.transform, center);

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<svg width="960" height="500"></svg> 
 
<script src="https://d3js.org/d3.v4.min.js"></script> 
 
</body> 
 
</html>

Quelle

2016-07-27 00:21:18 Mark

Danke, danke! –

d3.js schwenken und zoomen springt bei Verwendung der Maus nach dem programmatischen Zoom

Antwort

Verwandte Themen