使用D3.js将离散的点形成平滑曲线及其应用
August 16, 2020
前言
之前遇到了一个场景，需要将多个离散的点使用一条平滑的曲线连起来。在网上找了很多方案，一般都是说使用三次样条插值实现。自己参考网上算法写了下，发现效果不太理想。然后看到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中都可以应用上。若要研究各种曲线算法的原理请参考官方源码。
