d3 SVG 캔버스의 확대/축소 수준을 변경 하시겠습니까?

나는 내 자신의 데이터에서 d3-based force-directed network graph을 구축 할 곳이 a test site입니다.d3 SVG 캔버스의 확대/축소 수준을 변경 하시겠습니까?

5 개 또는 6 개의 유전자를 선택하면 그래프의 노드가 캔버스 밖으로 그려집니다.

줌 레벨을 제어하기 위해 d3 API의 어떤 부분을 호출해야 노드가 캔버스 가장자리에서 사라지지 않을까요?

가능한 경우 구현이 매우 간단하지 않다면 개념을 간략하게 설명하는 코드 스 니펫을 보내 주시면 감사하겠습니다. 조언 해 주셔서 감사합니다.

2012-04-04 Alex Reynolds

가능한 중복 패닝지도에 도움이 될 것입니다이 코드 은 [D3를 사용하여 수행하는 그래프 레이아웃을 확대 할 수있는 방법이 있나요? (HTTP는 : // 유래 .com/questions/7871425/a-way-to-a-graph-layout-done-using-d3) –

D3은 줌을 사용할 수 있으며 구현하기가 쉽습니다. 그래프를 "뷰포트"라고 부르는 "g"요소 안에 래핑하면됩니다.

이

svg.call(d3.behavior.zoom().on("zoom", redraw))

다음과 같은 기능 :

function redraw() { 
    d3.select("#viewport").attr("transform", 
     "translate(" + d3.event.translate + ")" 
     + " scale(" + d3.event.scale + ")"); 
}

출처

2012-04-04 21:36:12 txominpelu

var x, y, k; 
      if (d && centered !== d) { 
       var centroid = path.centroid(d); 
       x = centroid[0]; 
       y = centroid[1]; 
       k = 4; 
       centered = d; 
      } else { 
       x = w/2; 
       y = h/2; 
       k = 1; 
       centered = null; 
      }

이 (줌 기능에 다음 코드 svg.attr 쓰기 "변환"그럼 당신은 SVG 요소의 줌 이벤트에 할당 할 수 있습니다 ("+ -x +", "+ -y +") ")"번역 "("+ w/2 + ","+ h/2 + " 절대 규모에 대한

당신 CANN 사용이 확대 및

출처

2014-09-05 11:00:54 gopesh

d3 SVG 캔버스의 확대/축소 수준을 변경 하시겠습니까?

답변

관련 문제