d3.js의 표준 좌표

Question

나는 나미비아의 choropleth 맵을 개발하고 싶습니다. 그러나 두 가지 흥미로운 도구를 발견했습니다. 전단지 및 D3, 전단지는 내가 수행 한 명확한 지침이 있지만 기능적으로는 내가하고 싶은 일에 부합하지 않습니다. 그리고 그것이 D3Geo가 들어온 곳입니다. 모든 것을 설정했는데이 기능을 사용하여 프로젝션을 설정했습니다.

var projection = d3.geo.conicConformal() 
.rotate([, 0]) 
.center([0, 0]) 
.parallels([ , ]) 
.scale(1000) 

좌표를 아래의 전단지 기능에서 어떻게 수행했는지 단순히 추가하는 기능은 없습니다. 그렇게 지구 중심적이지 않은 우리를 위해.

var map = L.map('mapid').setView([-22.26,16.52], 5); 

그리고 존재하지 않는 경우, 누군가가 d3.geo.conicConformal를 사용 나미비아를 보여 좌표 (-22.26,16.52)을 변환하는 방법에 나를 인도하시기 바랍니다 수 있습니다().

Answer 1

내가 문제를 해결하지 못했다면 수정하십시오 (예 : JSFiddle을 사용하여 방해가되는 위치를 보여주는 최소한의 예를 제공 할 수 있음). 그러나 잘 이해하면 표시된 이미지를 이동/확대/가운데에 넣고 싶습니다. 너의 나라의 연장에.

// Define the projection you want to use, 
// setting scale and translate to some starting values : 
var projection = d3.geoConicConformal() 
         .translate([0, 0]) 
         .scale(1) 

var layer_name = "your_layer_name"; 
var geo_features = topojson.feature(topoObj, topoObj.objects[layer_name]).features; 

// Define the path generator : 
var path = d3.geoPath().projection(projection); 

var width = 800, 
    height = 600; 

// This is the main svg object on which you are drawing : 
var map = d3.select("body").append("div") 
       .style("width", width + "px") 
       .style("height", height + "px") 
      .append("svg") 
       .attr("id", "svg_map") 
       .attr("width", width) 
       .attr("height", height); 

// Add you layer to the map 
map.append("g").attr("id", layer_name) 
     .attr("class", "layers") 
     .selectAll("path") 
     .data(geo_features) 
     .enter().append("path") 
     .attr("d", path) 
     .attr("id", (d,i)=> "feature_" + i) 
     .styles({"stroke": "rgb(0, 0, 0)", "fill": "beige") 

// Where the job is done : 
scale_to_layer(layer_name) 

function scale_to_layer(name){ 
    var bbox_layer = undefined; 
    // use all the paths of the layer (if there is many features) 
    // to compute the layer bbox : 
    map.select("#"+name).selectAll('path').each(function(d, i){ 
     var bbox_path = path.bounds(d); 
     if(bbox_layer === undefined){ 
      bbox_layer = bbox_path; 
     } 
     else { 
      bbox_layer[0][0] = bbox_path[0][0] < bbox_layer[0][0] 
           ? bbox_path[0][0] : bbox_layer[0][0]; 
      bbox_layer[0][1] = bbox_path[0][1] < bbox_layer[0][1] 
           ? bbox_path[0][1] : bbox_layer[0][1]; 
      bbox_layer[1][0] = bbox_path[1][0] > bbox_layer[1][0] 
           ? bbox_path[1][0] : bbox_layer[1][0]; 
      bbox_layer[1][1] = bbox_path[1][1] > bbox_layer[1][1] 
           ? bbox_path[1][1] : bbox_layer[1][1]; 
     } 
    }); 
    // Compute the new scale param, with a little space (5%) around the outer border : 
    var s = 0.95/Math.max((bbox_layer[1][0] - bbox_layer[0][0])/width, 
          (bbox_layer[1][1] - bbox_layer[0][1])/height); 
    // Compute the according translation : 
    var t = [(width - s * (bbox_layer[1][0] + bbox_layer[0][0]))/2, 
      (height - s * (bbox_layer[1][1] + bbox_layer[0][1]))/2]; 
    // Apply the new projections parameters : 
    projection.scale(s) 
      .translate(t); 
    // And redraw your paths : 
    map.selectAll("g.layer").selectAll("path").attr("d", path); 
}; 

또한

는이 예를 사용 D3의 V4가 (그러나이 경우에 많이 변경하지 않습니다 예를 들면 다음과 같습니다이 일을한다 (나는 또한 층 일관성을 위해 추가 된 방법에 대한 몇 가지 코드를 추가) geoPath 및 geoConicConformal의 이름 지정 제외)