問題タブ [d3.geo]

私が見つけたすべての素晴らしい例に基づいて、インタラクティブな地球を構築するために D3 地理正投影を楽しんでいます。

私のシンプルなモックアップはhttp://bl.ocks.org/patricksurry/5721459で見ることができます

ユーザーが地球儀をトラックボールのように操作できるようにしたい ( http://www.opengl.org/wiki/Trackball )。Mike の例の 1 つ ( http://mbostock.github.io/d3/talk/20111018/azimuthal.html ) から始めて、キャンバス座標を使用し、マウスの位置を「トラックボール座標」で表現するように少し改善しました (つまり、回転これにより、Mike の 1 対 1 の対応ではなく、固定されたマウスの動きが地球の端近くでより多くの回転を与えます (上記で説明した双曲線拡張を使用すると、地球の外側で機能します)。

地球が回転していない位置 (北極が垂直) から始まる場合はうまく機能しますが、地球が既に回転している場合 (北極がページの外を向くように例を操作します)、トラックボール コントロールは非直感的になります。単にトラックボール座標の変化を d3.geo.rotate lat/lon 座標のデルタとして表現するだけではありません。D3 の 3 軸回転には、経度回転 (北極を中心に回転)、緯度回転 (キャンバス平面の水平軸を中心に回転)、「ヨー」回転 (平面に垂直な軸を中心に回転) の適用が含まれます。 - http://bl.ocks.org/mbostock/4282586を参照してください。

私が必要としているのは、2 つの回転行列 (現在投影されているものと、トラックボールをわずかに回転させるための新しい行列) を構成する方法だと思いますが、掘る以外に D3 でそれを行う方法がわかりません。ソース ( https://github.com/mbostock/d3/blob/master/src/geo/rotation.js ) に入力し、回転行列を定義するために計算を試みます。コードは洗練されているように見えますが、コメントはありません。正射投影インスタンスでクロージャを正しく解読できるかどうかはわかりません。

最後の点で、誰かが d3.geo.projection の回転行列形式を知っていれば、おそらく私の問題も解決します。

何か案は？

一部の d3 タイル マップの例では、投影を使用してズーム スケールを設定すると、常に 2*Math.PI の時間がかかります。

たとえば、このデモ「手描きのポリゴンを使用した D3 タイル マップ」。

http://bl.ocks.org/emeeks/11051379

project.scale() はピクセル単位だと思います。zoom scale() が使用する単位を非常に混乱させます。

キャンバス要素 (実際にはキャンバスにロードされた単なる画像) のコンテンツを取得し、d3 を使用してそれらをさまざまなマップ投影に歪めようとしています。したがって、これを行う例を1つだけ見つけました( this other SO question )。

問題は、すべての投影で機能しないことです。コード：

上記の例では、投影のスケールを低く設定しすぎると (たとえば 80)、(for ループ内の) 変数 p は になりますnull。なぜこれが起こるのかわかりません。投影がキャンバス領域内に収まるようにスケールを設定する必要があります。

動作中の jsfiddle の例: http://jsfiddle.net/vjnfyd8t/

だから私は で少し実験していてD3's geo stream API、物事は少しぼんやりしています。ここのドキュメントを読んでいます：

https://github.com/mbostock/d3/wiki/Geo-Streams

私が混乱している点の 1 つは、ストリーム変換の適切な実装です。私が作成したとしましょう：

ドキュメントによると、this.streamは「ラップされたストリーム」を参照しています。しかし、実際にはストリームとは何ですか？私が収集できるものからすると、これは明示的なデータ構造というよりも、一連のデータとデータを変換するための関数呼び出しのような手順です。上記の構文は、ラップされたストリームが単に「ストリームリスナー」 を含むオブジェクトであることを示唆しているようです

次に進むと、射影法を使用してストリーム変換を適用できます。

根底にあるメカニズムはよくわかりませんが、その効果は比較的単純に思えます。パス ジェネレーターの根底にある変換関数は、変換されたx,y引数で呼び出されます。

私の使用例では、特に入力データがまだ投影されていないため、これはあまり役に立ちません。最初に投影を使用してデータを変換し、次に出力された座標を変換したいと思います。そのために、トランスフォームをレイヤー化するための一般的なパターンはありますか?

D3リスナーを適用する前に、最初に射影変換を適用するProjection.stream( listener ) パターンを提供していることがわかりますが、これを実装する方法がわかりません。リスナーの引数は何にする必要がありますか? 例を次に示します: http://jsfiddle.net/kv7yn8rw/2/。

どんなガイダンスも大歓迎です！

再投影の移行中に (上から下へ) 奇妙なアーティファクトが発生します。

(1) 開始状態のスナップショット:

(2) トランジション (ズームイン) スナップショット:

(3) 最終状態のスナップショット:

ライブデモがあります。コンソールにエラー メッセージはありません。初期状態も最終状態も完璧です。私は見当もつかない。そのようなトランジション/再投影表示バグの経験はありますか?

ノードとリンク データを含む cvs ファイルのデータを使用して、この例を変更しようとしています。Python のgooglemaps モジュールから取得した住所があります。すべてのノードには39.338923 / -74.475714、経度/緯度 (lng/lat) 座標を表す 2 つの float があります。ただし、次のようになると:

上記の例では、物事は怪しくなります。path()viaの出力を表示するとconsole.log、 とが表示されます。私はこのSO の質問を見てきましたが、すべての lng/lat 値が「コーシャ」であると確信しています。NaNLNaN

私は JavaScript、d3.json、および地図作成に非常に慣れていないため、この問題のトラブルシューティングを行うにはどうすればよいですか? 私は現在立ち往生しています。の出力は文字列なのでpath()、lng., lat. を見つけることができました。を与える値NaN。ここではいくつかの例を示します。

不具合によりご利用いただけないリンクデータが多数ございます。これより前に、コードが間違っていた可能性のある場所がたくさんあることを私は知っています。上記をコメントアウトすると.attr("d",…、エラーはありません。残念ながら、この場合、リンクは描画されません。ありとあらゆる助けが大歓迎です！

タイルを使用するマップにズーム トランジションを実装しようとしています。1 つの場所を拡大してから、他の 2 つの場所の間を行ったり来たりしたいと考えています。

これは私が取り組んでいる例です: http://bl.ocks.org/mbostock/6242308 それは私が望むことを行います.topojsonまたはgeojsonファイルの代わりにマップタイルを使用したいだけです.

現在、マップはジャンプ機能で最終的な場所を呼び出していますが、場所間の移行は機能していません。何が起こっているのかについてのアイデアは大歓迎です.コンソールには何も表示されず、少し行き詰まっています. どうもありがとう。

私のコードは以下にあり、このplunkerにもあります。