Standardkoordinaten in d3.js

Question

Ich war sehr daran interessiert, eine Choroplethe Map für Namibia zu entwickeln. Aber ich habe zwei interessante Tools gefunden. Broschüre und D3, obwohl Flugblatt hat klare Anweisungen zu implementieren, was ich tat es nicht so funktionell im Einklang mit dem, was ich tun möchte. Und da kam D3Geo ins Spiel. Ich habe alles, aber diese Funktion unten, um meine Projektion einzustellen.

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

Gibt es einfach keine Funktion, einfach die Koordinaten hinzuzufügen, wie es in der unten stehenden Broschüre funktioniert. für uns, die nicht so geozentrisch sind.

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

Und wenn es nicht ist, kann mir jemand bitte Anleitung, wie man die Koordinaten konvertieren (-22.26,16.52) Namibia zeigen die d3.geo.conicConformal() verwenden.

Answer 1

Korrigieren Sie mich, wenn es Ihr Problem nicht behebt (vielleicht können Sie ein minimales Beispiel angeben, wo Sie stecken bleiben, z. B. JSFiddle), aber wenn ich es gut verstehe, möchten Sie das angezeigte Bild verschieben/zoomen/zentrieren auf die Ausdehnung deines Landes. Hier ist ein Beispiel dies zu tun (Ich habe auch einen Code auf, wie die Schicht wurde auf Konsistenz hinzugefügt):

// 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); 
}; 

Beachten Sie auch, dass dieses Beispiel Verwendung d3 v4 (aber in diesem Fall ist es nicht viel ändert abgesehen von der Benennung von geoPath und geoConicConformal)