D3

轮廓多边形 ​

🌐 Contour polygons

对于每个阈值，等高线生成器构建一个GeoJSON MultiPolygon几何对象，表示输入值大于或等于该阈值的区域。几何体使用平面坐标，其中⟨i + 0.5, j + 0.5⟩对应于输入值数组中的元素 i + jn i。

以下示例加载了地表温度的 GeoTIFF 文件，另一个示例模糊了嘈杂的单色 PNG 图片以生成平滑的云量轮廓：

🌐 Here is an example that loads a GeoTIFF of surface temperatures, and another that blurs a noisy monochrome PNG to produce smooth contours of cloud fraction:

由于轮廓多边形是 GeoJSON，你可以使用标准工具对它们进行转换和显示；例如，参见 geoPath、geoProject 和 geoStitch。这里显示了上述地表温度轮廓在自然地球投影下的情况：

🌐 Since the contour polygons are GeoJSON, you can transform and display them using standard tools; see geoPath, geoProject and geoStitch, for example. Here the above contours of surface temperature are displayed in the Natural Earth projection:

等高线图也可以通过采样来可视化连续函数。这里是 Goldstein–Price 函数（全局优化的测试函数）和一个 sin(x + y)sin(x - y) 的炫酷动画：

🌐 Contour plots can also visualize continuous functions by sampling. Here is the Goldstein–Price function (a test function for global optimization) and a trippy animation of sin(x + y)sin(x - y):

contours() ​

示例 · 来源 · 使用默认设置构建一个新的轮廓生成器。

js
const contours = d3.contours()
    .size([width, height])
    .thresholds([0, 1, 2, 3, 4]);

轮廓(值) ​

🌐 contours(values)

来源 · 计算给定 values 数组的轮廓，返回一个 GeoJSON MultiPolygon 几何对象 数组。

js
const polygons = contours(grid);

每个几何对象表示输入 值 大于或等于相应阈值的区域；每个几何对象的阈值以 geometry.value的形式公开。

输入values必须是一个长度为 n×m 的数组，其中[n, m]是轮廓生成器的size；此外，每个 values[i + jn]必须表示位置⟨i, j⟩的值。例如，要为Goldstein–Price函数构建一个256×256的网格，其中 -2 ≤ x ≤ 2 且 -2 ≤ y ≤ 1:

js
var n = 256, m = 256, values = new Array(n * m);
for (var j = 0.5, k = 0; j < m; ++j) {
  for (var i = 0.5; i < n; ++i, ++k) {
    values[k] = goldsteinPrice(i / n * 4 - 2, 1 - j / m * 3);
  }
}
js
function goldsteinPrice(x, y) {
  return (1 + Math.pow(x + y + 1, 2) * (19 - 14 * x + 3 * x * x - 14 * y + 6 * x * x + 3 * y * y))
      * (30 + Math.pow(2 * x - 3 * y, 2) * (18 - 32 * x + 12 * x * x + 48 * y - 36 * x * y + 27 * y * y));
}

返回的几何对象通常传递给 geoPath 进行显示，同时使用 null 或 geoIdentity 作为关联的投影。

🌐 The returned geometry objects are typically passed to geoPath to display, using null or geoIdentity as the associated projection.

contours.contour(values, threshold) ​

Source · 计算单个等高线，返回一个 GeoJSON MultiPolygon 几何对象，表示输入 值 大于或等于给定 阈值 值 的区域；每个几何对象的阈值作为 geometry.value 暴露。

输入 values 必须是一个长度为 n×m 的数组，其中 [n, m] 是等高线生成器的 size；此外，每个 values[i + jn] 必须表示位置 ⟨i, j⟩ 的值。请参见 contours 了解示例。

轮廓.大小(size) ​

🌐 contours.size(size)

[来源]（https://github.com/d3/d3-contour/blob/main/src/contours.js） ·如果指定了大小，则将输入值网格的期望大小设置为[轮廓生成器]（#_contours），并返回轮廓生成器。大小指定为数组[ n，m]，其中 n 是网格中的列数， m 是行数;n和m必须是正整数。如果未指定大小，则返回当前大小，默认为[1， 1]。

轮廓.平滑(平滑) ​

🌐 contours.smooth(smooth)

示例 · 来源 · 如果指定了 smooth，则设置是否使用线性插值对生成的等高线多边形进行平滑。如果未指定 smooth，则返回当前的平滑标志，默认为 true。

轮廓.阈值(阈值) ​

🌐 contours.thresholds(thresholds)

来源 · 如果指定了 thresholds，则将阈值生成器设置为指定的函数或数组，并返回此等高线生成器。如果未指定 thresholds，则返回当前的阈值生成器，默认情况下实现 Sturges 公式。

阈值定义为一个值数组 [x0, x1, …]。第一个生成的等值线对应于输入值大于或等于 x0 的区域；第二个等值线对应于输入值大于或等于 x1 的区域，依此类推。因此，对于每个指定的阈值都有一个生成的 MultiPolygon 几何对象；阈值作为 geometry.value 暴露。

如果指定了一个count而不是thresholds数组，那么输入值的范围将被大致均匀地划分为count个区间；参见ticks。

🌐 If a count is specified instead of an array of thresholds, then the input values’ extent will be uniformly divided into approximately count bins; see ticks.