D3 V4 установка начального уровня масштабирования

Question

Я только начал использовать D3 V4, и у меня возникли проблемы с работой панорамирования и масштабирования. Проблема заключается в том, что я хочу, начальное значение масштаба, чтобы быть что-то более, чем 1, так что я установить это с помощью

zoom.scaleTo(svg, 2); 

Однако, как только я панорамирование или уменьшить масштаб сбрасывается обратно в 1.

Вот пример о таком поведении на JSFiddle, что я делаю неправильно?

JSFiddle

Answer 1

Вот проблема:

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

Вы назначаете групповой элемент вместо элемента SVG к переменной svg.

zoom правильно применяется к элементу svg, но затем, когда вы вызываете zoom.scaleTo(svg, 2), вы увеличиваете масштаб элемента группы, а не элемент svg.

Это можно устранить, сначала создав и назначив элемент svg переменной svg, а затем создав и присвоив элемент группы.

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

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

Вот неподвижная JSFiddle: https://jsfiddle.net/skgktrcu/2/