四国＝オーストラリア by shimizu

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>四国　＝　オーストラリア</title>
<style>
html, body {
	width:100%;
	height: 100%;
	padding: 0px;
	margin:  0px;
}

svg {
    width: 100%;
    height: 100%;
}
</style>

</head>

<body>
<svg></svg>



<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
// Callback Hell!
d3.json("sikoku.geojson", function(sikoku){
	d3.json("australia.geojson", function(australia){
		d3.json("japan.geojson" ,function(japan){
			mapDraw(sikoku, australia, japan);    		
		})
	});   
});



function mapDraw(shikoku, australia, japan) {
    
	/*** ポリゴンの頂点数を揃える *********************************************************/
	var tmp = australia.features[0].geometry.coordinates[1][0];
	var ausPointLength = tmp.length;
	australia.features[0].geometry.coordinates = [[tmp]];

	tmp = [];
	shikoku.features[0].geometry.coordinates[0][0].forEach(function(d, i){
		tmp.push([d[0]-0.00001,d[1]-0.00001]);
		tmp.push([d[0]+0.00001,d[1]+0.00001]);
		
		if(i%3==0){
			tmp.push([d[0]-0.00001,d[1]-0.00001]);
			tmp.push([d[0]+0.00001,d[1]+0.00001]);
		}
	});

	while(tmp.length != ausPointLength){
		tmp.push(tmp[tmp.length-1]);
	}

	shikoku.features[0].geometry.coordinates = [[tmp]];    
	/*** end ********************************************************************/

    
	var svg = d3.select("svg");
	
	var base = svg.append("g").append("path")
		.attr({
			"fill": "#ccc",
			"stroke": "gray"
		});
	
	var map =  svg.append("g").append("path")
		.attr({
			"fill": "#ccc",
			"stroke": "gray"
		});

		
		
		

	//日本・四国用のプロジェクション
	var projection_japan = d3.geo
		.mercator()		//投影法の指定
		.scale(8000)	//スケール（ズーム）の指定
		.translate([1300,-200])
		.center([139.0032936, 36.3219088]); //中心の座標を指定

	//日本・四国用のパスジェネレーター	
	var japan_path = d3.geo.path().projection(projection_japan);　

	
	//ベースポリゴン(日本）を設置
	base.attr("d", japan_path(japan))

	//オーストラリア用プロジェクション
	var projection_australia = d3.geo
		.mercator()		
		.scale(400)	
		.translate([510,280])
		.center([133.77513599999997, -25.274398]); 

	//オーストラリア用のパスジェネレーター
	australia_path = d3.geo.path().projection(projection_australia);

	//初期表示として四国を表示しておく
	map.attr("d", japan_path(shikoku));

	
	//クリックされたら、四国-オーストラリアに変化する（トグル）
	d3.select("svg").on("click", toggle(
		function () {
			map.transition().ease("elastic").duration(2000).attr("d", australia_path(australia.features[0].geometry));            
		},
		function () {
			map.transition().ease("elastic").duration(2000).attr("d", japan_path(shikoku.features[0].geometry));            
		}
	));
	
	//ラベルを設定
	var textPoint = projection_japan([133.38503349999996, 33.5610096])
	svg.append("text")
		.attr({
			"x":textPoint[0],
			"y":textPoint[1],
			"text-anchor":"middle",
			"dominant-baseline":"middle"
		})
		.attr("transform", "translate("+[20, -10]+")")
		.text("Click Me!")
		
	
} 
 
function toggle(){
    var fn = arguments;
    var l = arguments.length;
    var i = 0;
    return function(){
        if(l <= i) i=0;
        fn[i++]();            
    }
} 
    
</script>    




    
</body>
</html>
四国 ＝ オーストラリア

index.html

四国＝オーストラリア
