私は、d3.jsでジオカートを行う方法のガイダンスや例を探しています。 Googleチャートでのようなものが必要ですし、カスタマイズが必要なので、d3.jsに変更しています。これまで私が見つけた最も近いd3.jsサンプルはthisですが、コードは非常に長く、私はもっと簡単なものを見つけることを望んでいます。geochart in d3.js
答えて
あなたはchoroplethマップをお探しですか?ここにはrecent example in 28 lines of codeがあります。
この例では、アラスカ、ハワイ、プエルトリコなどの米国の複合投影であるデフォルト投影d3.geo.albersUsaを使用しています。可視領域を変更したい場合は、おそらく投影を変更することもできます。 d3.geo.albersは、それが等面積であるため、choroplethマップに適しています。アルバープロジェクションでは、originを設定して、グローバルの特定の部分に集中できるようにし、すべての投影でscaleとtranslateを指定して地図を画面上に配置することができます。
ワールドマップを表示する場合は、extended projections pluginの進行中の開発についても見てください。これは、特に世界地図のために、Winkel Tripelのような有用な地図投影を追加します。 D3の次のリリースでは、任意の投影(アンテローシスカットを含む、dragging this exampleを試してください)、adaptive resampling、改善されたクリッピングなどの3次元回転など、いくつかのエキサイティングな新機能も含まれます。
チョコレートを着色する場合はもちろん、色の地理的な特徴はデータの関数として「塗りつぶし」スタイルを再定義することで好きです。
感謝を参照して、イメージマップソリューションを評価することができます。画面(たとえば大陸)でどの領域が表示されるかを決めるにはどうすればよいですか?着色のために国名を使用することはできますか? –
@mbostockと彼の答えに敬意を表して、私はこの質問に出くわす人のためにいくつかの追加リソースを追加すると考えました。
@ Yaron Navehが提供するリンクの例は、Mercator projectionのようです。 には、d3.jsのメルカトル投射施設の詳細があります。 @mbostockはまた、API内の各投影のブロック/要点を作成するのに十分親切です(この例の投影サムネイル画像をクリックしてください)。シンプルなメルカトル図法block/gistへのリンクは次のとおりです。
「募集の芸術について - あなたはどのように感じていますか? @mbostockがデータの関数として塗りつぶしスタイルを使って色付けすることについて説明した少しのコードです。この例では、JSONファイル内の国名の最初の文字のユニコード値を単純に選択し、種別として「steelblue」(#4682B4 = 4620980)を使用してその値からCSSカラーを作成しています(おそらく陰影/色合いを計算したい)。
d3.json("readme.json", function(collection) {
d3.select("svg").selectAll("path")
.data(collection.features)
.enter().append("path")
.attr("d", d3.geo.path().projection(d3.geo.mercator()))
.style("fill", function(d) { return '#'+Math.floor(d.properties.name.charCodeAt(0)/100*4620980).toString(16); });
});
あなたはblock/gistとしてここに完全な例をチェックアウトすることができます。
(@mbostock! - このような素晴らしいツールをありがとう)
- 1. D3.js
- 2. d3.js
- 3. d3.jsのレイヤードグラフ
- 4. D3.jsトランジション
- 5. D3 JSデータフィルタリング
- 6. d3.jsデフォルトaxis.tickFormat
- 7. d3.jsセーブステート
- 8. D3.js - レイアウト - 値アクセサー
- 9. D3.js:.append( "g")の 'g'とは何ですか?D3.jsコード?
- 10. D3.js - フラットJSON階層
- 11. スライスのD3.js円チャートラベル
- 12. Cubism.js/d3.jsスケールと範囲
- 13. D3.jsのサンバーストの遷移
- 14. D3.jsオブジェクト間のダイナミックコネクタ
- 15. D3.jsレーダーチャートの線図
- 16. D3.js Mouseover and Focus + Context issue
- 17. D3.jsの伝説のドメイン
- 18. d3.js&json - 簡単なサンプルコード?
- 19. d3.jsパスのデータをソート
- 20. D3.js tree diagramme外部データインポートデバッグ
- 21. Image Preview in JS with JS
- 22. Angular JS app in view
- 23. d3.js散布図をズーム/ドラッグ
- 24. d3.js d3.geo.pathに円を追加します。
- 25. マルチラインD3.jsラインチャートのツールチップのスタイル
- 26. d3.js軸の日付を扱う
- 27. d3.jsビジュアルを更新する
- 28. d3.jsで円弧を作成
- 29. d3.js - csvで円グラフで表示
- 30. d3.jsのlayout.packを更新する
またhttp://www.netzgesta.de/mapper/ – Nelson