D3 V4 Einstellung der anfänglichen Zoomstufe

Question

Ich habe gerade angefangen, D3 V4 zu verwenden, und ich habe Probleme, eine Schwenk- und Zoomfunktion zu erhalten. Das Problem ist, dass ich die anfängliche Skalenwert etwas sein wollen, über als 1, so stelle ich dies mit

zoom.scaleTo(svg, 2); 

Doch sobald ich die Waagschale oder zoomen auf 1 setzt zurück

Hier ist ein Beispiel von diesem Verhalten auf JSFiddle, was mache ich falsch?

JSFiddle

Answer 1

Hier ist das Problem:

var svg = d3.select("body").append("svg") 
    .attr("width", 600) 
    .attr("height", 600) 
    .call(zoom) 
    .append("g"); 

Sie die Zuordnung der Gruppe Element anstelle des svg Element auf die Variable svg.

Die zoom wird korrekt auf das SVG-Element angewendet, aber wenn Sie dann zoom.scaleTo(svg, 2) aufrufen, zoomen Sie das Gruppenelement, nicht das SVG-Element.

Dies kann behoben werden, indem zuerst das SVG-Element erstellt und der Variablen svg zugewiesen wird und erst dann das Gruppenelement erstellt und zugewiesen wird.

var svg = d3.select("body").append("svg") 
    .attr("width", 600) 
    .attr("height", 600) 
    .call(zoom); 

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

Hier ist die feste JSFiddle: https://jsfiddle.net/skgktrcu/2/