【D3.js】サーマーウォーズのワールドクロックを作る
アノ時計っぽいものを作ってみました。
解説
基本的には下記事のコードをちょこちょこっと改良しただけです。
【D3.js】 SVGで地球儀を描く
地軸を傾けながらSVGで地球儀を表示する
ポイントとしては地形を裏用(グレー)と表用(ピンク)に２重に描画しているところでしょうか。
clipAngleメソッドを使って描画される範囲を変えています。
・裏用地形描画
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
var projection180 = d3.geo.orthographic() .scale(windowWidht/4) .rotate([0,0,0]) .translate([windowWidht / 2, windowHeight / 2]) .clipAngle(180); var backPath = d3.geo.path().projection(projection180); //地形(裏) var backMap = stage.append("svg:path") .attr({ "d":function(){ return backPath(geojson)}, "fill-opacity":1, "fill":"#EDE9F1", "stroke":"none", }); |
・表用地形描画
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
var projection90 = d3.geo.orthographic() .scale(windowWidht/4) .rotate([0,0,0]) .translate([windowWidht / 2, windowHeight / 2]) .clipAngle(90); var frontPath = d3.geo.path().projection(projection90); //地形(表) var frontMap = stage.append("svg:path") .attr({ "d":function(){ return frontPath(geojson)}, "fill-opacity":1, "fill":"#FD81DB", "stroke":"none", }); |
SVGでは後から追加された要素の方が上になるので、裏→表の順番で描画します。
テキスト(時計)表示部分はサイズ決め打ちでだいぶ手を抜いています。
ほんとはウインドサイズに応じて自働調整したかったのですが、うまくいきませんでした。
テキスト等はHTMLのDIV要素などを使った方が画面中央に揃えるのが簡単そうですね。
