Line chart, multiple series | Benbinbin | Observable
ojs
ojs
ojs
ojs
ojs
Author
Benbinbin
@benbinbin
Creator
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
© 2026 Observable, Inc.
Terms of service
Privacy policy
Product
About
Pricing
Documentation
Release notes
Contact us
Open source
Notebook Kit
Plot
D3
Community
Explore
Forum
Bluesky
YouTube
X
0
Follow
Follow
Line chart, multiple series | Benbinbin | Observable