2014-02-09 2 views
0

Bostock의 map tutorial에이어서 data을 따르고 있습니다. 투영은 3D 위도/경도 좌표를 사용하고 2D x/y 좌표를 반환하는 함수라는 것을 알고 있습니다. 또한 d3.geo.path가 GeoJSON을 SVG로 변환하는 지저분한 사업을 처리한다는 것을 이해합니다. GeoJSON이 2D SVG에 기술 한 3D lat/long을 투영하는 방법을 알려주기 위해 d3.geo.path에 매개 변수로 프로젝션 함수를 전달하는 방법을 설명합니다. 여태까지는 그런대로 잘됐다.내 d3지도를 조정하는 데 문제가 있습니다

그러나 내지도에서 "투영"하는 데 많은 어려움을 겪고 있습니다. 지도는 투영의 중심 속성을 사용하여 적절한 위도와 경도의 중앙에 배치됩니다. 나는 projection의 translate 속성을 사용하여 점을 SVG 요소의 가운데에 놓습니다. 그러나 규모에 관계없이 숫자가 아무리 많아도지도가 더 크거나 작아지지 않습니다. 나는 골치 거리의 실수를 점검했다. 나는 변화를 적절하게 저장하고 있으며, 올바르게 적응하고있다. 그 오류는 내가 어떻게 규모를 사용하는지에 달려있다.

어떻게 확대합니까?

window.onload = function() { 

    //Width and height 
    var width = 960, 
     height = 1160; 

    var svg = d3.select("body").append("svg") 
     .attr("width", width) 
     .attr("height", height); 

    //setting scale to numbers as high as 30000 and as low as 3 does not change my map 
    var projection = d3.geo.transverseMercator().translate([width/2, height/2]).scale(3).center(-90.088, 29.957); 

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

    d3.json("orleans.json", function(json) { 
     svg.selectAll("path") 
      .data(json.features) 
      .enter() 
      .append("path") 
      .attr("d", path); 
    }); 

}; 

답변

1

d3.geo.path()은 아무런 인수를 취하지 않습니다.

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

(지도 하나를 사용하는 경우)은 "preserveAspectRatio"및 SVG 태그에서 "뷰 박스"속성을 사용하고 고려해야 할 또 다른 옵션 :

경로에 대한 투사를 설정하려면 다음 코드를 사용

svg preserveAspectRatio = "xMidYMid meet"viewBox = "0 0 500 200"id = "mapsvg"

지도 상자 번호를 올리거나 내림으로써지도를 축소하거나 확대 할 수 있습니다.

관련 문제