Line chart, multiple series | Benbinbin | Observable
•ojs
•ojs
•ojs
•ojs
•ojs
Comments (1)
Benbinbin
Nov 16, 2023
该图使用 Voronoi 算法对整个 svg 面积进行划分,所得的每一个小面积都包含一个数据点,如果为这些面积添加相关指针事件的监听器,可以实现鼠标悬停到某个区域时,高亮显示相应的数据点(及所属系列的折线) 维诺图 Voronoi Diagram 的介绍
https://en.wikipedia.org/wiki/Voronoi_diagram
D3 提供了一个模块 d3-delaunay 用于绘制维诺图,具体参考官方文档
https://d3js.org/d3-delaunay
或这篇笔记
https://datavis-note.benbinbin.com/article/d3/module-api/d3-module-delaunay
💡 但实际上在该实例中,寻找距离最近的数据点时,并没有使用 Voronoi 维诺图,而是使用穷举法(因为对于较小的数据集,这个方法也足够快了),即直接遍历所有数据点,并计算它们与指针位置的距离,以此来找到最近的数据点
Reply
Add comment
Subscribe to notifications
Observable
Sign in
Benbinbin
0
Reply
Add comment
Subscribe to notifications
0
Line chart, multiple series | Benbinbin | Observable