d3-delaunay 动态可视化 5 大技巧update() 实现实时点更新【免费下载链接】d3-delaunayCompute the Voronoi diagram of a set of two-dimensional points.项目地址: https://gitcode.com/gh_mirrors/d3/d3-delaunay如果你正在寻找一款高性能的几何可视化工具那么d3-delaunay绝对值得一试。它是一个基于 Delaunator 构建的快速库专门用于计算二维点集的Voronoi 图Voronoi diagram与Delaunay 三角剖分Delaunay triangulation核心 API 只有两个类Delaunay和Voronoi。而真正让它适合动态可视化场景的是内置的update()实时点更新方法——它允许你在不重建整个数据结构的前提下让点动起来、让网格实时刷新。本文将分享 5 大实战技巧助你快速上手 d3-delaunay 动态可视化。技巧 1理解 update() 的增量更新原理动态可视化的第一步是搞懂update()到底做了什么。在 src/delaunay.js 中delaunay.update()的源码非常简洁调用this._delaunator.update()增量更新底层三角剖分再调用_init()重新计算半边缘、凸包与邻接索引。而voronoi.update()见 src/voronoi.js则先调用delaunay.update()再重算外心与边界向量。关键点在于所有点坐标都存储在delaunay.points一个Float64Array中。你直接修改这个数组的元素再调用一次update()就能完成一次实时点更新无需重新调用Delaunay.from()创建新实例。测试用例 test/delaunay-test.js 中正是先修改points再update()随后外心坐标立刻正确翻转。技巧 2原地修改 points 数组驱动实时点更新这是最常用的一招——每一帧动画里先移动点再刷新网格const delaunay Delaunay.from(pointsData); const voronoi delaunay.voronoi([0, 0, width, height]); function tick() { for (let i 0; i delaunay.points.length; i 2) { delaunay.points[i] vx[i / 2]; // 更新 x 坐标 delaunay.points[i 1] vy[i / 2]; // 更新 y 坐标 } delaunay.update(); // 关键一步增量重建 render(); requestAnimationFrame(tick); }⚠️ 注意delaunay.points是扁平化的Float64Array第i个点的坐标位于points[2*i]与points[2*i1]。只要不改变点的数量update()就能高效复用内部结构——这正是它比重建 重排三角剖分快得多的原因。技巧 3Voronoi 图联动刷新实现动态蜂窝动画如果你的可视化需要同时展示 Voronoi 多边形填充那么别直接delaunay.voronoi(bounds)重建而是复用已有实例并调用voronoi.update()。参考 test/voronoi-test.js修改点坐标后voronoi.update().cellPolygon(i)立刻返回正确的新多边形。配合render()与renderBounds()见 src/voronoi.js可以轻松画出会呼吸的蜂窝状动态网格function render() { voronoi.update(); // 先刷新再渲染 ctx.clearRect(0, 0, width, height); ctx.stroke(voronoi.render()); // 绘制 Voronoi 网格线 ctx.fillStyle #4af; ctx.stroke(voronoi.delaunay.render()); // 叠加 Delaunay 三角网 }render()不传 context 时会直接返回 SVG path 字符串配合 Canvas 2D 或 D3 的 path 生成器都能无缝衔接。技巧 4用 find() 做鼠标交互实时高亮最近点动态可视化不只是动还要响应。delaunay.find(x, y)见 src/delaunay.js能从任意坐标出发沿着半边缘快速走到最近的点复杂度远低于遍历全部点。用它做 hover 高亮再合适不过canvas.onmousemove (e) { const i delaunay.find(e.offsetX, e.offsetY); ctx.clearRect(0, 0, width, height); ctx.stroke(voronoi.render()); ctx.fill(voronoi.renderCell(i)); // 高亮鼠标所在单元格 ctx.fill(delaunay.renderPoints(i -1 ? null : 4)); // 放大目标点 };结合voronoi.renderCell(i)只绘制单个单元格的特性高亮交互的性能开销几乎可以忽略——即便点集上万也依然流畅。技巧 5性能优化与工程实践清单最后送上一份实践清单让你的 d3-delaunay 动态可视化保持丝滑批量更新点坐标在同一个requestAnimationFrame回调内一次性改完所有点再调用一次update()避免一帧内多次重建。复用 context把同一个 Canvas context 传给render()、renderPoints()、renderCell()减少对象分配与 GC 压力。只渲染可见区域通过voronoi.cellPolygons()src/voronoi.js遍历每个多边形手动剔除画布外的单元格大场景下收益显著。善用 bounds创建 Voronoi 时显式传入边界[xmin, ymin, xmax, ymax]可避免无限外延射线带来的额外裁剪计算。处理退化情况点重合或全部共线时update()已内置处理逻辑见 test/delaunay-test.js你无需特判直接调用即可。结语掌握了update()实时点更新这条主线d3-delaunay 就从静态几何库升级为动态可视化引擎点动、网格动、Voronoi 单元联动再配合find()交互与性能优化技巧粒子系统、引力场、气象图、艺术生成器等应用都能轻松落地。快打开源码 src/delaunay.js 与 src/voronoi.js 动手实践吧【免费下载链接】d3-delaunayCompute the Voronoi diagram of a set of two-dimensional points.项目地址: https://gitcode.com/gh_mirrors/d3/d3-delaunay创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考