D3.js-地域

地理空間座標は、天気や人口のデータによく使用されます。D3.jsは、地理データ用の3つのツールを提供します-

Paths −最終的なピクセルを生成します。
Projections −球座標をデカルト座標に変換し、
Streams −彼らは物事をスピードアップします。

D3.jsの地理が何であるかを学ぶ前に、次の2つの用語を理解する必要があります-

D3ジオパスと
Projections

これらの2つの用語について詳しく説明します。

D3ジオパス

地理的パスジェネレータです。GeoJSONは、SVGパスデータ文字列を生成するか、Canvasへのパスをレンダリングします。パフォーマンスを向上させるために、動的またはインタラクティブな投影にはCanvasをお勧めします。D3ジオパスデータジェネレーターを生成するには、次の関数を呼び出すことができます。

d3.geo.path()

ここでは、 d3.geo.path() パスジェネレータ関数を使用すると、地理座標からデカルト座標への変換に使用する地図投影法を選択できます。

たとえば、インドの地図の詳細を表示する場合は、次のようにパスを定義できます。

var path = d3.geo.path()
svg.append("path")
   .attr("d", path(states))

投影

投影は、球形のポリゴンジオメトリを平面のポリゴンジオメトリに変換します。D3は、次のプロジェクション実装を提供します。

Azimuthal −方位図法は、球を平面に直接投影します。
Composite −コンポジットは、単一のディスプレイに構成される複数のプロジェクションで構成されます。
Conic −球を円錐に投影してから、円錐を平面に広げます。
Cylindrical −円筒図法は、球を収容シリンダーに投影し、次にシリンダーを平面に広げます。

新しいプロジェクションを作成するには、次の関数を使用できます。

d3.geoProjection(project)

指定された生のプロジェクションプロジェクトから新しいプロジェクションを構築します。プロジェクト関数は、指定されたポイントの経度と緯度をラジアンで取得します。次のプロジェクションをコードに適用できます。

var width = 400
var height = 400
var projection = d3.geo.orthographic() 
var projections = d3.geo.equirectangular()
var project = d3.geo.gnomonic()
var p = d3.geo.mercator()
var pro = d3.geo.transverseMercator()
   .scale(100)
   .rotate([100,0,0])
   .translate([width/2, height/2])
   .clipAngle(45);

ここでは、上記の予測のいずれかを適用できます。これらの予測のそれぞれについて簡単に説明しましょう。

d3.geo.orthographic()−正投影は、単一の半球を表示するのに適した方位図投影です。遠近法のポイントは無限大にあります。
d3.geo.gnomonic() −心射方位図法は、大円を直線として投影する方位図法です。
d3.geo.equirectangular()−正距円筒図法は、可能な限り最も単純な地理投影法です。恒等関数。等面積でも等角でもありませんが、ラスターデータに使用されることがあります。
d3.geo.mercator() −球形メルカトル図法は、タイルマッピングライブラリで一般的に使用されます。
d3.geo.transverseMercator() −横メルカトル図法。

実例

この例でインドの地図を作成しましょう。これを行うには、次の手順に従う必要があります。

Step 1 − Apply styles −以下のコードを使用して、マップにスタイルを追加しましょう。

<style>
   path {
      stroke: white;
      stroke-width: 0.5px;
      fill: grey;
   }
   
   .stateTN { fill: red; }
   .stateAP { fill: blue; }
   .stateMP{ fill: green; }
</style>

ここでは、状態TN、AP、およびMPに特定の色を適用しました。

Step 2 − Include topojson script − TopoJSONは、トポロジをエンコードするGeoJSONの拡張であり、以下で定義されています。

<script src = "http://d3js.org/topojson.v0.min.js"></script>

このスクリプトをコーディングに含めることができます。

Step 3 − Define variables −以下のコードを使用して、スクリプトに変数を追加します。

var width = 600;
var height = 400;
var projection = d3.geo.mercator()
   .center([78, 22])
   .scale(680)
   .translate([width / 2, height / 2]);

ここでは、SVGの幅は600、高さは400です。画面は2次元空間であり、3次元オブジェクトを提示しようとしています。だから、私たちは土地のサイズ/形状をひどく歪めることができますd3.geo.mercator() 関数。

中心は指定されています[78、22]。これにより、投影の中心が経度と緯度の2要素配列として指定された場所に設定され、投影が返されます。

ここでは、地図は西78度と北22度を中心にしています。

スケールは680として指定されます。これにより、投影のスケール係数が指定された値に設定されます。スケールが指定されていない場合は、現在のスケール係数が返されます。デフォルトは150です。スケール係数は、投影全体で一貫していないことに注意してください。

Step 4 − Append SVG −ここで、SVG属性を追加します。

var svg = d3.select("body").append("svg")
   .attr("width", width)
   .attr("height", height);

Step 5 − Create path −コードの次の部分は、新しい地理パスジェネレータを作成します。

var path = d3.geo.path()
   .projection(projection);

ここでは、パスジェネレーター（d3.geo.path（））を使用して、変数射影を使用したメルカトル図法として以前に定義された射影タイプ（.projection）を指定します。

Step 6 − Generate data − indiatopo.json –このファイルには非常に多くのレコードが含まれており、次の添付ファイルから簡単にダウンロードできます。

ダウンロード indiatopo.json file

ファイルがダウンロードされたら、D3の場所に追加できます。サンプルフォーマットを以下に示します。

{"type":"Topology","transform":{"scale":[0.002923182318231823,0.0027427542754275428],
"translate":[68.1862,8.0765]},"objects":
{"states":{"type":"GeometryCollection",
"geometries":[{"type":"MultiPolygon","id":"AP","arcs":
[[[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,
25,26,27,28,29,30,31,32,33,34]],[[35,36,37,38,39,40,41]],[[42]],
[[43,44,45]],[[46]],[[47]],[[48]],[[49]],[[50]],[[51]],[[52,53]],
[[54]],[[55]],[[56]],[[57,58]],[[59]],[[60]],[[61,62,63]],[[64]],
[[65]],[[66]],[[67]],[[68]],[[69]],[[-41,70]],
[[71]],[[72]],[[73]],[[74]],[[75]]],
"properties":{"name":"Andhra Pradesh"}},{"type":"MultiPolygon",
"id":"AR","arcs":[[[76,77,78,79,80,81,82]]],
"properties":{"name":"Arunachal Pradesh"}},{"type":"MultiPolygon",
"id":"AS","arcs":[[[83,84,85,86,87,88,89,90,
91,92,93,94,95,96,97,98,99,100,101,102,103]],
[[104,105,106,107]],[[108,109]]], ......

........................................

Step 7 − Draw map −ここで、からデータを読み取ります indiatopo.json ファイルを作成し、マップを描画します。

d3.json("indiatopo.json", function(error, topology) {
   g.selectAll("path")
   .data(topojson.object(topology, topology.objects.states)
   .geometries)
   .enter()
   .append("path")
   .attr("class", function(d) { return "state" + d.id; })
   .attr("d", path)
});

ここでは、インドの地図（indiatopo.json）の座標を含むTopoJSONファイルを読み込みます。次に、グラフィック内のすべてのパス要素に作用することを宣言します。これは、g.selectAll（ "path"）として定義されます。次に、TopoJSONファイルから国を定義するデータを取得します。

.data(topojson.object(topology, topology.objects.states)
   .geometries)

最後に、を使用して表示するデータに追加します。 .enter() メソッドを使用して、そのデータをパス要素として追加します。 .append(“path”) 方法。