D3 v4 - Leaflet

D3.js ver.4 を使ってleaflet上に地形をオーバーレイしたサンプル

<!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/0.7.7/leaflet.css"/>    
<style>
html, body {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
}
    
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/0.7.7/leaflet-src.js"></script>
<script>
!(function(){
    "use strict"
    
    var map //leaflet obj
    
    d3.json("japan.geojson",main)
    
    
    function main(json) {
        addLmaps()
        drawFeatures(json)    
    }
    
    function addLmaps() {
        //Leaflet初期設定
        map = L.map('map').setView([39.702053　, 141.15448379999998], 5);
        
        L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);
    
        //Leafletに用意されたsvgを使う 
        map._initPathRoot();	
        
    }
    
    //位置→座標変換
    function projectPoint(x, y) {
        var point = map.latLngToLayerPoint(new L.LatLng(y, x));
        this.stream.point(point.x, point.y);
    }
    
    function drawFeatures(json) {
        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(json.features)
            .enter()
            .append("path")
            .attr("stroke", "gray")
            .attr("fill", "green")
            .attr("fill-opacity", 0.6)
    
        map.on("viewreset", update);
    
        update();
    
        //pathのd属性を更新
        function update() {		
            featureElement.attr("d", path);
        } 
    
    }
    
        
}());
</script>    
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet-src.js