D3 v4 + leaflet v1 - Clickable by shimizu

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

/* svg 以下のpath要素でイベントを取得できるようにする */
.leaflet-overlay-pane svg path{
    pointer-events: auto;
}

</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 //leaflet obj
    
    d3.json("japan.geojson",main)
    
    
    function main(data) {
        addLmaps()
        drawFeatures(data)    
    }
    
    function addLmaps() {
        //Leaflet初期設定
        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);
    
        //Leafletに用意されたsvgを使う 
        L.svg({clickable:true}).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")
        .attr("pointer-events", "auto")
        
        var g = svg.select("g")
        
        
        
        var transform = d3.geoTransform({point: projectPoint});
        var path = d3.geoPath().projection(transform)
    
        var featureElement = g.selectAll("path")
            .data(data.features)
            .enter()
            .append("path")
            .attr("stroke", "gray")
            .attr("fill", "green")
            .attr("fill-opacity", 0.6)
            .on("click", function(d){
                d3.select(this).attr("fill", "red")
            })        

    
        map.on("moveend", update);
    
        update();
    
        //pathのd属性を更新
        function update() {		
            featureElement.attr("d", path);
        } 
    
    }
    
        
}());
</script>    
</body>
</html>