by Observable

外觀

路徑 ​

地理路徑產生器 geoPath，採用給定的 GeoJSON 幾何或特徵物件，並產生 SVG 路徑資料字串，或 渲染到畫布。路徑可與 投影 或 轉換 搭配使用，或用於將平面幾何直接渲染到畫布或 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) ​

原始碼 · 渲染給定的 object，它可以是任何 GeoJSON 特徵或幾何物件

  • Point - 單一位置
  • MultiPoint - 位置陣列
  • LineString - 形成連續線條的位置陣列
  • MultiLineString - 一個陣列，包含多個線段位置陣列
  • Polygon - 一個陣列，包含多個多邊形位置陣列（可能帶有孔洞）
  • MultiPolygon - 一個多維陣列，包含多個多邊形位置
  • GeometryCollection - 一個陣列，包含多個幾何物件
  • Feature - 一個特徵，包含上述幾何物件之一
  • FeatureCollection - 一個陣列，包含多個特徵物件

類型 Sphere 也受支援，這對於繪製地球輪廓很有用；球體沒有座標。任何額外的 參數 都會傳遞給 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());

分開的路徑元素通常比單一路徑元素慢。但是，不同的路徑元素對於樣式和互動（例如，按一下或滑鼠移入）很有用。畫布渲染（請參閱 path.context）通常比 SVG 快，但需要更多精力來實作樣式和互動。

path.area(object) ​

原始碼 · 傳回指定 GeoJSON object 的投影平面區域（通常以平方像素為單位）。

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

點、多點、線段和多線段幾何形狀的面積為零。對於多邊形和多邊形幾何形狀，此方法首先計算外環的面積，然後減去任何內部孔洞的面積。此方法會觀察 投影 執行的任何裁剪；請參閱 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]

這對於標示州或郡界線，或顯示符號地圖來說非常方便。例如，非連續地圖 可以根據每個州的質心來縮放各州。此方法會觀察 投影 執行的任何裁剪；請參閱 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

點和多點幾何的長度為零。對於多邊形和多邊形幾何，此方法會計算所有環的總長度。此方法會觀察 投影 執行的任何裁剪；請參閱 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 內建的地理投影之一；不過，任何公開投影.stream函式的物件都可以使用，讓您可以使用自訂投影。請參閱 D3 的轉換，以取得更多任意幾何轉換的範例。

路徑.context(內容) ​

來源 · 如果指定內容，會設定目前的呈現內容並傳回路徑產生器。

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

如果內容為 null，則路徑產生器會傳回 SVG 路徑字串；如果內容不為 null，路徑產生器會呼叫指定內容上的方法來呈現幾何。內容必須實作CanvasRenderingContext2D API的下列子集

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

如果未指定內容，會傳回目前的呈現內容，預設為 null。另請參閱d3-path。

路徑.pointRadius(半徑) ​

來源 · 如果指定半徑，會將用於顯示點和多點幾何的半徑設定為指定的數字。

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

如果未指定半徑，會傳回目前的半徑存取器。

js
path.pointRadius() // 10

半徑存取器的預設值為 4.5。雖然半徑通常指定為數字常數，但也可以指定為每個特徵計算的函式，傳遞給路徑產生器的任何引數。例如，如果您的 GeoJSON 資料有其他屬性，您可以在半徑函式中存取這些屬性，以改變點的大小；或者，您可以使用符號和投影，以獲得更大的彈性。