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

将 mapbox-gl 与 d3v4 一起使用

Using mapbox-gl with d3v4

mapbox-gl

d3.js