緯度経度の線を描画する【Spherical Mercator（メルカトル図法）】 (SVG使用)

説明

D3.jsで緯度経度の線を描画するには、あらかじめCSSで線の色や太さを指定しておきます。次に緯度経度の線の元となるパスをsvg要素内にappend()メソッドを使って追加します。datum(d3.geo.graticule())でパスに緯度経度の線の情報を設定します。あとはattr()メソッドを使って緯度経度の線のCSSクラス名を設定し、attr("d", パスデータ)でパスを描画します。
なお、地形データのサイズが多い場合、地形が表示されるまでに数秒かかることがあります。
これ以外の説明に関してはこちらのページを参照してください。

サンプル [サンプルを実行する]　[サンプルをダウンロード]

HTMLソース

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3.js サンプル</title>
<link rel="stylesheet" href="css/main.css">
<style>
svg {
border: 1px solid black;
}
.graticule {
fill: none;
stroke: #777;
stroke-opacity: .5;
stroke-width: .5px;
}
</style>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://d3js.org/d3.geo.projection.v0.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
</head>
<body>
<h1>D3.jsサンプル</h1>
<div id="myEarth"></div>
<script src="js/sample.js"></script>
</body>
</html>

JavaScriptコード

var width = 700;	// SVG領域の横幅
var height = 700;	// SVG領域の縦幅
var path = d3.geo.path()
	.projection(d3.geo.mercator()	// 投影方法を指定
	.translate([width / 2, height /2])	// 表示位置を調整
	.scale((width + 1) / 2 / Math.PI)
);
// SVG領域のサイズを指定
var svg = d3.select("#myEarth").append("svg")
	.attr("width", width)	// 横幅を指定
	.attr("height", height);	// 縦幅を指定
svg.append("path")	// 緯度経度の線を描画
	.datum(d3.geo.graticule())
	.attr("class", "graticule")
	.attr("d", path);
// 地球のデータを読み込む
d3.json("data/world-50m.json", function(error, world) {
	svg.insert("path", ".graticule")
		.datum(topojson.feature(world, world.objects.land))
		.attr("d", path);	// 地形のデータを設定
	});