D3.jsで地図を手動で回転させる
前回は自動で回転させましたが、今回は手動で回転させてみます。
手動で回転させる際に参考にしたのは、D3.jsのexampleのこちらになります。
ほぼソースは同じですね。
exampleとの差異
exampleのソースを見てみると...
var feature; var projection = d3.geo.azimuthal() .scale(380) .origin([-71.03,42.37]) .mode("orthographic") .translate([640, 400]); var circle = d3.geo.greatCircle() .origin(projection.origin());
こんな感じのコードになってました。
projectionの辺りですが、azimuthal
を指定しています。
が、これを指定するとどうもそんなfunctionないよと怒られます。
ついでにoriginも怒られます。
circleの方もgreatCircle
で怒られたり。。。
ですので、projectionは
// projection projection = d3.geo.orthographic() .scale(200) .translate([w /2, h / 2]) .clipAngle(90),
こんな感じに。前回と同じものを。circleも同じく、svgにappendする形です。
ここ以外はほぼ弄っていないので…。
イベント処理の追加
このexampleでは、
- mousedown
- mouseup
- mousemove
など、イベントを結構使っています。
mousedown
に、その時点のX座標とY座標を取得したり、
mousemove
、mouseup
の連携で、mousedown
からup
までの
X、Y
の差を取り、最後にその差を適用させるというようなやり方になります。
書くのは良いんですが、ほぼexampleと同じなので、ソース自体はこちらを参照くださいませ。
動く方はこちらです。マウスでグリグリしてみてください。
動くサンプル
ひとこと
記事が手抜きすぎる!