D3 Examples - Smooth path

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<title>Smooth path</title>
<style type="text/css">
html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}
#map1{
    float: right;
    width: 50%;
    height: 100%;
}
#map2{
    float: left;
    width: 50%;
    height: 100%;
}
​
.SvgOverlay {
    position: relative;
    width: 500px;
    height: 500px;           
}
​
.SvgOverlay svg {
    position: absolute;
    top: -4000px;
    left: -4000px;
    width: 8000px;
    height: 8000px;        
}
</style>
</head>
<body>
<div id="map1"></div>   
<div id="map2"></div>   
​
​
​
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
​
<script>
//Gmap スタイル指定
var  style_array_from_above_here = [{"featureType":"water","elementType":"all","stylers":[{"hue":"#e9ebed"},{"saturation":-78},{"lightness":67},{"visibility":"simplified"}]},{"featureType":"landscape","elementType":"all","stylers":[{"hue":"#ffffff"},{"saturation":-100},{"lightness":100},{"visibility":"simplified"}]},{"featureType":"road","elementType":"geometry","stylers":[{"hue":"#bbc0c4"},{"saturation":-93},{"lightness":31},{"visibility":"simplified"}]},{"featureType":"poi","elementType":"all","stylers":[{"hue":"#ffffff"},{"saturation":-100},{"lightness":100},{"visibility":"off"}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"hue":"#e9ebed"},{"saturation":-90},{"lightness":-8},{"visibility":"simplified"}]},{"featureType":"transit","elementType":"all","stylers":[{"hue":"#e9ebed"},{"saturation":10},{"lightness":69},{"visibility":"on"}]},{"featureType":"administrative.locality","elementType":"all","stylers":[{"hue":"#2c2e33"},{"saturation":7},{"lightness":19},{"visibility":"on"}]},{"featureType":"road","elementType":"labels","stylers":[{"hue":"#bbc0c4"},{"saturation":-93},{"lightness":31},{"visibility":"on"}]},{"featureType":"road.arterial","elementType":"labels","stylers":[{"hue":"#bbc0c4"},{"saturation":-93},{"lightness":-2},{"visibility":"simplified"}]}];
    
    
    
//Google Map 初期化
var mapOpotion = {
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles: style_array_from_above_here,
    center: new google.maps.LatLng(24.3408621, 124.1614194),
}
​
var map1 = new google.maps.Map(document.getElementById('map1'), mapOpotion);
var map2 = new google.maps.Map(document.getElementById('map2'), mapOpotion);
​
​
//データセット読み込み
d3.json("line.geojson", function(json){
    mapdraw(json);
});
​
​
function mapdraw(line) {
    var drawAction = function () {
        
        //オーバーレイ設定
        var layer = d3.select(this.getPanes().overlayLayer).append("div").attr("class", "SvgOverlay");
        var svg = layer.append("svg");
        var layergroup = svg.append("g").attr("class", "d3maplayear");
        var markerOverlay = this;
        var overlayProjection = markerOverlay.getProjection();
​
        //Google Projection作成
        var googleMapProjection = function (coordinates) {
            var googleCoordinates = new google.maps.LatLng(coordinates[1], coordinates[0]);
            var pixelCoordinates = overlayProjection.fromLatLngToDivPixel(googleCoordinates);
            return [pixelCoordinates.x + 4000, pixelCoordinates.y + 4000];
        }
​
        //パスジェネレーター作成
        var path = d3.geo.path().projection(googleMapProjection);　
        
        var interpolate = d3.svg.line()
            .x(function(d){ return d[0] }).y(function(d){ return d[1] }).interpolate("basis")
        
        
        var smoothPath = function(pstr){
            var sp = path(pstr).replace(/M|Z/, "").split("L").map(function(d){ return d.split(",") });
            return interpolate(sp);
        }
​
        
        //オーバーレイ描画イベント    
        this.draw = draw 
​
        
        function draw() {
            currentMapv = this.getMap();
            
            layergroup.selectAll("path.line")
                .data(line.features)
                .attr("d", function(d){
                    if (currentMapv == map2) return smoothPath(d);
                    return path(d);
                }) 
                .enter()
                .append("path")
                .attr({
                    "d": function(d){
                        if (currentMapv == map2) return smoothPath(d);
                        return path(d);                 
                    },
                    "class": "line",
                    "stroke": "orange",
                    "stroke-width":4,
                    "fill": "none",
                });
​
            
        
        };      
    };
​
        
    var overlay1 = new google.maps.OverlayView(); //OverLayオブジェクトの作成
    var overlay2 = new google.maps.OverlayView(); //OverLayオブジェクトの作成
    overlay1.onAdd = drawAction;
    overlay2.onAdd = drawAction;
​
    //作成したSVGを地図にオーバーレイする
​
    overlay1.setMap(map1);
    overlay2.setMap(map2);
    
        
};
</script>
</body>
</html>
​
    