使用mapbox-gl和d3v4

Question

是否可以将d3v4与Mapbox-GL一起使用？ This example适用于v3，但我无法在第4版中使用它。

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