Использование mapbox-gl с d3v4

Question

Возможно ли использовать d3v4 с Mapbox-GL? This example работает с v3, но я не могу заставить его работать в v4.

В функции mapDraw(), я изменил следующие строки:

//var transform = d3.geo.transform({point: projectPoint}); 
var transform = d3.geoTransform({point: projectPoint}); 

//var path = d3.geo.path().projection(transform); 
var path = d3.geoPath().projection(transform); 

//var featureElement = svg.selectAll("path") 
// .data(geojson.features) 
// .enter() 
// .append("path") 
// .attr("stroke": "red", 
//  "fill": "green", 
//  "fill-opacity": 0.4 
// }); 
var featureElement = svg.selectAll("path") 
    .data(geojson.features) 
    .enter() 
    .append("path") 
    .attr("d", d3.geoPath()) 
    .attr("stroke", "red") 
    .attr("fill", "green") 
    .attr("fill-opacity", 0.4); 

//function update() { 
// featureElement.attr("d", path); 
//} 
function update() { 
    featureElement.attr("d", d3.geoPath()); 
} 

Это не вызывает ошибок в консоли, но ничего не отображается на карте. Что мне не хватает в преобразовании в v4?

Answer 1

Вот рабочий пример использования d3 v4 и MapBox-Gl-JS: https://bl.ocks.org/kmandov/70be1f3b2648ad2be1cdf1feb5afbb4d

Миграция довольно проста. Я считаю, проблема связана с функцией update. Обратите внимание, что вы звоните:

featureElement.attr("d", d3.geoPath()); 

где d3.geoPath() генерирует путь, который не имеет правильный набор проекции. Вы можете исправить, установив правильную проекцию:

featureElement.attr("d", d3.geoPath().projection(transform)); 

Однако лучший подходом является повторным использованием оригинального генератора пути, чтобы предотвратить создание ненужного объекта на каждый update() вызова. Поэтому просто оставьте исходный код нетронутым:

function update() { 
    featureElement.attr("d", path); 
}