6

d3.jsでジオチャートを作成する方法のガイダンスまたは例を探しています。私はグーグルチャートでこのようなものが必要です、そして私はいくつかのカスタマイズが必要なのでd3.jsに目を向けます。これまでのところ、私が見つけた最も近いd3.jsサンプルはこれですが、コードは非常に長く、もっと簡単なものを見つけたいと思っています。

4

2 に答える 2

9

コロプレスマップをお探しですか？最近の例を 28 行のコードで示します。

この例では、デフォルトの投影法d3.geo.albersUsaを使用します。これは、アラスカ、ハワイ、プエルトリコを含む米国の複合投影法です。可視領域を変更したい場合は、おそらく投影も変更する必要があります。d3.geo.albersは等面積であるため、コロプレス マップに適しています。アルバース図法を使用すると、グローバルの特定の部分に焦点を当てることができるように原点を設定できます。また、すべての投影法で縮尺を指定し、マップを画面上に配置するために移動できます。

世界地図を表示したい場合は、拡張投影プラグインの進行中の開発も検討します。これにより、多くの便利な地図投影法が追加されます。特に、 Winkel Tripelなどの世界地図に役立ちます。D3 の次のリリースには、任意のプロジェクションの 3 次元回転 (アンテメリディアン カットを含む。この例をドラッグしてみてください)、アダプティブ リサンプリング、改善されたクリッピングなど、いくつかのエキサイティングな新機能も含まれます。

コロプレスの色付けに関しては、データの関数として「塗りつぶし」スタイルを再定義することで、地理的特徴を好きなように色付けすることができます。

于 2012-09-29T14:52:42.237 に答える
2

@mbostock と彼の回答に敬意を表して、この質問に出くわした人のためにいくつかのリソースを追加すると思いました。

@Yaron Naveh が提供するリンクの例は、メルカトル図法のようです。d3.js のメルカトル図法機能の詳細については、d3.js APIを参照してください。@mbostock は親切にも、API の各プロジェクションのブロック/要点を作成してくれました (例については、プロジェクションのサムネイル画像をクリックしてください)。これは、単純なメルカトル図法ブロック/要点へのリンクです。

「The Art of Asking ～調子はどう？～」について リンク、これは@mbostockが塗りつぶしスタイルをデータの関数として使用した色付けについて言ったことに対応する小さなコードです。この例では、JSON ファイルの国名の最初の文字の Unicode 値を選択し、「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); });
});

ブロック/要旨として、ここで完全な例を確認できます。

(@mbostock - 素晴らしいツールをありがとう!)

于 2012-11-20T21:55:20.023 に答える