d3.js 네트워크 다이어그램 확대

Question

나는 아마도 상대적으로 간단한 질문을 가지고 있습니다.

여기 내 간단한 다이어그램 enter link description here

내가 여기 enter link description here을 통해 VII 동작을 사용하여,과 기능 확대 및 축소 구현 싶어요. 그러나 나는 그것을 작동시키지 못한다. 아마도 당신은 그 문제를 발견 할 것이다.

시간 내 주셔서 감사합니다.

기능의 전체 줌이 할당 및 기능을 처리 할 것으로 보인다 : 당신이 줌 시도 코드는 캔버스에 사용되는

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

. svg 확대/축소를 위해 transform 속성을 사용할 수 있습니다. 전체 그래프를 (그룹) 요소에 넣고 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