d3力导向图增加节点_给图上的边“扎个头发”会怎样？-CSDN博客

本文链接：https://blog.csdn.net/weixin_39595487/article/details/111649993

本文探讨了在图数据可视化中，如何通过边绑定方法减少视觉混乱，尤其是使用D3.js和G6的FDEB（Force-Directed Edge Bundling）算法。FDEB利用力导向思想，通过控制点调整边的路径，减少交错复杂性。此外，文章还介绍了其他边绑定算法如MINGLE、KDEEB、SBEB、ADEB和FFTEB，并讨论了交互式融合不同边绑定结果的技术，以提高图的可读性和美学效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引言 —— 你看这错综复杂的图像不像早上没梳头的女盆友？真想给她扎个美美的头发呀。首先，你得....。害，没女友没关系！先给图可视化扎个头吧！大规模图往往具有复杂的数据关系。视觉混乱是可视化大规模图的一大问题。研究者们提出了多种降低视觉混乱的方法。其中，边绑定（扎头发大法）是一种高效的、可减轻混乱、展现高层级的边趋势的方法。

本文中部分图可视化由蚂蚁金服 AntV G6 提供支持。G6 —— 专业的图可视化引擎。让关系数据变得简单透明，让用户获得 Insight。
G6 官网： https:// antv-g6.gitee.io/zh 。欢迎关注。
GitHub： https:// github.com/antvis/G6 。欢迎 Star。

什么时候扎头发

大多数图数据在可视化时被展示成点-线图（Node-link Diagram）的形式。点-线图特别适用于如交通网络图一类的关系数据的展示，这种数据的节点通常带有地理位置信息，例如迁徙图、移民图、航线图等。

（左）图 1. 法国航线图。（右）图 2. 美国航线图。

左）图 3. 世界网络 IXP 对等图。（右）图 4. 美国移民图。

虽然点-线图提供了直观的可视化，但是当数据存在大量节点和边时，视觉混乱（Visual Clutter）成为了严重的问题。点-线图中的视觉混乱通常是边过于交错复杂的直接结果。特别在如交通网络一类数据中，节点位置具有明确含义，其位置是不可以被修改的，如图 1～4 四个例子。因此，诸多研究者设计了各种通过优化边的方式减轻上述视觉混乱，其中“扎个头发”边绑定（Edge Bundling）方法被广泛研究和应用。

现在，图可以有很多种“发型”，紧的松的、脏辫、鱼骨辫、防秃的（？？？）... 下面，我们将详细介绍被广泛使用的 FDEB（Force-Directed Edge Bundling）方法，并概览学术中其他几种边绑定算法。最后，我们将介绍一种融合多种边绑定结果的算法。