Howdy
theme-lighttheme-dark

使用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中都可以应用上。若要研究各种曲线算法的原理请参考官方源码。

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


to-top