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>
東京らへんを拡大
