d3-delaunay D3.js 实战从点集到蜂窝状 Voronoi 地图【免费下载链接】d3-delaunayCompute the Voronoi diagram of a set of two-dimensional points.项目地址: https://gitcode.com/gh_mirrors/d3/d3-delaunay想要把一堆散乱的点变成漂亮的蜂窝状地图吗d3-delaunay就是为此而生的高性能 JavaScript 库它能快速计算二维点集的Voronoi 图又称泰森多边形、冯洛诺伊图。本文是一篇面向新手和普通用户的d3-delaunay 实战教程带你从点集出发一步步绘制出蜂窝状 Voronoi 地图并学会如何在 D3.js 项目中落地应用全程零基础也能轻松上手。什么是 Voronoi 图一张图看懂蜂窝结构 Voronoi 图的核心思想很简单给定一组二维点称为“站点”把平面划分成若干区域每个区域内任意位置到本区域站点的距离都小于到其他任意站点的距离。这些区域就像蜜蜂的蜂巢一样紧密贴合、互不重叠因此常被称为蜂窝状地图。从上图可以看到每个站点都被一个多边形“圈地”相邻多边形共享边界。这种几何结构在气象学降雨量区域划分、城市规划服务半径分析、游戏势力范围划分等领域应用极广也是数据可视化中非常出片的一种表现手法。为什么选 d3-delaunay速度与精度的完美平衡 ⚡d3-delaunay 是 D3.js 官方作者 Mike Bostock 主导开发的库它的底层依赖 Delaunator 的扫描线sweep算法计算速度极快几万个点也能在毫秒级内完成三角剖分。Voronoi 图正是通过连接 Delaunay 三角剖分中相邻三角形的外接圆心构造而来——先三角剖分再取外心连线两步即可得到蜂窝网格。在源码中三角剖分与 Voronoi 图分别由 src/delaunay.js 和 src/voronoi.js 两个模块实现入口统一从 src/index.js 导出Delaunay与Voronoi两个核心类结构清晰、易于扩展。最快上手方法三步画出你的第一个 Voronoi 地图使用d3-delaunay 绘制 Voronoi 图只需三步生成点集 → 三角剖分 → 渲染蜂窝。安装同样简单直接使用 npm 或 yarnnpm install d3-delaunay核心代码极其精简一个Delaunay.from(points).voronoi(bounds)就能拿到完整的蜂窝结构import {Delaunay} from d3-delaunay; // 1. 准备二维点集 const points Array.from({length: 200}, () [Math.random() * 960, Math.random() * 500]); // 2. 三角剖分并构造 Voronoi 图默认边界 960×500 const delaunay Delaunay.from(points); const voronoi delaunay.voronoi([0, 0, 960, 500]); // 3. 生成每个蜂窝单元的多边形路径 const cells [...voronoi.cellPolygons()];拿到cells后配合 D3.js 的path生成器即可渲染成 SVG。整个过程没有一行复杂几何计算d3-delaunay 帮你全部包办。Delaunay 三角剖分Voronoi 的孪生兄弟 在绘制 Voronoi 地图之前了解它的孪生结构Delaunay 三角剖分很有帮助。所谓 Delaunay 三角剖分就是用不重叠的三角形连接所有站点且每个三角形的外接圆内不包含其他站点——这是“最圆润”的三角网格也是生成 Voronoi 图的基础。如果给每个三角形填充渐变色还能做出极具视觉冲击力的效果让数据分布一目了然你甚至可以用delaunay.hull凸包顶点和renderHull快速勾勒点集的外轮廓看看站点整体的“势力范围”边界。核心 API 实战从蜂窝到边界裁剪 d3-delaunay 绘制 Voronoi 地图时最常用的三个方法分别是renderCell(i)渲染第i个站点对应的蜂窝多边形路径cellPolygons()一次性返回所有蜂窝单元的多边形坐标数组适合批量绘制或做鼠标交互renderBounds()渲染整个 Voronoi 图的边界矩形常用于给地图加外框。默认情况下 Voronoi 图会延伸到无穷远因此必须指定边界范围如[0, 0, 960, 500]蜂窝单元才会被裁剪成整齐的矩形铺满画布。裁剪逻辑在 src/voronoi.js 的_clip系列方法中实现内部还做了线段裁剪优化边界处理既快又稳。配合delaunay.find(x, y)还能实现鼠标悬停时高亮最近站点的交互效果让 Voronoi 地图动起来。创意玩法让蜂窝地图更好看 掌握了基础绘制后不妨试试这些创意玩法让Voronoi 蜂窝地图更惊艳光谱渐变填色按站点数值映射颜色每个蜂窝单元填充不同色彩形成红橙黄绿蓝的渐变光谱适合表达密度或热度数据艺术化应用Voronoi 风格早已被大量用于插画与海报设计几何分割本身就是一种高级美学。此外通过voronoi.neighbors(i)可以获取每个蜂窝的相邻单元非常适合做“邻居关系”分析比如地图着色四色问题、势力蔓延模拟等进阶玩法。总结从点集到蜂窝地图就这么简单 ✅回顾全文d3-delaunay把“点集 → Delaunay 三角剖分 → Voronoi 图”这条技术链路压缩到了几行代码之内Delaunay.from(points)建立剖分.voronoi(bounds)生成蜂窝再配合 D3.js 渲染即可输出漂亮的蜂窝状 Voronoi 地图。无论你是做数据可视化、游戏开发还是创意设计它都是你不可或缺的几何利器。现在就动手生成你的第一张蜂窝地图吧【免费下载链接】d3-delaunayCompute the Voronoi diagram of a set of two-dimensional points.项目地址: https://gitcode.com/gh_mirrors/d3/d3-delaunay创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 d3-delaunay + D3.js 实战：从点集到蜂窝状 Voronoi 地图
d3-delaunay D3.js 实战从点集到蜂窝状 Voronoi 地图【免费下载链接】d3-delaunayCompute the Voronoi diagram of a set of two-dimensional points.项目地址: https://gitcode.com/gh_mirrors/d3/d3-delaunay想要把一堆散乱的点变成漂亮的蜂窝状地图吗d3-delaunay就是为此而生的高性能 JavaScript 库它能快速计算二维点集的Voronoi 图又称泰森多边形、冯洛诺伊图。本文是一篇面向新手和普通用户的d3-delaunay 实战教程带你从点集出发一步步绘制出蜂窝状 Voronoi 地图并学会如何在 D3.js 项目中落地应用全程零基础也能轻松上手。什么是 Voronoi 图一张图看懂蜂窝结构 Voronoi 图的核心思想很简单给定一组二维点称为“站点”把平面划分成若干区域每个区域内任意位置到本区域站点的距离都小于到其他任意站点的距离。这些区域就像蜜蜂的蜂巢一样紧密贴合、互不重叠因此常被称为蜂窝状地图。从上图可以看到每个站点都被一个多边形“圈地”相邻多边形共享边界。这种几何结构在气象学降雨量区域划分、城市规划服务半径分析、游戏势力范围划分等领域应用极广也是数据可视化中非常出片的一种表现手法。为什么选 d3-delaunay速度与精度的完美平衡 ⚡d3-delaunay 是 D3.js 官方作者 Mike Bostock 主导开发的库它的底层依赖 Delaunator 的扫描线sweep算法计算速度极快几万个点也能在毫秒级内完成三角剖分。Voronoi 图正是通过连接 Delaunay 三角剖分中相邻三角形的外接圆心构造而来——先三角剖分再取外心连线两步即可得到蜂窝网格。在源码中三角剖分与 Voronoi 图分别由 src/delaunay.js 和 src/voronoi.js 两个模块实现入口统一从 src/index.js 导出Delaunay与Voronoi两个核心类结构清晰、易于扩展。最快上手方法三步画出你的第一个 Voronoi 地图使用d3-delaunay 绘制 Voronoi 图只需三步生成点集 → 三角剖分 → 渲染蜂窝。安装同样简单直接使用 npm 或 yarnnpm install d3-delaunay核心代码极其精简一个Delaunay.from(points).voronoi(bounds)就能拿到完整的蜂窝结构import {Delaunay} from d3-delaunay; // 1. 准备二维点集 const points Array.from({length: 200}, () [Math.random() * 960, Math.random() * 500]); // 2. 三角剖分并构造 Voronoi 图默认边界 960×500 const delaunay Delaunay.from(points); const voronoi delaunay.voronoi([0, 0, 960, 500]); // 3. 生成每个蜂窝单元的多边形路径 const cells [...voronoi.cellPolygons()];拿到cells后配合 D3.js 的path生成器即可渲染成 SVG。整个过程没有一行复杂几何计算d3-delaunay 帮你全部包办。Delaunay 三角剖分Voronoi 的孪生兄弟 在绘制 Voronoi 地图之前了解它的孪生结构Delaunay 三角剖分很有帮助。所谓 Delaunay 三角剖分就是用不重叠的三角形连接所有站点且每个三角形的外接圆内不包含其他站点——这是“最圆润”的三角网格也是生成 Voronoi 图的基础。如果给每个三角形填充渐变色还能做出极具视觉冲击力的效果让数据分布一目了然你甚至可以用delaunay.hull凸包顶点和renderHull快速勾勒点集的外轮廓看看站点整体的“势力范围”边界。核心 API 实战从蜂窝到边界裁剪 d3-delaunay 绘制 Voronoi 地图时最常用的三个方法分别是renderCell(i)渲染第i个站点对应的蜂窝多边形路径cellPolygons()一次性返回所有蜂窝单元的多边形坐标数组适合批量绘制或做鼠标交互renderBounds()渲染整个 Voronoi 图的边界矩形常用于给地图加外框。默认情况下 Voronoi 图会延伸到无穷远因此必须指定边界范围如[0, 0, 960, 500]蜂窝单元才会被裁剪成整齐的矩形铺满画布。裁剪逻辑在 src/voronoi.js 的_clip系列方法中实现内部还做了线段裁剪优化边界处理既快又稳。配合delaunay.find(x, y)还能实现鼠标悬停时高亮最近站点的交互效果让 Voronoi 地图动起来。创意玩法让蜂窝地图更好看 掌握了基础绘制后不妨试试这些创意玩法让Voronoi 蜂窝地图更惊艳光谱渐变填色按站点数值映射颜色每个蜂窝单元填充不同色彩形成红橙黄绿蓝的渐变光谱适合表达密度或热度数据艺术化应用Voronoi 风格早已被大量用于插画与海报设计几何分割本身就是一种高级美学。此外通过voronoi.neighbors(i)可以获取每个蜂窝的相邻单元非常适合做“邻居关系”分析比如地图着色四色问题、势力蔓延模拟等进阶玩法。总结从点集到蜂窝地图就这么简单 ✅回顾全文d3-delaunay把“点集 → Delaunay 三角剖分 → Voronoi 图”这条技术链路压缩到了几行代码之内Delaunay.from(points)建立剖分.voronoi(bounds)生成蜂窝再配合 D3.js 渲染即可输出漂亮的蜂窝状 Voronoi 地图。无论你是做数据可视化、游戏开发还是创意设计它都是你不可或缺的几何利器。现在就动手生成你的第一张蜂窝地图吧【免费下载链接】d3-delaunayCompute the Voronoi diagram of a set of two-dimensional points.项目地址: https://gitcode.com/gh_mirrors/d3/d3-delaunay创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考