【D3.js】文字で日本地図書いてみた。

またもや小ネタです。
文字を使って日本地図を描いてみました。
北海道は「Hokkaido」でと、一応各県名でエリアを描画しているんですが……まったく分かりませんね。

綺麗に表示する方法が分かったら、また挑戦してみたいとおもいます。

サンプル

ポイントは地形のpathをdef要素の中に描き、県名をidとしてtextpathにリンクさせているところです。
これだけで、pathに沿ってテキストが表示されます。

d3.json("ken.topojson", function(json) {
	draw(json);
});


function draw(json){
	var geodata = json.objects.ken;
	
	var projection = d3.geo
		.mercator()		//投影法の指定
		.scale(1900)	//スケール（ズーム）の指定
		.translate([500,450]) //表示位置調整
		.center([139.0032936, 36.3219088]); //中心の座標を指定

	var path = d3.geo.path().projection(projection);　//パスジェネレーター

	var svg = d3.select("svg");　
	var def = svg.append("def"); //svgにおける関数のような要素。再利用が可能
		
	//地図描画(pathをdef内に作成)
	var map = def.append("g")
		.attr("class", "land")
		.selectAll("path")
		.data(topojson.feature(json, geodata).features)
	    .enter().append("path")
		.attr("d", path)
		.attr("stroke", "red")
		.attr("id", function(d){
			//pathのidとして県名を指定
			return d.properties.ObjName_1;
		})
	
	//テキスト要素追加	
	var text = svg.selectAll('text')
		.data(topojson.feature(json, geodata).features)
		.enter()
		.append("text")
		.append("textPath")
		.attr("xlink:href", function(d){
			//defの中に書きこまれたpathをidで呼び出しテキストに適用する
			return "#"+d.properties.ObjName_1;
		})　
		.text(function(d){
			var a = d3.range(0,50)
			.map(function(){ return d.properties.ObjName_1 });
			return a
		})
}

d3.json("ken.topojson", function(json) {

draw(json);

});

function draw(json){

var geodata = json.objects.ken;

var projection = d3.geo

.mercator() //投影法の指定

.scale(1900) //スケール（ズーム）の指定

.translate([500,450]) //表示位置調整

.center([139.0032936, 36.3219088]); //中心の座標を指定

var path = d3.geo.path().projection(projection);　//パスジェネレーター

var svg = d3.select("svg");　

var def = svg.append("def"); //svgにおける関数のような要素。再利用が可能

//地図描画(pathをdef内に作成)

var map = def.append("g")

.attr("class", "land")

.selectAll("path")

.data(topojson.feature(json, geodata).features)

.enter().append("path")

.attr("d", path)

.attr("stroke", "red")

.attr("id", function(d){

//pathのidとして県名を指定

return d.properties.ObjName_1;

})

//テキスト要素追加

var text = svg.selectAll('text')

.data(topojson.feature(json, geodata).features)

.enter()

.append("text")

.append("textPath")

.attr("xlink:href", function(d){

//defの中に書きこまれたpathをidで呼び出しテキストに適用する

return "#"+d.properties.ObjName_1;

})　

.text(function(d){

var a = d3.range(0,50)

.map(function(){ return d.properties.ObjName_1 });

return a

})

}

サンプル

投稿者: shimizu