내 D3지도를 위치로 확대하려면 어떻게합니까?

Question

나는 D3와 함께 일하고 있으며 지금까지 특정 상태를 그리기 위해 클로로 프렉스 예제를 조정할 수있었습니다. 이것은 필요한 모든 상태로 남아 있도록 모든 다른 다각형 데이터를 단순히 제거하는 것과 관련이 있습니다.

내가이 시작 :

다음이 물건 불통 그러나

를, 내가 뭘하려는 것은 자동 팬이다/창조에지도를 확대되도록 상태가 앞면과 가운데에있는 경우 다음과 같습니다.

D3 라이브러리를 통해이 작업을 수행합니까? 또는 일부 독립적 인 코드 (나는 현재 jQuery-svgpan을 d3으로 실행하여 수동 패닝/확대/축소를 허용 함)를 수행합니다.

Answer 1

줌인하려는 상태의 경계 상자를 기반으로 상태를 묶는 g 요소 (이 예의 경우 #states)에 대한 변형을 설정하는 것이 가장 쉬운 방법입니다.

// your starting size 
var baseWidth = 600; 

d3.selectAll('#states path') 
    .on('click', function(d) { 
     // getBBox() is a native SVG element method 
     var bbox = this.getBBox(), 
      centroid = [bbox.x + bbox.width/2, bbox.y + bbox.height/2], 
      zoomScaleFactor = baseWidth/bbox.width, 
      zoomX = -centroid[0], 
      zoomY = -centroid[1]; 

     // set a transform on the parent group element 
     d3.select('#states') 
      .attr("transform", "scale(" + scaleFactor + ")" + 
       "translate(" + zoomX + "," + zoomY + ")"); 
    }); 

훨씬 더 당신이 그것을 청소하려면 여기를 할 수있다 - 당신은, 폭 또는 높이에 줌을 기반 확대에 따라 스트로크 너비를 변경해야하는지 여부를 확인, 최종 줌에 약간의 여유를 줄의 애니메이션 전환 등 -하지만 그것은 기본 개념입니다.