国境線を描画する【Aitoff（エイトフ）図法】 (SVG使用)

説明

国境線を描画するにはinsert()メソッドを使います。insert()メソッドでパスを挿入し、datum()によりデータを設定します。データを設定したらattr()メソッドを使って要素の座標に地形データの座標を設定します。国境線の色などはCSSで設定することもできます。サンプルではattr("class", "boundary")として国境線のパスにCSSクラスのboundaryを設定しています。HTMLでCSS設定を行えば表示に反映されます。
なお、この他の解説に関してはこちらのページを参照してください。

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

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;

}

.stroke {	/* 地球の外枠線 */

fill: none;

stroke: #f00;

stroke-width: 3px;

}

.fill {	/* 地球全体の色 */

fill: #efefef;

}

.graticule {	/* 緯度経度の線 */

fill: none;

stroke: #f77;

stroke-width: .5px;

stroke-opacity: .5;

}

.land {	/* 地形 */

fill: #229;

}

.boundary {	/* 国境線 */

fill: none;

stroke: #00ff00;

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 = 960;	// SVG領域の横幅
var height = 500;	// SVG領域の縦幅
var path = d3.geo.path()
	.projection(d3.geo.aitoff());	// 投影方法を指定
// SVG領域のサイズを指定
var svg = d3.select("#myEarth").append("svg")
	.attr("width", width)	// 横幅を指定
	.attr("height", height);	// 縦幅を指定
svg.append("defs").append("path")	// 地球儀の外側の枠を描画
	.datum({type: "Sphere"})
	.attr("id", "sphere")
	.attr("d", path);
svg.append("use")
	.attr("class", "stroke")
	.attr("xlink:href", "#sphere");
// 地球儀のデータを読み込む
d3.json("data/world-50m.json", function(error, world) {
	svg.insert("path", ".graticule")
		.datum(topojson.feature(world, world.objects.land))
		.attr("class", "land")	// 地形のCSSクラスを設定
		.attr("d", path);	// 地形のデータを設定
	svg.insert("path", ".graticule")	// 国境線のデータを設定
		.datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
		.attr("class", "boundary")	// 国境線のCSSクラスを設定
		.attr("d", path);
	});