d3-delaunay 安装与引入完全指南npm、CDN 与 ES Module 三种方式【免费下载链接】d3-delaunayCompute the Voronoi diagram of a set of two-dimensional points.项目地址: https://gitcode.com/gh_mirrors/d3/d3-delaunayd3-delaunay 是一个高性能计算二维点集 Voronoi 图泰森多边形与德劳内三角剖分的 JavaScript 几何库基于 Delaunator 扫描算法构建常用于数据可视化、地图聚合与游戏开发。本篇文章带来 d3-delaunay 安装与引入的完整教程覆盖 npm 安装、CDN 引入、ES Module 三种主流方式并附快速上手指南帮你 5 分钟跑通第一个 Voronoi 图应用。d3-delaunay 是什么d3-delaunay 的核心能力是输入一组二维坐标点快速计算其德劳内三角剖分Delaunay triangulation再通过连接相邻三角形的外接圆心构造出 Voronoi 图即泰森多边形。它只暴露Delaunay和Voronoi两个核心类导出入口在src/index.js依赖极轻仅需delaunator可以脱离完整 d3 全家桶独立使用。上图是 d3-delaunay 生成的德劳内三角剖分网格所有三角形紧密无重叠地铺满点集区域而下图则是由剖分网格对偶得到的 Voronoi 图每个多边形内的任意点到该点集中心比到其他中心更近。方式一npm 安装 d3-delaunay 的完整步骤推荐对使用 Webpack、Vite、Rollup 等构建工具的项目npm 安装 d3-delaunay 是最规范的方式。在项目根目录执行npm install d3-delaunay安装完成后在代码中按需导入import {Delaunay} from d3-delaunay; const points [[100, 100], [300, 200], [200, 400], [500, 300]]; const delaunay Delaunay.from(points); const voronoi delaunay.voronoi([0, 0, 600, 500]);几点提示包本身声明为 ESMtype: modulemain指向src/index.js天然支持 Tree-shaking。Delaunay.from(points)接受[[x, y], ...]二维数组内部会扁平化为Float64Array实现细节见src/delaunay.js中的flatArray/flatIterator。环境要求 Node.js ≥ 12见package.json的engines字段。方式二CDN 引入 d3-delaunay 的最快方法 ⚡不想配置构建工具直接通过 CDN 引入 d3-delaunay 即可。项目打包产物为dist/d3-delaunay.min.js见package.json的unpkg/jsdelivr字段在 HTML 中插入一行 script 标签script srchttps://unpkg.com/d3-delaunay6/script加载后库会挂载为全局对象d3直接使用d3.Delaunayconst delaunay d3.Delaunay.from([[0, 0], [100, 0], [50, 80]]); const voronoi delaunay.voronoi([-10, -10, 110, 100]); console.log(voronoi.cellPolygon(0));这种方式适合快速原型、单页演示或 CDN 直出的静态页面无需任何安装步骤。方式三ES Module 引入 d3-delaunay 的现代写法 ✨在不使用打包工具、原生支持 ES Module 的浏览器中可以用 jsDelivr 的esm端点直接以模块方式引入script typemodule import {Delaunay} from https://cdn.jsdelivr.net/npm/d3-delaunay6/esm; const voronoi Delaunay.from([[50, 50], [200, 100], [120, 220]]).voronoi([0, 0, 300, 300]); document.body.insertAdjacentHTML(beforeend, svg width300 height300path d${voronoi.render()}//svg); /script此外若想阅读源码或本地构建也可以克隆仓库后直接使用src/index.js源码git clone https://gitcode.com/gh_mirrors/d3/d3-delaunay仓库内src/目录包含delaunay.js、voronoi.js、path.js、polygon.js四个源码文件结构清晰非常适合学习几何算法实现。三种 d3-delaunay 引入方式对比表 引入方式适用场景优点注意事项npm 安装工程化项目Vite/Webpack可 Tree-shaking、版本可控需 Node ≥ 12CDN 引入静态页、快速演示零安装、即插即用依赖全局d3对象ES Module现代浏览器原生模块语法统一、按需加载需支持script typemoduled3-delaunay 快速上手绘制第一个 Voronoi 图 安装完成后最直观的体验就是把 Voronoi 图画到 Canvas 上。Voronoi类源码见src/voronoi.js提供了丰富的渲染方法const canvas document.querySelector(canvas); const context canvas.getContext(2d); const voronoi Delaunay.from(points).voronoi([0, 0, canvas.width, canvas.height]); voronoi.render(context); // 绘制所有泰森多边形边 voronoi.renderBounds(context); // 绘制边界框 voronoi.renderCell(0, context); // 绘制第 0 号单元两个实用技巧不传context时render/renderCell会返回 SVG path 字符串见src/path.js可直接嵌入path d...对 SVG 场景非常友好。用voronoi.find(x, y)可查询距离某点最近的数据点索引voronoi.contains(i, x, y)可判断坐标是否落在某单元内是实现点选交互的利器。如上图所示对每个 Voronoi 单元填充不同颜色就能做出精美的彩色蜂窝效果这也是数据可视化中常见的展示手法。d3-delaunay 安装常见问题FAQ❓Q1Node 版本过低导致安装失败怎么办d3-delaunay 要求 Node ≥ 12。可通过node -v检查版本或使用 nvm 升级到 LTS 版本后重试。Q2需要安装完整的 d3 吗不需要。d3-delaunay 是独立包只依赖delaunator可以单独使用也可以与 d3-scale、d3-selection 等按需组合。Q3点集全部共线退化情况还能计算吗可以。src/delaunay.js中对共线点集做了特殊处理collinear分支不会报错只是 Voronoi 单元会退化为空。Q4CDN 版本号如何锁定推荐锁定大版本如d3-delaunay6需要完全复现时再指定精确版本d3-delaunay6.0.4。总结 无论你是想用 npm 安装 d3-delaunay 构建生产级应用还是用 CDN 引入 d3-delaunay 快速验证想法又或是通过 ES Module 拥抱现代前端语法本文的三种引入方式都已覆盖。安装只是第一步接下来不妨用Delaunay.from()voronoi()的组合去实现你的第一个德劳内三角剖分或泰森多边形可视化吧【免费下载链接】d3-delaunayCompute the Voronoi diagram of a set of two-dimensional points.项目地址: https://gitcode.com/gh_mirrors/d3/d3-delaunay创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考