d3.js "v4" にて地図描画 #JavaScript

v4 で大きく verup した d3.js だが v3 に慣れてしまい、
かつ、単純にライブラリをverupしただけでは互換性なくエラーになり、v3 固定で使い続けてきましたが、
いよいよv4にしていきましょうということでメモ。

今回は日本鉄道路線図を書いてみるというネタ。

国土数値情報鉄道データ
http://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N02-v2_3.html

$ unzip N02-15_GML.zip
$ ogr2ogr -f GeoJSON N02-15_RailroadSection.json N02-15_RailroadSection.shp

日本地図のデータ以前の投稿から拝借
http://qiita.com/hiyuzawa/items/dbe82feecc57ec84a880

実際のところのv3→v4変更点
* projection のところが d3.geo.mercator() → g3.geoMercator()
https://github.com/d3/d3-geo-projection

path のところが d3.geo.path → d3.geoPath
https://github.com/d3/d3-geo
d3.jsとは外れるけどtopojsonが topojson.feature(...)

意外と geo 系を使う分にはその程度の修正でいけた。

<!DOCTYPE html>
<html>
<head>
    <title>D3.js v4 Example</title>
    <style>
.N02_002_1 { stroke: #6495ed; stroke-width: 2px;} /* JRの新幹線 */
.N02_002_2 { stroke: #00bfff; stroke-width: 2px;} /* JRの在来線 */
.N02_002_3 { stroke: #b8860b; stroke-width: 2px;} /* 公営鉄道 */
.N02_002_4 { stroke: #2e8b57; stroke-width: 2px;} /* 民営鉄道 */
.N02_002_5 { stroke: #ff4500; stroke-width: 2px;} /* 第三セクター */
    </style>
</head>
<body>

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/topojson@3"></script>
<script>
    var width = window.innerWidth;
    var height = window.innerHeight;
    var svg = d3.select("body").append("svg")
                .attr("width", width)
                .attr("height", height);

    var projection = d3.geoMercator()
                        .center([136, 38])
                        .scale(3300)
                        .translate([width/2, height/2]);
    var path = d3.geoPath(projection);

    console.log(topojson);

    d3.json("map_topo.json", function(json) {
        svg.selectAll("path")
            .data(topojson.feature(json, json.objects.map_geo).features)
            .enter()
            .append("path")
            .attr("stroke", "#999")
            .attr("fill", "none")
            .attr("d", path);
    })

    d3.json("N02-15_RailroadSection.json", function(json) {
        svg.selectAll("path")
            .data(json.features)
            .enter()
            .append("path")
            .attr("class", function(d) {
                return "N02_002_" + d.properties.N02_002;
            })
            .attr("fill", "none")
            .attr("d", path);
    });

</script>
</body>
</html>

東京らへんを拡大