D3 Карта проекции не показывает карту

Question

Привет! Я пытаюсь создать карту города Бирмингема, хотя я вижу, что пути были сгенерированы и данные загружаются. Я ничего не вижу на html-странице.

Я видел, как люди использовали функцию проецирования без установки центра или перевода, и это показывало бы их карты, но у меня это не сработало.

IИзучение возможных решений и обнаружение, что центрирование вашей проекции в интересующем вас городе должно помочь в правильном отображении карты, но это не помогло. Я также пытался поэкспериментировать с масштабом, но это также не помогло.

По сути, мои ожидаемые результаты - карта Бирмингема, которая будет отображаться в середине моего объекта SVG.

var w= 1400;
var h = 700;
var svg = d3.select("body").append("svg").attr("width",w).attr("height",h   );
var projection = d3.geoMercator().translate([w/2, h/2]).scale(100).center([1.8904,52.4862]);
var path = d3.geoPath().projection(projection);
var ukmap = d3.json("https://martinjc.github.io/UK-GeoJSON/json/eng/wpc_by_lad/topo_E08000025.json");

 // draw map
Promise.all([ukmap]).then(function(values){    
    var map = topojson.feature(values[0],values[0].objects.E08000025).features
    console.log(map);
    svg.selectAll("path")
        .data(map)
        .enter()
        .append("path")
        .attr("class","continent")
        .attr("d", path)
        .style("fill", "#f0e4dd") //steelblue
    });
    ```

Answer 1

Похоже, что путь находится в середине вашего SVG:

Это просто очень мало.

Сd3 Меркатор проекционный масштаб 100 вы отображаете 360 градусов долготы на 100 пикселей. Таким образом, с SVG в 1400 пикселей, вы могли бы показать 14 земель. Не идеально для города. Если вы увеличите значение масштаба до 10000, вы по крайней мере увидите свою функцию, но она не совсем центрирована и все еще довольно мала, попробуйте значения для центра и масштаба следующим образом:

.center([-1.9025,52.4862])
.scale(100000)

(переводим то же самое)

Теперь мы получаем что-то:

Но это все еще скука, мыможно просто использовать projection.fitExtent или projection.fitSize для автоматического масштабирования:

Promise.all([ukmap]).then(function(values){    
    var map = topojson.feature(values[0],values[0].objects.E08000025)
    projection.fitSize([w,h],map);
    var features = map.features;

    svg.selectAll("path")
      .data(features)
      .enter()
      ...

Это растягивает объект, чтобы заполнить указанные измерения (для этого требуется объект геоджон, а не массив, отсюда моя небольшая реструктуризация),Мы также можем указать поле следующим образом:

 projection.fitExtent([[100,100],[w-100,h-100]],map);

Это обеспечивает 100-пиксельное поле вокруг карты, поэтому оно не касается края SVG.

Оба эти метода,fitSize и fitExtent, автоматически устанавливают перевод и масштабирование проекта, так что мы можем фактически пропустить настройку масштаба, центра и перевода вручную (перевод и масштабирование, по сути, делают одно и то же: один после проецирования и один перед, соответственно. Обычно это проще использоватьхотя при настройке параметров проецирования вручную)