диаграмма сети d3.js zoom

Question

У меня, вероятно, довольно простой вопрос.

Вот моя простая схема enter link description here

И я хотел бы реализовать масштабирование и функциональности, используя поведение descibed здесь enter link description here. Но я не могу заставить его работать, может быть, вы заметите проблему.

Спасибо за ваше время.

Вся трансфокация в функциональности, кажется, обращаться с этим заданием и функцией:

svg = d3.select("body").append("svg").attr("width", width).attr("height", height) 
.call(d3.behavior.zoom().x(x).y(y).scaleExtent([1, 8]).on("zoom", zoom)); 

function zoom() { 
svg.clearRect(0, 0, width, height); 
} 

Answer 1

кода вы испробовали для масштабирования используется для холста. Вы можете использовать атрибут transform для масштабирования в svg. Вы можете поместить весь граф в элемент (group) и применить атрибут transform к элементу.

svg = d3.select("body") 
     .append("svg") 
     .attr("width", width) 
     .attr("height", height) 
     .call(d3.behavior.zoom().x(x).y(y).scaleExtent([1, 8]).on("zoom", zoom)) 
     .append("g"); 

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

Вот fiddle