使用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); 
}