12

このチュートリアルは、d3を使用してコロプレスを作成するための優れた入門書ですが、データは米国中心です。世界地図に対応するデータはどこで入手できますか？

どこかのドキュメントにあると思いますが、見つかりません。これは私が見つけた最も近いものですが、そこにある1つの世界地図は、コロプレスには推奨されないと具体的に述べています。また、

4

1 に答える 1

9

注: この回答は、d3 のバージョン 2 用に書かれています。バージョン 3 がリリースされました。これには、優れたジオメトリ セグメンテーションを作成し、後述の塗り潰しの問題を解決する素晴らしい新機能が含まれています。また、プロジェクションを設定するためのインターフェイスが V3 で変更されている可能性があります (まだ試していないためわかりません)。

全世界で使用できる json ファイルがあり、それを us-states.json コロプレス (アルベルス正積投影を使用) と同等にレンダリングできます。世界地図はこのように見えますが、これはほとんどの人が世界地図を認識する方法とは異なります。

最初に、世界全体の json データが必要です。これは、世界のメルカトル図法の例で使用されるデータと同じです。

次に、カスタマイズされた Albers プロジェクションを使用してワールド json データをレンダリングする必要があります。

<!DOCTYPE html>
<meta charset="utf-8">
<title>Mercator Projection</title>

<style>
  path {
    fill: #ccc;
    stroke: #fff;
  }
</style>

<svg width="960" height="500"></svg>

<script src="http://d3js.org/d3.v2.js?2.9.1"></script>
<script type="text/javascript">
  d3.json("world-countries.json", function(collection) {
    d3.select("svg").selectAll("path")
        .data(collection.features)
      .enter().append("path")
        .attr("d", d3.geo.path().projection(
          d3.geo.albers()
            .parallels([10, 80])
            .origin([0,40])
            .translate([500,250])
            .scale(100)
        ));
  });
</script>

origin()、parallels()、translate()、およびscale()値を微調整して、さまざまな結果を得ることができます。

南極大陸には問題があり、この投影の性質上、「反転」し、閉じた形状ではないため、その塗りつぶしが全世界を覆っています。json から削除するか、塗りつぶしを適用しないでください。

また、何らかの理由で、これを試したときにブラジル (および他のいくつか) が適切にレンダリングされませんでした。なぜだかわからない。理由を理解するには、svg とデータを調べる必要があります。

于 2012-10-31T04:31:42.907 に答える