作者Observable

外观

路径 ​

地理路径生成器，geoPath，接受给定的 GeoJSON 几何或要素对象，并生成 SVG 路径数据字符串或渲染到画布。路径可与投影或变换一起使用，或用于将平面几何直接渲染到 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) ​

源代码 · 渲染给定的object，它可以是任何 GeoJSON 特征或几何对象

  • 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]

这对于对州或县边界进行标注或显示符号地图很有用。例如，非连续卡托格拉姆 可能会围绕其质心缩放每个州。此方法会观察投影执行的任何裁剪；参见projection.clipAngle 和 projection.clipExtent。这是geoCentroid 的平面等价物。

path.digits(digits) ​

源代码 · 如果指定了digits（作为非负数），则设置在 SVG 路径字符串中生成的坐标的小数位数。

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

如果未指定projection，则返回当前数字位数，默认为 3。

js
path.digits() // 3

此选项仅在关联的context 为空时适用，例如，当此弧生成器用于生成路径数据时。

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，表示恒等变换：输入几何不会被投影，而是直接以原始坐标渲染。这对于快速渲染预投影几何，或快速渲染等距投影很有用。

给定的projection 通常是 D3 的内置地理投影 之一；但是，任何公开projection.stream 函数的对象都可以使用，这使得使用自定义投影 成为可能。有关任意几何变换的更多示例，请参见 D3 的变换。

path.context(context) ​

源代码 · 如果指定了context，则设置当前渲染上下文并返回路径生成器。

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

如果context 为 null，则路径生成器 将返回一个 SVG 路径字符串；如果上下文不为空，则路径生成器将改为在指定的上下文中调用方法以渲染几何图形。上下文必须实现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 数据包含附加属性，您可以在半径函数中访问这些属性以改变点的大小；或者，您可以使用符号和投影以获得更大的灵活性。