D3 -지도의 중심 및 크기 조정 부분

Question

내가 정리할 수없는 몇 가지 문제가 있습니다.이 간단한 유지를 위해 일부 주식 예를 사용하여 내가하고 싶은 것을 설명합니다.

http://bl.ocks.org/mbostock/5126418 -는 "요로는"지도를 클릭하면이 기본 기능은

내가 뭘 찾고 있어요 것은 숨겨진입니다 선택한 요로는 화면 중앙과

내 문제를 확장 이 작업을 시도 할 때마다 선택한 객체가 화면 밖으로 밀려나는 것입니다.

내가 D3에 새로운 오전 며칠

.on("click", function(d){ 
    svg 
    .append("g") 
    .attr("id", "tract") 
    .append("g") 
    .attr("id", "wrapper") 
    .selectAll("path") 
    .data([d]) 
    .enter() 
    .append("path") 
    .attr("d", path) 
    .attr("id", "tract"), 
d3.select("#wrapper") 
      .transition() 
      .duration(800) 
      .ease("cubic-bezier(0.785, 0.135, 0.150, 0.860)") 
      .attr("transform", "scale(" + 3 + "), translate(" + (width/2) + ", " + (height/2) + ")"); 
}) 

이 그래서 어떤 도움을 크게 감상 할 수 나를 견과류 운전되었습니다 위해 그것을 사용하고 내가 뭔가 잘못하고있는 중이 야 확신합니다.

Answer 1

나는 또한 d3에 매우 익숙하다. 나는 그것을 어떻게 이해하는지 설명하려고 노력할 것이지만 나는 모든 것이 옳은지 확신 할 수 없다.

투영지도 단위로 주어진 중심의 개념을 가지고,

projection.center ([위치]) 가운데 지정된 경우

를 지정된 위치로 상기 투영의 중심을 설정하고, 위도와 경도의 두 요소 배열을 각도로 표시하고 투영을 반환합니다. center가 지정되지 않은 경우 기본값 ⟨0 °, 0 ° current 인 현재 중심을 반환합니다.

화면에 투영 센터가있는 변환이 픽셀 단위로 있습니다.

projection.translate은 ([점])

점이 지정된 경우

는 지정된 두 소자 어레이 [X, y]는 오프셋 투영의 변환을 설정하고, 투영을 반환한다. point가 지정되지 않은 경우 현재 번역 오프셋을 반환하며 기본값은 [480, 250]입니다. 변환 오프셋은 투영 중심의 픽셀 좌표를 결정합니다. 기본 번역 옵셋은 960 × 500 영역의 중심에 ⟨0 °, 0 ° places를 배치합니다.

비밀은 일부 방법이 캔버스의지도 제작 공간과 다른 곳에서 작동한다는 것을 알고 있습니다.

투영 중심을 피쳐 바운딩 박스의 중심으로 설정하는 것과 같이 캔버스에 피쳐를 중앙에 배치하려면(Google지도에서 사용되는 WGS 84)에서 작동하며 다른 투영법에 대해서는 확실하지 않습니다. path에서

var projection = d3.geo.mercator() 
    .scale(1); 

var path = d3.geo.path() 
    .projection(projection); 

bounds 방법 화소의 바운딩 박스를 리턴 : 투영 경로 주어진 예

. 그것을 사용하여 정확한 크기를 찾고 크기를 픽셀 단위로 크기와지도 단위 (0.

var b = path.bounds(feature), 
    s = 0.95/Math.max(
        (b[1][0]-b[0][0])/width, 
        (b[1][1]-b[0][1])/height 
       ); 

지도 단위로 경계 상자를 찾기 위해 d3.geo.bounds 방법을 사용하십시오 :

b = d3.geo.bounds(feature); 

투사의 중심을 설정 95 너비 또는 높이) 당신에게 가장 적합한 이상 5 %의 마진을 제공합니다 경계 상자의 중심 :

projection.center([(b[1][0]+b[0][0])/2, (b[1][1]+b[0][1])/2]); 

캔버스의 중앙에지도의 중심을 이동 translate 방법을 사용

을

projection.translate([width/2, height/2]); 

이제지도의 중앙에있는 기능을 5 % 마진으로 확대해야합니다.