クリックすると、四国がオーストラリアになります。もう一回押すと戻ります。
Last active
February 10, 2016 13:44
-
-
Save shimizu/60aa99e86225b26d4471 to your computer and use it in GitHub Desktop.
四国 ＝ オーストラリア
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment