Skip to content

Instantly share code, notes, and snippets.

@shimizu
Last active Feb 10, 2016
Embed
What would you like to do?
四国 = オーストラリア

クリックすると、四国がオーストラリアになります。もう一回押すと戻ります。

Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<!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>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment