d3 зум не работает, как в примере

Question

Я пытаюсь получить функцию масштабирования для работы с моей сетью d3 (согласно here), но я не воспроизвожу поведение. Я сначала создать переменную масштабирования:

var zoom = d3.behavior.zoom() 
.scaleExtent([1, 10]) 
.on("zoom", zoomed); 

Затем я создаю SVG:

var svg = d3.select("body").append("svg") 
.attr("width", width) 
.attr("height", height) 
.append("g") 
.attr("transform", "translate(" + margin.left + "," + margin.right + ")") 
.call(zoom); 

Тогда, наконец, сама функция:

function zoomed() { 
    container.attr("transform", "translate(" + d3.event.translate + ")scale("  + d3.event.scale + ")"); 
} 

Однако сеть не позволяет мне, чтобы увеличить , либо нажав на узел, либо изменив масштаб. Если это необходимо, я приложу полный код file.

Кто-нибудь знает, почему я не получаю такое поведение?

Бест,

Бен

Answer 1

Ошибка 1

Вы делаете:

function zoomed() { 
    contaner.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); 
} 

Вы должны делать

function zoomed() { 
    svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); 
} 

Причина перевода/масштаба должна произойти с g DOM (группой), которые содержат полный график в вашем случае, то есть variable svg.

Ошибка 2:

Append прямоугольник на всю длину и ширину SVG, чтобы захватить событие масштабирования.

var rect = svg.append("rect") 
    .attr("width", width) 
    .attr("height", height) 
    .style("fill", "none") 
    .style("pointer-events", "all"); 

Рабочий примеру here

Надеется, что это помогает!