Стандартные координаты в d3.js

Question

Я увлекался разработкой картограммы для Намибии. Но нашел два интересных инструмента. листовка и 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);

А если нет, может кто-нибудь подсказать мне, как преобразовать координаты (-22.26,16.52), чтобы показать Намибию, используя d3.geo.conicConformal().

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)