使用D3.js将离散的点形成平滑曲线及其应用

前言

之前遇到了一个场景，需要将多个离散的点使用一条平滑的曲线连起来。在网上找了很多方案，一般都是说使用**三次样条插值**实现。自己参考网上算法写了下，发现效果不太理想。然后看到 D3js 官方原来直接内置了多种相关算法，但官方并没有提供效果展示，于是就编写了一个简单的可以快速看到各种连线算法的效果图的 DEMO。

多点连线 Demo

Demo 访问地址: https://kongfandong.cn/demo/d3-multipoint-connection/index.html

PS:PC 端支持拖拽更改点位置，移动端暂不支持

• LineType：切换不同的 D3 内置的连线类型
• Add Random Point: 你可以添加更多的点进行连线
• 各个点可以拖拽更改当前位置
• 部分连线算法可以修改系数参数(bundle、cardinal、catmullRom)

利用 D3js 的这个连线算法，实现了一个简单的曲线自动校正的 Canvas 画板，参考下面的 Demo

曲线自动校正 Demo

Demo 访问地址: https://kongfandong.cn/demo/d3-adjust-line/index.html

• Canvas 简易画板
• 设置的 AdjustAngel 配置偏移角度
• 通过 AdjustAngel 进行点的取样，然后使用 D3js 的连线算法进行重连

总结

实现平滑的曲线，可以通过 D3js 内置的几种曲线算法生成一个插值曲线，该曲线原则上是贝塞尔曲线，所以可以在 SVG 和 Canvas 中都可以应用上。若要研究各种曲线算法的原理请参考官方源码。

官方文档：https://d3js.org.cn/document/d3-shape/#curves