MapboxGL & D3.js - polygon

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<title>MapboxGL & D3.js - dpolygon</title>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css' rel='stylesheet' />
<style>
    
html, body, #wrapper {
    width: 100%;
    height: 100%;
	padding: 0px;
	margin: 0px;
}
#map { 
  position:relative; 
  width: 100%;
  height: 100%;
  margin: auto auto;
}
svg {
  position: absolute;
  width: 100%;
  height: 100%;
}
.hidden {
	display: none;
}
</style>
</head>

//緯度経度->パスジェネレーター関数作成
	var transform = d3.geoTransform({point: projectPoint});
	var path = d3.geoPath().projection(transform);
    
 	var featureElement = svg.selectAll("path")
		.data(geojson.features)
		.enter()
        .append("path")
        .attr("stroke", "red")
        .attr("fill", "green")
        .attr("fill-opacity", 0.4)
    
    //path要素のアップデート
    function update() {
        featureElement.attr("d", path);
    }
    
    //
    map.on("viewreset", update)
    map.on("movestart", function(){
		svg.classed("hidden", true);
	});	
    map.on("rotate", function(){
		svg.classed("hidden", true);
	});	
    map.on("moveend", function(){
		update()
		svg.classed("hidden", false);
	})
    
    //初期レンダリング
    update()
        
    
	function projectPoint(lon, lat) {
        var point = map.project(new mapboxgl.LngLat(lon, lat));
		this.stream.point(point.x, point.y);
	}
     
    
}

</script>
</body>

https://unpkg.com/d3@5.0.0/dist/d3.min.js

https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js