D3 v4 + leaflet v1 by shimizu

leaflet ver 0.8以降で仕様が変わったため、viewresetではなくmoveendイベントでD3の再描画を行わないと正常に描画されなくなった。

Leaflet’s viewreset event can’t be detected normally with d3.js’s points’ drawing codes · Issue #5173

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title></title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css" />
<style>
html, body {
    padding: 0px;
    margin: 0px;
}
    
html, body, #map {
    width: 100%;
    height: 100%;
}
.tick line {
    stroke-dasharray: 2 2 ;
    stroke: #ccc;
}

</style>

</head>

<body>
<div id="map"></div>    
    
    
    
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.min.js"></script>    
<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js"></script>
<script>
!(function(){
    "use strict";
    
    var map;
    
    d3.json("japan.geojson",main);
    
    
    function main(data) {
        addLmaps();
        drawFeatures(data);   
    }
    
    function addLmaps() {
      
        map = L.map('map').setView([39.702053　, 141.15448379999998], 5);
        
        L.tileLayer('//{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="//osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);
    
       
        L.svg().addTo(map);	
        
    }
    
  
    function projectPoint(x, y) {
        var point = map.latLngToLayerPoint(new L.LatLng(y, x));
        this.stream.point(point.x, point.y);
    }
    
    function drawFeatures(data) {
        var svg = d3.select("#map").select("svg");
        
        var transform = d3.geoTransform({point: projectPoint});
        var path = d3.geoPath().projection(transform);
    
        var featureElement = svg.selectAll("path")
            .data(data.features)
            .enter()
            .append("path")
            .attr("stroke", "gray")
            .attr("fill", "green")
            .attr("fill-opacity", 0.6);
    
        map.on("moveend", update);
    
        update();
    

        function update() {		
            featureElement.attr("d", path);
        } 
    
    }
    
        
}());
</script>    
</body>
</html>