作成者Observable

外観

パス ​

地理的パスジェネレーター、geoPathは、与えられたGeoJSONジオメトリまたはフィーチャオブジェクトを受け取り、SVGパスのデータ文字列を生成するか、Canvasにレンダリングします。パスは投影法または変換で使用できます。または、平面ジオメトリをCanvasまたはSVGに直接レンダリングするために使用できます。

geoPath(projection, context) ​

ソースコード · デフォルト設定で新しい地理的パスジェネレーターを作成します。projectionが指定されている場合、現在の投影法を設定します。contextが指定されている場合、現在のコンテキストを設定します。

js
const path = d3.geoPath(projection); // for SVG
js
const path = d3.geoPath(projection, context); // for canvas

path(object, ...arguments) ​

ソースコード · GeoJSONフィーチャまたはジオメトリオブジェクトのいずれかである指定されたobjectをレンダリングします。

  • Point - 単一の位置
  • MultiPoint - 位置の配列
  • LineString - 連続した線を作る位置の配列
  • MultiLineString - 複数の線を作る位置の配列の配列
  • Polygon - ポリゴン（穴がある場合もある）を形成する位置の配列の配列
  • MultiPolygon - 複数のポリゴンを形成する多次元配列の位置
  • GeometryCollection - ジオメトリオブジェクトの配列
  • Feature - 上記のジオメトリオブジェクトのいずれかを含むフィーチャ
  • FeatureCollection - フィーチャオブジェクトの配列

地球の輪郭のレンダリングに役立つSphere型もサポートされています。球には座標がありません。追加のargumentsはpointRadiusアクセサーに渡されます。

複数のフィーチャを表示するには、それらをフィーチャコレクションにまとめます。

js
svg.append("path")
    .datum({type: "FeatureCollection", features: features})
    .attr("d", d3.geoPath());

または、複数のパス要素を使用します。

js
svg.selectAll()
  .data(features)
  .join("path")
    .attr("d", d3.geoPath());

個別のパス要素は、通常、単一のパス要素よりも遅くなります。しかし、個別のパス要素は、スタイルとインタラクション（例：クリックまたはマウスオーバー）に役立ちます。Canvasレンダリング（path.contextを参照）は通常SVGよりも高速ですが、スタイルとインタラクションの実装にはより多くの労力が必要です。

path.area(object) ​

ソースコード · 指定されたGeoJSON objectの投影された平面面積（通常は平方ピクセル）を返します。

js
path.area(california) // 17063.1671837991 px²

Point、MultiPoint、LineString、MultiLineStringジオメトリの面積はゼロです。PolygonとMultiPolygonジオメトリの場合、このメソッドは最初に外部リングの面積を計算し、次に内部の穴の面積を引きます。このメソッドは、投影法によって実行されるクリッピングをすべて観察します。projection.clipAngleとprojection.clipExtentを参照してください。これはgeoAreaの平面的な等価物です。

path.bounds(object) ​

ソースコード · 指定されたGeoJSON objectの投影された平面バウンディングボックス（通常はピクセル単位）を返します。

js
path.bounds(california) // [[18.48513821663947, 159.95146883594333], [162.7651668852596, 407.09641570706725]]

バウンディングボックスは、二次元配列で表されます：[[x₀, y₀], [x₁, y₁]]。ここで、x₀は最小のx座標、y₀は最小のy座標、x₁は最大のx座標、y₁は最大のy座標です。これは、特定のフィーチャへのズームインなどに便利です。（投影された平面座標では、最小緯度は通常最大のy値であり、最大緯度は通常最小のy値です。）このメソッドは、投影法によって実行されるクリッピングをすべて観察します。projection.clipAngleとprojection.clipExtentを参照してください。これはgeoBoundsの平面的な等価物です。

path.centroid(object) ​

ソースコード · 指定されたGeoJSON objectの投影された平面重心（通常はピクセル単位）を返します。

js
path.centroid(california) // [82.08679434495191, 288.14204870673404]

これは、州や郡の境界のラベル付け、またはシンボルマップの表示などに便利です。たとえば、非連続カルtogramは、各州をその重心の周りにスケーリングすることがあります。このメソッドは、投影法によって実行されるクリッピングをすべて観察します。projection.clipAngleとprojection.clipExtentを参照してください。これはgeoCentroidの平面的な等価物です。

path.digits(digits) ​

ソースコード · digitsが指定されている場合（非負の数として）、SVGパス文字列で生成される座標の小数点以下の桁数を設定します。

js
const path = d3.geoPath().digits(3);

projectionが指定されていない場合、現在の桁数を返します。デフォルトは3です。

js
path.digits() // 3

このオプションは、関連付けられたcontextがnullの場合（この円弧ジェネレーターがパスデータを生成するために使用される場合）のみ適用されます。

path.measure(object) ​

ソースコード · 指定されたGeoJSON objectの投影された平面の長さ（通常はピクセル単位）を返します。

js
path.measure(california) // 825.7124297512761

PointとMultiPointジオメトリの長さはゼロです。PolygonとMultiPolygonジオメトリの場合、このメソッドはすべてのリングの長さの合計を計算します。このメソッドは、投影法によって実行されるクリッピングをすべて観察します。projection.clipAngleとprojection.clipExtentを参照してください。これはgeoLengthの平面的な等価物です。

path.projection(projection) ​

ソースコード · projectionが指定されている場合、現在の投影法を指定された投影法に設定します。

js
const path = d3.geoPath().projection(d3.geoAlbers());

projectionが指定されていない場合、現在の投影法を返します。

js
path.projection() // a d3.geoAlbers instance

投影法はデフォルトでnullです。これは恒等変換を表します。入力ジオメトリは投影されず、生の座標で直接レンダリングされます。これは、事前に投影されたジオメトリの高速レンダリング、または正距円筒図法の高速レンダリングに役立ちます。

指定された投影法は、通常、D3の組み込みの地理投影法のいずれかですが、projection.stream関数を公開するオブジェクトであれば何でも使用できます。これにより、カスタム投影法の使用が可能になります。任意の幾何変換の例については、D3の変換を参照してください。

path.context(context) ​

ソースコード · contextが指定されている場合、現在のレンダリングコンテキストを設定し、パスジェネレータを返します。

js
const context = canvas.getContext("2d");
const path = d3.geoPath().context(context);

contextがnullの場合、パスジェネレータはSVGパスの文字列を返します。contextがnull以外の場合、パスジェネレータは代わりに、指定されたコンテキストのメソッドを呼び出してジオメトリをレンダリングします。コンテキストは、CanvasRenderingContext2D APIの以下のサブセットを実装する必要があります。

  • context.beginPath()
  • context.moveTo(x, y)
  • context.lineTo(x, y)
  • context.arc(x, y, radius, startAngle, endAngle)
  • context.closePath()

contextが指定されていない場合、現在のレンダリングコンテキスト（デフォルトはnull）を返します。d3-pathも参照してください。

path.pointRadius(radius) ​

ソースコード · radiusが指定されている場合、PointおよびMultiPointジオメトリを表示するために使用される半径を指定された数値に設定します。

js
const path = d3.geoPath().pointRadius(10);

radiusが指定されていない場合、現在の半径アクセッサを返します。

js
path.pointRadius() // 10

半径アクセッサのデフォルト値は4.5です。半径は一般的に数値定数として指定されますが、フィーチャごとに計算される関数として指定することもできます。この関数は、パスジェネレータに渡される引数を受け取ります。たとえば、GeoJSONデータに追加のプロパティがある場合、半径関数内でこれらのプロパティにアクセスして点のサイズを変更できます。または、より柔軟性を高めるために、シンボルと投影法を使用できます。