d3力导向图增加节点_给图上的边“扎个头发”会怎样?

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

ea19f977c819330a609e2c4f566f311e.png
引言 —— 你看这错综复杂的图像不像早上没梳头的女盆友?真想给她扎个美美的头发呀。首先,你得....。害,没女友没关系!先给图可视化扎个头吧!大规模图往往具有复杂的数据关系。视觉混乱是可视化大规模图的一大问题。研究者们提出了多种降低视觉混乱的方法。其中,边绑定(扎头发大法)是一种高效的、可减轻混乱、展现高层级的边趋势的方法。
本文中部分图可视化由蚂蚁金服 AntV G6 提供支持。G6 —— 专业的图可视化引擎。让关系数据变得简单透明,让用户获得 Insight。
G6 官网: https:// antv-g6.gitee.io/zh 。欢迎关注。
GitHub: https:// github.com/antvis/G6 。欢迎 Star。

什么时候扎头发

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

062bd550013e7c7fe7e55b8493b2c125.png
(左)图 1. 法国航线图。(右)图 2. 美国航线图。

66fdeb8f022ea36ffbdbfdef8576411a.png
左)图 3. 世界网络 IXP 对等图。(右)图 4. 美国移民图。

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

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

力导向扎头发 FDEB

Force-Directed Edge Bundling for Graph Visualization (2009)

FDEB 是最常见的、基于力导的边绑定方法。也是 D3.js 和 G6 中使用的边绑定方法。

算法原理

利用力导向的思想,把每根头发丝儿(边࿰

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值