lisia's diary

思いつきでVimとか、その他プログラミングとか…

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では、

  1. mousedown
  2. mouseup
  3. mousemove

など、イベントを結構使っています。

mousedownに、その時点のX座標とY座標を取得したり、
mousemovemouseupの連携で、mousedownからupまでの
X、Yの差を取り、最後にその差を適用させるというようなやり方になります。

書くのは良いんですが、ほぼexampleと同じなので、ソース自体はこちらを参照くださいませ。

動く方はこちらです。マウスでグリグリしてみてください。
動くサンプル

ひとこと

記事が手抜きすぎる!