d3-contour 实战用 marching squares 在矩形数值网格上计算等高线与核密度估计【免费下载链接】d3Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:项目地址: https://gitcode.com/GitHub_Trending/d3/d3本篇技术指南基于 d3 官方文档docs/d3-contour.md及其两篇子文档Contours、Density estimation完整覆盖d3-contour模块的两大核心能力对矩形数值网格应用 marching squares 算法生成 GeoJSON MultiPolygon 等高线以及基于快速二维核密度估计KDE的点云密度等高线。读完后你将掌握contours()与contourDensity()全部 API 的参数、取值与默认值理解输入网格的坐标映射规则values[i jn]与平面坐标 ⟨i 0.5, j 0.5⟩并能结合geoPath/geoIdentity将等高线渲染到 SVG。模块定位把数值网格变成 GeoJSON 多边形d3-contour模块的核心作用是对一个矩形数值网格应用 marching squares移动方格算法计算等高线多边形。官方文档中的示例图展示了新西兰奥克兰的 Maungawhau又称 Mt. Eden火山的等高线地形数据来自仓库内的真实数据集文档中的示例由 PlotRender 组件 驱动数据加载逻辑见 volcano.data.js它读取 volcano.json经核实该 JSON 结构为{ width: 87, height: 61, values: [...] }values长度 5307即 87 × 61与文档示例中传入Plot.contour的width/height选项完全对应在 d3 主包中该模块通过 src/index.js 中的export * from d3-contour统一导出依赖版本见 package.jsond3 7.9.0 依赖d3-contour: ^4.0.2。文档中的官方示例用法Observable Plot 风格如下等价于先用d3.contours()生成多边形再传给图形库渲染Plot.contour(volcano.values, { width: volcano.width, // 87 height: volcano.height, // 61 fill: Plot.identity, stroke: black, interval: 5 // 阈值间隔 })两个子主题的完整 API 文档分别在 Contours 子文档 和 Density estimation 子文档下文完整继承并展开这两篇文档的全部内容。等高线生成器 contours()contours() 与 contours(values)contours()以默认设置构造一个新的等高线生成器const contours d3.contours() .size([width, height]) .thresholds([0, 1, 2, 3, 4]);调用contours(values)时对给定的values数组计算等高线返回一个GeoJSON MultiPolygon geometry 对象数组。每个 geometry 对象表示输入值大于或等于对应阈值值的区域该阈值通过geometry.value暴露。输入网格的坐标映射规则这是正确使用本模块的关键直接来自子文档values必须是长度为n × m的数组其中[n, m]是生成器的size每个values[i jn]表示位置 ⟨i, j⟩ 处的值多边形采用平面坐标planar coordinates网格元素 i jn 对应坐标 ⟨i 0.5, j 0.5⟩。子文档给出的一个完整可运行示例对 Goldstein–Price 函数全局优化测试函数在 -2 ≤ x ≤ 2、-2 ≤ y ≤ 1 范围内采样构造 256×256 网格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); } }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)); }注意循环中i和j都从0.5开始而非 0这正是网格中心点坐标 ⟨i 0.5, j 0.5⟩ 约定的体现。渲染交给 geoPath 与 geoIdentity由于等高线多边形是标准 GeoJSON可以借助常规工具进行变换与显示。典型做法是把返回的 geometry 传给geoPath参见 d3-geo/path.md并将关联的投影设为null或 geoIdentity平面坐标无需投影变换geoIdentity见 projection.md 中## geoIdentity()一节。这意味着等高线结果还能进一步被投影变换与拼接如文档提及的 geoProject、geoStitch属于 d3-geo-projection 生态例如把全球地表温度 GeoTIFF 的等高线显示在 Natural Earth 投影中。此外文档还列出两类典型应用场景加载 GeoTIFF 地表温度生成全球等高线对含噪声的灰度 PNG如云量做模糊后生成平滑等高线——模糊步骤可用 d3 生态中的d3.blur配合网格数据即 0–1 灰度值。生成器配置方法contours.contour(values, threshold)— 计算单条等高线返回一个 MultiPolygon geometry 对象表示输入值大于或等于给定threshold的区域geometry.value即该阈值。输入网格的values[i jn]映射规则与contours(values)相同。适合只关心某一条等值线如温度 ≥ 20°C 的区域的场景避免计算全部阈值。contours.size(size)— 设置输入values网格的预期尺寸。size为数组[n, m]n是列数m是行数二者必须为正整数不传参时返回当前 size默认 [1, 1]。火山示例中即为.size([87, 61])。contours.smooth(smooth)— 设置是否对生成的等高线多边形做线性插值平滑。不传参时返回当前平滑标志默认 true。关闭后多边形边会更贴近网格的阶梯状折线开启后在相邻单元格值之间按比例内插交点轮廓更光滑。contours.thresholds(thresholds)— 设置阈值生成器函数或数组不传参时返回当前生成器默认实现 Sturges 公式thresholdSturges参见 d3-array/bin.md。阈值语义规则阈值定义为数组 [x0, x1, …]第一条等高线对应值 ≥ x0 的区域第二条对应值 ≥ x1 的区域依此类推因此每个阈值恰好生成一个 MultiPolygon geometry 对象阈值通过geometry.value暴露若传入的是一个数量count而非数组则对输入值的 extent 均匀划分为约count个区间生成阈值基于 ticks 生成好看的刻度值。密度估计 contourDensity()等高线还能展示点云的估计密度这对避免大数据集上的过度绘图overplotting很有用——散点图在数万点时几乎糊成一片而密度等高线能用嵌套的若干层多边形清晰表达分布形态。contourDensity方法实现了快速的二维核密度估计先用高斯核把散点泼到规则网格上得到密度值矩阵再对该矩阵走与上文相同的 marching squares 流程。典型示例Old Faithful老忠实间歇泉空闲时长与喷发时长的关系散点以及 53,940 颗钻石重量与价格的密度等高线——后者正是点云密度代替散点的动机所在。contourDensity() 与 density(data)contourDensity()以默认设置构造新的密度估计器。调用density(data)对给定的data数组估计密度等高线返回 GeoJSON MultiPolygon geometry 数组每个 geometry 表示估计的每平方像素点数大于或等于对应阈值值的区域geometry.value为该阈值返回的 geometry 通常传给geoPath显示投影使用null或geoIdentity每个数据点的 x/y 坐标由density.x与density.y计算density.weight指定每个点的相对贡献默认 1生成的等高线仅在估计器定义的 size 范围内准确——超出 size 边界的点会被截断处理。估计器配置方法density.x(x)— 设置 x 坐标访问器不传参返回当前访问器默认function x(d) { return d[0]; }density.y(y)— 设置 y 坐标访问器不传参返回当前访问器默认function y(d) { return d[1]; }即默认输入格式是[x, y]二元组数组若数据是对象需显式传入d d.latitude之类的访问器。density.weight(weight)— 设置点权重访问器默认function weight() { return 1; }density.size(size)— 设置估计器的尺寸边界size为[width, height]其中width是最大 x 值、height是最大 y 值不传参返回当前 size默认 [960, 500]。同样地密度等高线只在定义的 size 范围内准确因此 size 应覆盖数据的实际取值范围例如钻石数据的[maxCarat, maxPrice]。density.cellSize(cellSize)— 设置底层分箱网格中单个单元格的大小必须为正整数不传参返回当前值默认 4。两个重要特性单元格大小会向下取整到最近的 2 的幂更小的单元格产生更精细的多边形但计算代价更高——这是精度与性能的权衡旋钮。density.thresholds(thresholds)— 设置阈值生成器函数或数组不传参返回当前生成器默认生成约 20 个好看的密度阈值。语义与contours.thresholds一致每个阈值恰好对应一个 MultiPolygongeometry.value为阈值第一个阈值 x0 通常应大于零密度值非负从 0 开始会生成覆盖全域的无意义外环。若传入数量count而非数组则生成约count个均匀间隔的好看阈值基于 ticks。density.bandwidth(bandwidth)— 设置高斯核的带宽标准差不传参返回当前带宽默认 20.4939…。指定值会被舍入到该实现当前支持的最接近值且必须非负。带宽控制密度场的平滑程度带宽越小密度估计越贴合局部点簇越大越平滑。density.contours(data)— 返回一个contour(value)函数可在给定数据上计算任意单条密度等高线而无需重算底层网格返回的contour函数还暴露contour.max值表示网格中的最大密度。适合做交互式调整预计算一次网格然后按用户选择的密度值反复取单条等高线。小结从网格到图形的完整链路综合两篇子文档d3-contour的使用路径可以归纳为一条固定链路准备数据要么直接拥有n × m的平面数值网格按values[i jn]排布要么从点云出发用contourDensity先估计出密度网格配置生成器size声明网格规模contours或数据域densitythresholds决定输出多边形层数默认分别为 Sturges 公式与约 20 个好看阈值smooth控制插值平滑cellSize/bandwidth控制密度估计的分辨率与核宽生成 GeoJSONcontours(values)/density(data)输出 MultiPolygon 数组每个对象带value字段标识阈值contour(values, t)/density.contours(data)输出单条等高线渲染把 geometry 交给geoPath投影取null或geoIdentity转成 SVG path即可填充、描边或动画化。由于输出是标准 GeoJSON等高线还能无缝接入d3-geo的投影、变换与拼接工具链从平面图表扩展到地理可视化。本文所有 API 细节、默认值与坐标约定均以仓库中 d3-contour 主文档、Contours 子文档 与 Density estimation 子文档 为准适用前提为 d3 7.9.0依赖 d3-contour ^4.0.2。【免费下载链接】d3Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:项目地址: https://gitcode.com/GitHub_Trending/d3/d3创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 d3-contour 实战：用 marching squares 在矩形数值网格上计算等高线与核密度估计
d3-contour 实战用 marching squares 在矩形数值网格上计算等高线与核密度估计【免费下载链接】d3Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:项目地址: https://gitcode.com/GitHub_Trending/d3/d3本篇技术指南基于 d3 官方文档docs/d3-contour.md及其两篇子文档Contours、Density estimation完整覆盖d3-contour模块的两大核心能力对矩形数值网格应用 marching squares 算法生成 GeoJSON MultiPolygon 等高线以及基于快速二维核密度估计KDE的点云密度等高线。读完后你将掌握contours()与contourDensity()全部 API 的参数、取值与默认值理解输入网格的坐标映射规则values[i jn]与平面坐标 ⟨i 0.5, j 0.5⟩并能结合geoPath/geoIdentity将等高线渲染到 SVG。模块定位把数值网格变成 GeoJSON 多边形d3-contour模块的核心作用是对一个矩形数值网格应用 marching squares移动方格算法计算等高线多边形。官方文档中的示例图展示了新西兰奥克兰的 Maungawhau又称 Mt. Eden火山的等高线地形数据来自仓库内的真实数据集文档中的示例由 PlotRender 组件 驱动数据加载逻辑见 volcano.data.js它读取 volcano.json经核实该 JSON 结构为{ width: 87, height: 61, values: [...] }values长度 5307即 87 × 61与文档示例中传入Plot.contour的width/height选项完全对应在 d3 主包中该模块通过 src/index.js 中的export * from d3-contour统一导出依赖版本见 package.jsond3 7.9.0 依赖d3-contour: ^4.0.2。文档中的官方示例用法Observable Plot 风格如下等价于先用d3.contours()生成多边形再传给图形库渲染Plot.contour(volcano.values, { width: volcano.width, // 87 height: volcano.height, // 61 fill: Plot.identity, stroke: black, interval: 5 // 阈值间隔 })两个子主题的完整 API 文档分别在 Contours 子文档 和 Density estimation 子文档下文完整继承并展开这两篇文档的全部内容。等高线生成器 contours()contours() 与 contours(values)contours()以默认设置构造一个新的等高线生成器const contours d3.contours() .size([width, height]) .thresholds([0, 1, 2, 3, 4]);调用contours(values)时对给定的values数组计算等高线返回一个GeoJSON MultiPolygon geometry 对象数组。每个 geometry 对象表示输入值大于或等于对应阈值值的区域该阈值通过geometry.value暴露。输入网格的坐标映射规则这是正确使用本模块的关键直接来自子文档values必须是长度为n × m的数组其中[n, m]是生成器的size每个values[i jn]表示位置 ⟨i, j⟩ 处的值多边形采用平面坐标planar coordinates网格元素 i jn 对应坐标 ⟨i 0.5, j 0.5⟩。子文档给出的一个完整可运行示例对 Goldstein–Price 函数全局优化测试函数在 -2 ≤ x ≤ 2、-2 ≤ y ≤ 1 范围内采样构造 256×256 网格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); } }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)); }注意循环中i和j都从0.5开始而非 0这正是网格中心点坐标 ⟨i 0.5, j 0.5⟩ 约定的体现。渲染交给 geoPath 与 geoIdentity由于等高线多边形是标准 GeoJSON可以借助常规工具进行变换与显示。典型做法是把返回的 geometry 传给geoPath参见 d3-geo/path.md并将关联的投影设为null或 geoIdentity平面坐标无需投影变换geoIdentity见 projection.md 中## geoIdentity()一节。这意味着等高线结果还能进一步被投影变换与拼接如文档提及的 geoProject、geoStitch属于 d3-geo-projection 生态例如把全球地表温度 GeoTIFF 的等高线显示在 Natural Earth 投影中。此外文档还列出两类典型应用场景加载 GeoTIFF 地表温度生成全球等高线对含噪声的灰度 PNG如云量做模糊后生成平滑等高线——模糊步骤可用 d3 生态中的d3.blur配合网格数据即 0–1 灰度值。生成器配置方法contours.contour(values, threshold)— 计算单条等高线返回一个 MultiPolygon geometry 对象表示输入值大于或等于给定threshold的区域geometry.value即该阈值。输入网格的values[i jn]映射规则与contours(values)相同。适合只关心某一条等值线如温度 ≥ 20°C 的区域的场景避免计算全部阈值。contours.size(size)— 设置输入values网格的预期尺寸。size为数组[n, m]n是列数m是行数二者必须为正整数不传参时返回当前 size默认 [1, 1]。火山示例中即为.size([87, 61])。contours.smooth(smooth)— 设置是否对生成的等高线多边形做线性插值平滑。不传参时返回当前平滑标志默认 true。关闭后多边形边会更贴近网格的阶梯状折线开启后在相邻单元格值之间按比例内插交点轮廓更光滑。contours.thresholds(thresholds)— 设置阈值生成器函数或数组不传参时返回当前生成器默认实现 Sturges 公式thresholdSturges参见 d3-array/bin.md。阈值语义规则阈值定义为数组 [x0, x1, …]第一条等高线对应值 ≥ x0 的区域第二条对应值 ≥ x1 的区域依此类推因此每个阈值恰好生成一个 MultiPolygon geometry 对象阈值通过geometry.value暴露若传入的是一个数量count而非数组则对输入值的 extent 均匀划分为约count个区间生成阈值基于 ticks 生成好看的刻度值。密度估计 contourDensity()等高线还能展示点云的估计密度这对避免大数据集上的过度绘图overplotting很有用——散点图在数万点时几乎糊成一片而密度等高线能用嵌套的若干层多边形清晰表达分布形态。contourDensity方法实现了快速的二维核密度估计先用高斯核把散点泼到规则网格上得到密度值矩阵再对该矩阵走与上文相同的 marching squares 流程。典型示例Old Faithful老忠实间歇泉空闲时长与喷发时长的关系散点以及 53,940 颗钻石重量与价格的密度等高线——后者正是点云密度代替散点的动机所在。contourDensity() 与 density(data)contourDensity()以默认设置构造新的密度估计器。调用density(data)对给定的data数组估计密度等高线返回 GeoJSON MultiPolygon geometry 数组每个 geometry 表示估计的每平方像素点数大于或等于对应阈值值的区域geometry.value为该阈值返回的 geometry 通常传给geoPath显示投影使用null或geoIdentity每个数据点的 x/y 坐标由density.x与density.y计算density.weight指定每个点的相对贡献默认 1生成的等高线仅在估计器定义的 size 范围内准确——超出 size 边界的点会被截断处理。估计器配置方法density.x(x)— 设置 x 坐标访问器不传参返回当前访问器默认function x(d) { return d[0]; }density.y(y)— 设置 y 坐标访问器不传参返回当前访问器默认function y(d) { return d[1]; }即默认输入格式是[x, y]二元组数组若数据是对象需显式传入d d.latitude之类的访问器。density.weight(weight)— 设置点权重访问器默认function weight() { return 1; }density.size(size)— 设置估计器的尺寸边界size为[width, height]其中width是最大 x 值、height是最大 y 值不传参返回当前 size默认 [960, 500]。同样地密度等高线只在定义的 size 范围内准确因此 size 应覆盖数据的实际取值范围例如钻石数据的[maxCarat, maxPrice]。density.cellSize(cellSize)— 设置底层分箱网格中单个单元格的大小必须为正整数不传参返回当前值默认 4。两个重要特性单元格大小会向下取整到最近的 2 的幂更小的单元格产生更精细的多边形但计算代价更高——这是精度与性能的权衡旋钮。density.thresholds(thresholds)— 设置阈值生成器函数或数组不传参返回当前生成器默认生成约 20 个好看的密度阈值。语义与contours.thresholds一致每个阈值恰好对应一个 MultiPolygongeometry.value为阈值第一个阈值 x0 通常应大于零密度值非负从 0 开始会生成覆盖全域的无意义外环。若传入数量count而非数组则生成约count个均匀间隔的好看阈值基于 ticks。density.bandwidth(bandwidth)— 设置高斯核的带宽标准差不传参返回当前带宽默认 20.4939…。指定值会被舍入到该实现当前支持的最接近值且必须非负。带宽控制密度场的平滑程度带宽越小密度估计越贴合局部点簇越大越平滑。density.contours(data)— 返回一个contour(value)函数可在给定数据上计算任意单条密度等高线而无需重算底层网格返回的contour函数还暴露contour.max值表示网格中的最大密度。适合做交互式调整预计算一次网格然后按用户选择的密度值反复取单条等高线。小结从网格到图形的完整链路综合两篇子文档d3-contour的使用路径可以归纳为一条固定链路准备数据要么直接拥有n × m的平面数值网格按values[i jn]排布要么从点云出发用contourDensity先估计出密度网格配置生成器size声明网格规模contours或数据域densitythresholds决定输出多边形层数默认分别为 Sturges 公式与约 20 个好看阈值smooth控制插值平滑cellSize/bandwidth控制密度估计的分辨率与核宽生成 GeoJSONcontours(values)/density(data)输出 MultiPolygon 数组每个对象带value字段标识阈值contour(values, t)/density.contours(data)输出单条等高线渲染把 geometry 交给geoPath投影取null或geoIdentity转成 SVG path即可填充、描边或动画化。由于输出是标准 GeoJSON等高线还能无缝接入d3-geo的投影、变换与拼接工具链从平面图表扩展到地理可视化。本文所有 API 细节、默认值与坐标约定均以仓库中 d3-contour 主文档、Contours 子文档 与 Density estimation 子文档 为准适用前提为 d3 7.9.0依赖 d3-contour ^4.0.2。【免费下载链接】d3Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:项目地址: https://gitcode.com/GitHub_Trending/d3/d3创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考