동기화 d3.js지도 및 리플릿지도

Question

한 응용 프로그램에서 d3지도와 전단지를 모두 보유하고 있으며 마이크 코드를 동기화하여 (http://bost.ocks.org/mike/leaflet/) 전단지에 svg 지점을 그립니다. 문제는 SVG 컨테이너의 가장자리에서 일부 지점이 끊어지고 나중에 추가되는 다른 SVG 요소 (이 경우 애니메이션 펄스)가 부분적으로 만 표시된다는 것입니다. 어쨌든 SVG 컨테이너를 확장하는 기능 (포인트)을 기반으로 확장 할 수 있을지 궁금합니다.

작동 데모는 입니다. 1. 'Number of Students'슬라이더 바를 5300-6545로 선택하십시오. leaftlet지도의 두 점은 절반 만 표시됩니다. 2. 첫 번째 테이블 행을 클릭하면지도가 점으로 확대되지만 애니메이션 펄스는 끊어집니다.

모든 의견을 보내 주시면 감사하겠습니다.

감사 샤오밍

Answer 1

나뿐만 아니라이 문제를 가지고 있었고, 해결책을 발견했다.

var bottomLeft = project(bounds[0]), 
     topRight = project(bounds[1]); 

삽입 (바로 위의 선언 이후)이 같은 :

var padding = 25; // In pixels, choose large enough to prevent edge clipping 
         // of your largest element 

    bottomLeft = [bottomLeft[0]-padding, bottomLeft[1]+padding] 
    topRight = [topRight[0]+padding, topRight[1]-padding] 

그냥 호출 될 때마다 리셋을 계산 투영 된 경계 상자에 패딩의 조금을 추가해야 mbostock의 sample code 참조