読者の皆さん、こんにちは！
前回 、インタラクティブなホロプレットマップの作成プロセスを研究しましたが、今度はタスクを少し複雑にして、一般的に地球と呼ばれる地球の3次元モデルに進むことを提案します。
SVGバージョンとCanvasバージョンの2種類のグローブを作成します。 どちらの場合も、
d3.js JavaScriptライブラリを使用します。 各オプションには独自の利点があります。 私のパフォーマンスでは、
ブループラネットは次のとおりです。
そして、大陸と海で独自の
世界を作成する方法は、カットの下で見つけることができます。
開始する
まず、ジオデータを見つける必要があります。 前回同様、これらの目的には
TopoJSONを使用します。 取得方法
については、「カートグラフィックの問題」セクションの
前の記事をご覧ください。 したがって、1：110,000,000、または1 cm = 1,100 km（1″ = 1,736マイル）の縮尺のマップ用の
TopoJSONファイル
world-110m.jsonと、
idという形式の
world-110m-country-names.tsvを持つファイル
world-110m-country-names.tsvが
world-110m-country-names.tsvます。国の名前。 この場合、名前を任意の言語に簡単に翻訳できるため、名前付きの外部ファイルが便利に使用されます。 すべて、地球の創造に直接進むことができます。
注：選択した規模では、一部の小国は幾何学的な意味で「縮退」しているため、リストには174か国しかありません。
インタラクティブなグローブを描く
私たちの目標は、次のことができる世界です。
- マウスを回転させて土地を「つかむ」
- リストから選択した国に地球の中心を置く
必要な人のためのテンプレート。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Nice title</title> <script src="http://d3js.org/d3.v3.min.js"></script> <script src="http://d3js.org/queue.v1.min.js"></script> <script src="http://d3js.org/topojson.v1.min.js"></script> </head> <style> Your awesome CSS </style> <body> <h1>Cool Header</h1> <script> Your awesome d3.js code </script> </body> </html>
メイン変数を定義し、
DOM要素を追加し
ます 。
var width = 600, height = 500, sens = 0.25, focused;
sens変数は、マウスでの回転の精度に責任があり、
focused 、選択された（中央の）国のトリガーとして使用されます。 ウィキペディアで使用されている投影
法 ：
正射投影法について読むことができます。
.clipAngle（）メソッドは、球体のどの部分を表示する（または表示する
）かを決定します。ウィキペディアでもう一度読むことができます：
小円クリッピング 。 残りは説明を必要としないようです。
次に、
queue.jsライブラリを使用してファイルをアップロードします。これにより、非同期でこれを行うことができます。
queue() .defer(d3.json, "data/world-110m.json") .defer(d3.tsv, "data/world-110m-country-names.tsv") .await(ready);
さて、メイン関数に移りましょう。ここでは、
readyと呼ばれます。 まず、国名を
ドロップダウンリストに追加し、世界の国々を描きます。
function ready(error, world, countryData) { var countryById = {}, countries = topojson.feature(world, world.objects.countries).features;
マウスイベントの処理に移りましょう。 ここで
drag.origin（）には説明が必要です。要素（この場合は緯度と経度）をキャプチャするときに、「元の」（実際の）開始座標を設定できます。
国に焦点を当てて実装するには、
id 'nameで国の地理データを返す関数を作成する必要があります。 実際、ここに彼女がいます。
function country(cnt, sel) { for(var i = 0, l = cnt.length; i < l; i++) { if(cnt[i].id == sel.value) {return cnt[i];} } };
これで、リストから選択した国に焦点を合わせて（中心に）実装に直接進むことができます。
ここでは、すべてのソルトは
transition.tween（）にあり、各補間値に対して特定の関数（回転）を呼び出すことができます。
回転、回転する青いボール。
それだけです
-SVGグローブは準備ができています。 ソースは
GitHubで見つけることができ（Habrahabrで
読み取り専用の人に質問することもできます）、
bl.ocks.orgサービスで結果を感じることができます。
SVGの利点を見てみましょう。
- DOM要素、特に
pathと対話する機能 - CSSを使用する機能（前の段落の結果として）
- テキストはテキストであり、次のすべての利点があります
地球惑星アニメーション
SVG実装では整理されているように見えるので、キャンバスでこのようなことを行う方法を見てみましょう。 地球の回転の簡単なアニメーションを作成します。 ここでの多くは、前の例と似ています。 コードは十分ではないので、私は一度にすべて持っていきます。
var width = 800, height = 500; var projection = d3.geo.orthographic() .scale(245) .rotate([180, 0]) .translate([width / 2, height / 2]) .clipAngle(90); var canvas = d3.select("body").append("canvas") .attr("width", width) .attr("height", height); var c = canvas.node().getContext("2d"); var path = d3.geo.path() .projection(projection) .context(c); function getImage(path, callback) { var img = new Image(); img.src = path; img.onload = callback(null, img); } queue() .defer(d3.json, "data/world-110m.json") .defer(d3.tsv, "data/world-110m-country-names.tsv") .defer(getImage, "data/space.jpg") .await(ready);
回転は、ポイント
[-180, 0] [180, 0]からポイント
[-180, 0] [180, 0]への回転として実装されます。 したがって、「補間」は、キャッチに気付かずに、必要なことを行います。 次に、以前にそれをきれいにしてから、キャンバスにペイントを開始します。 背景、球体、大陸、国の国境を描きます。
transition関数の再帰呼び出しにより、無限の回転が得られます。
「それでも彼女は回転します！」
さて、アニメーションを作成しました。 ソースは
GitHubで見つけることができ、
bl.ocks.orgサービスを通じて宇宙の景色を楽しむことができます。
Canvasの利点を考慮してください：
- SVGより高速でスムーズなパフォーマンス
- アニメーション、ビデオ、ゲーム、および今日実装されているその他のものとの統合により、その助けを借りて
おわりに
そこで、素晴らしい
d3.jsライブラリを使用して作成された
いくつかの興味深い例を見てみました。 例をわかりやすく、視覚的に、非常に興味深いものにすることを試みました。
SVGとCanvasの戦いでは、最終的に友情が勝ったため、特定のテクノロジーの使用はプロジェクトのタイプに依存します。 たとえば、プロジェクトが地図作成に関連している場合、
SVGを使用することをお勧めします。マルチメディアを使用する場合は、Canvasが役立ちます。 あなたが興味を持っていたと思います。
d3.jsのさらなる開発に成功と幸運を！