【D3.js】SVGで作成した都道府県の地形を並べて表示する

example

見たまんまです。
D3.jsでGeoJSONデータを読み込み、svgのPathで地形を描画し並べて表示しています。
ポイントは各都道府県の中心座標を取得しtranslateで中心座標のxyを引くことで、一旦全ての地形の座標を0,0に初期化しているところです。
沖縄県だけ、中心点の座標が上手く取得できず変な場所に表示されています。

サンプル

d3.json("japan.geojson", function(json) {
	d3main(json);
});


function d3main(json){

	var geodata = json.features;

	projection = d3.geo
	    .mercator()		//投影法の指定
	    .scale(1500)	//スケール（ズーム）の指定
	    .translate([300,350])
	    .center([139.0032936, 36.3219088]); //中心の座標を指定

	var path = d3.geo.path().projection(projection);　//投影

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

	var map =  svg.append("svg:g")
		.selectAll("path")
		.data(geodata)
		.enter()
		.append("g")
		.attr("transform", function(d, i){
		    var center = path.centroid(d); //中心点取得
		    var x = ~~center[0]; 
		    var y = ~~center[1];
		    var nx = Math.floor(i%10) * 150 + 100; //並び位置(x軸)
		    var ny = Math.floor(i/10) * 120 + 100; //並び位置(y軸)
		    //中心点分を引いて一度座標をx=0,y=0に戻す。その後nx,nyの位置に表示
		    return "translate(-"+x+",-"+y+"),translate("+nx+","+ny+")";		    
		})
		.append("svg:path")
		.attr({
			"d": path,
			"fill": "green",
			"fill-opacity": 0.5,
			"stroke": "black"
		})
		.append("title")
		.text(function(d){ return d.properties.PREF })
}

d3.json("japan.geojson", function(json) {

d3main(json);

});

function d3main(json){

var geodata = json.features;

projection = d3.geo

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

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

.translate([300,350])

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

var path = d3.geo.path().projection(projection);　//投影

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

var map = svg.append("svg:g")

.selectAll("path")

.data(geodata)

.enter()

.append("g")

.attr("transform", function(d, i){

var center = path.centroid(d); //中心点取得

var x = ~~center[0];

var y = ~~center[1];

var nx = Math.floor(i%10) * 150 + 100; //並び位置(x軸)

var ny = Math.floor(i/10) * 120 + 100; //並び位置(y軸)

//中心点分を引いて一度座標をx=0,y=0に戻す。その後nx,nyの位置に表示

return "translate(-"+x+",-"+y+"),translate("+nx+","+ny+")";

})

.append("svg:path")

.attr({

"d": path,

"fill": "green",

"fill-opacity": 0.5,

"stroke": "black"

})

.append("title")

.text(function(d){ return d.properties.PREF })

}

サンプル

投稿者: shimizu