Правильный способ добавить метки в d3-geomap - PullRequest
Новая
       35

Правильный способ добавить метки в d3-geomap

0 голосов
/ 23 октября 2019

Я пытаюсь добавить метки на карту, используя d3-geomap , но не могу заставить его работать.

Сама карта хороплета красится правильно, но добавление меток не даетне получается правильно. Метки отображаются в неправильном положении.

После раскраски карты я снова загрузил файл topojson, а затем добавил текстовые блоки следующим образом: 

d3.json("https://d3-geomap.github.io/d3-geomap/topojson/countries/ESP.json").then(function(es) {

      let path = d3.geoPath().projection(d3.geoMercator());
      svg.select("svg").append("g")
          .selectAll("labels")
          .data(topojson.feature(es, es.objects.units).features)
          .enter().append("text")
          .attr("class", "place-label")
          .attr("x", function(d) { return path.centroid(d)[0]; })
          .attr("y", function(d) { return path.centroid(d)[1]; })
          .attr("text-anchor","middle")
          .text(function(d) { return d.properties.name; });
    });

Проблема в том, что я могуне понять правильное положение этикеток. Я также попытался применить то же преобразование, что и к многоугольникам, но затем у них все те же позиции y.

Вот пример для bl.ocks .

1 Ответ

2 голосов
/ 23 октября 2019

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

rendered map

Некоторыеинформация об изменениях. Всякий раз, когда вы хотите нарисовать что-то поверх карты с помощью d3-geomap, оно должно быть включено в функцию postUpdate. Таким образом, карта уже отрисована, а ее элементы SVG, геоданные и объект пути доступны через созданный вами объект карты. Нет необходимости загружать файл Topojson во второй раз. Функция, переданная в postUpdate, выглядит следующим образом: 

function drawLabels() {
    map.svg.append("g").attr('class', 'zoom')
        .selectAll("text")
        .data(topojson.feature(map.geo, map.geo.objects.units).features)
        .enter().append("text")
        .attr("class", "place-label")
        .attr("x", function(d) { return map.path.centroid(d)[0]; })
        .attr("y", function(d) { return map.path.centroid(d)[1]; })
        .attr("text-anchor","middle")
        .text(function(d) { return d.properties.name; })
        .on('click', map.clicked.bind(map));
}

На этой странице документации показаны доступные атрибуты карты и функции доступа. Надеюсь, это поможет.

...