Web的图形可视化：G6库的设计与实现

视觉信息学5（2021）49G6：一个基于Web的图形可视化王艳艳a，白占宁a，林志峰a，董晓青b，冯颖超杰c，潘嘉成，陈伟，陈a蚂蚁集团，中国b中国阿里巴巴集团c浙江大学CAD CG国家重点实验室，浙江省杭州市ar t i cl e i nf o文章历史记录：2021年10月24日收到2021年12月7日收到修订版2021年12月7日接受2021年12月11日在线提供保留字：Graph基于Web的可视化a b st ra ct由于其高要求，创作图可视化给开发人员带来了巨大的挑战领域知识和开发技能。虽然现有的库和工具减少了生成图形可视化的难度，还有很多挑战。我们密切合作与开发人员一起制定了几个设计目标，然后设计并实现了G6，一个基于Web的图形可视化库。它结合了基于模板的高可用性配置和灵活的高表现力定制。为了提高开发效率，G6提出了一系列优化，包括状态管理和交互模式。我们通过一个广泛的画廊，定量性能评估和专家访谈来展示其能力。G6于2017年首次发布，目前已迭代了317个版本。它已经成为数千个应用程序的基于Web的库，并在GitHub上获得了8312颗星版权所有©2021作者。由爱思唯尔公司出版我代表浙江大学和浙江大学出版社有限公司这是一个在CC BY-NC-ND许可证下的开放获取文章（http://creativecommons.org/licenses/by-nc-nd/4.0/）。1. 介绍作为关系数据的典型表示，图数据已经在广泛的应用场景中显示出其重要性，例如社会网络分析中的社区结构（Pinaudet al. ，2020年）和金融交易（谢等。，2019）。在图形可视化的几种类型中（Cui和Qu，2007），节点链接图是最流行的一种，因为它具有很强的表现力。已经提出了一系列用于节点链接diagram的可视化系统，以促进有效的构造（Ro mat et al. ，2019）和勘探（Srinivasan和Stasko，2017; Saktheeswaran et al. ，2020; Chen等人，2018年）。尽管库和工具包的数量越来越多，但使用图形可视化构建复杂的应用程序仍然很困难，需要图形可视化方面的专业知识和大量的编码工作。Js（Bostock et al. ，2011年）通过启用可视编码的声明性规范简化了工作流程，但提供了有限的图形支持，阻碍了其在鉴于他担任该杂志的主编，Wei Chen没有参与这篇文章的同行评审，也无法获得有关同行评审的信息。本文同行评审过程的全部责任委托给了Jiazhi Xia。*通讯作者。电子邮件地址：shiwu. antgroup.com（Y。Wang），zhanning. antgroup.com（Z.antgroup.com（Z.Lin），xiaoqing. antfin.com（X.Dong），fycj@zju.edu.cn（Y.Feng），panjiacheng@zju.edu.cn（J.Pan），chenvis@zju.edu.cn（W.陈）。一些图表分析场景。特定的图形可视化工具（Dwyer et al. ，2008;Han et al. ，2021），诸如Cytoscape. js（Franzet al. ，2016年）和Sigma.js 1，引入更多面向图形的功能，以促进图形可视化构建。为了满足行业对图形可视化的要求，我们与开发人员密切合作，并定期进行访谈，以调查创作过程，并确定几个机会，以提高图形可视化工具的可用性和结果发现，他们更喜欢重用封装的代码，以加速简单的节点链接图的开发不幸的是，现有的工具不足以同时满足这两个需求。因此，专家有时不得不做出选择，大多选择前者，而牺牲定制。我们设计并实现了一个图形可视化库。我们将其命名为G6，其中“G”取自“图”，“6”取自六个分离度（Guare et al. ，2000年）。G6结合了基于模板的高可用性配置和灵活的自定义高表现力。为了提高开发效率，G6提出了一套机制，包括状态管理和交互模式。布局、算法和插件的丰富集成使G6的分析能力更上一层楼我们展示了G6的表现力和可用性，通过广泛的画廊，定量性能1 http://sigmajs.org/网站。https://doi.org/10.1016/j.visinf.2021.12.0032468- 502 X/©2021作者。由爱思唯尔公司出版代表浙江大学和浙江大学出版社。公司这是一个在CC BY-NC-ND许可证下的开放获取文章（http://creativecommons.org/licenses/by-nc-nd/4.0/）。可在ScienceDirect上获得目录列表视觉信息学期刊主页：www.elsevier.com/locate/visinfY. Wang，Z.白氏Z.Lin等人视觉信息学5（2021）4950评估和专家访谈。经过317次迭代，G6被广泛用于图形可视化，并在GitHub上获得8312颗星。有关G6的更多详细信息，请访问https://g6.antv。vision/en.2. 相关工作2.1. Node–link节点链接图有效地展示了网络的连通性和拓扑结构（Ghoniemet al. ，2004）。在节点-链接图中，节点被解释为对象，边被解释为对象之间的关系，这对于最终用户来说是直观的。各种布局方法可用于呈现数据的不同特征。由Peter Eades（Eades，1984）首先提出的力导向布局（Force-Directed Layout）将弹簧模型引入布局计算中。每个节点的位置受到来自相邻节点的弹性的影响，并在多次迭代后达到动态平衡做出了许多努力来提高性能（Hachul和Jünger，2004; Ja-comy等人，2005）。，2014年）和减少杂波（Holten和Van Wijk，2009年）。或者，多维尺度（MDS）布局（Kruskal，1964; Tenenbaum et al. 2000）通过保持数据的相对关系将高维数据投影到低维空间中。提出了几项工作来加速布局计算（Zhu et al. ，2020，2021）。此外，其他图形布局，如网格布局，放射状布局（Brandes和Pich，2011）和圆形布局，提供了各种手段来呈现特定的结构，并适用于独特的场景和分析任务。2.2. 图形可视化工具要构建图形可视化，一种自然的方式是纯粹使用编程语言，如C++、JavaScript和Python，来执行数据转换、布局计算和渲染。然而，这种方法需要编程方面的专业知识，并且在编码和调试方面花费了大量时间。尽管具有图形用户界面的创作系统（Romatet al. ，2019）提高可用性和可访问性，它们的表现力强烈地局限于系统提供的模板图形的语法（Heer et al. ，2005）为解决上述问题奠定了基础。它提供了一组规则，使开发人员能够通过简单的配置自定义可视化。随后，一系列关于陈述性语法的著作被提出（Li et al. ，2020; Bostock et al. ，2011;Heer和Bostock，2010）。在这些声明性语 法中 ， 低级语 法， 诸如 Pro tovis （Bostock and Heer ，2009）、D3.js（Bostock et al. ，2011）和Vega（Satyanarayanet al. ，2015），允许对可视化结果进行细粒度控制。Li等人提出了一套声明式语法（Li和Ma，2018），以降低开发高性能系统的难度，然后支持渐进式分析（Li和Ma，2019）和深度学习分析方法 （ Li 和 Ma ， 2020 ） 。 高 级 语 法 ， 例 如 Vega-Lite （ Satya-narayanet al. ，2016），ECarts（Li et al. ，2018）和ggplot 2（Wick-ham，2011）强调了规则的简单性。通过在可视化空间中搜索和推断，它们简化了配置过程，从而实现了有效的数据探索和分析。然而，上述所有语法都是为通用可视化而设计的，缺乏针对图形数据特性的专门设计考虑。许多库（例如，js（Franz et al. ，2016），vis.js2和GoJs3）的网络是为图形可视化而设计的2 https://visjs.org/网站。3 https://gojs.net/latest/网站。它们提供了更多与图形相关的选项和优化。我们- bGL由Sigma.js 1和NetV.js支持（Han et al. ，2021）以提高渲染性能并有效地可视化大规模图形。然而，它自然地增加了编程的复杂性并限制了表现力。上述工具通常伴随着低可用性等问题或低效率。G6与其他产品的不同之处在于，G6在不牺牲性能的情况下，在可用性和表现力方面表现出了显着的改进。3. 设计目标和要求我们与来自安全、金融和生物领域的开发人员进行了初步研究。大多数受访者都有使用现有图形可视化工具的经验，如Sigma.js 1，Cytoscape. js（Franz et al. ，2016）、NetV.js（Hanet al. ，2021）和Gephi（Bastian et al. ，2009年）。我们确定了两个设计目标。DG1表现力。G6应该提供一个自由的设计空间来创建精致的样式、布局和交互，以可视化多变量网络，从而实现复杂图形可视化的自由风格化。DG2可用性。G6旨在通过降低语法设计的复杂性来提高可用性。准确地说，G6的语法应该适合前端开发的方式，利用开发人员的经验来降低学习成本。另外，G6应该封装通用函数以供直接使用，即使是新手开发人员也可以轻松入门。为了实现这两个设计目标，我们与业界的开发人员合作，并进行定期对话，以捕捉他们在视觉编码，交互，布局，分析算法等方面的需求。然后，我们总结了开发人员提出的问题，并确定了以下需求。R1元素自定义。G6应该提供多样化的模板类型和定制能力，以支持多变量网络（DG1）的广泛属性编码。此外，G6应该包含基于组件的节点和链接，遵循几个最流行的前端框架（如React，Vue和Angular）中的声明式视图的思想它利用了开发人员R2状态管理。从最终用户操作的角度来看，图形的元素需要进行样式更新（DG1），如突出显示和重绘颜色。这些状态之间的过渡会导致交互密集型sce- narios中繁琐的工作负载和风格混乱。需要一种有效的状态管理策略来简化此过程（DG2）。R3交互模式。不同的场景需要不同的交互模式，例如允许自由操作的编辑模式和支持有限交互并防止修改图形的显示模式。预计它将支持交互模式之间的方便切换，以便将开发人员从不同场景的绑定和取消绑定交互的繁琐中解放出来（DG2）。R4图形布局。在布局类型方面，G6应该封装主流布局类型，以防止开发人员从头开始实现它们（DG2）。为了可视化不同的子图结构，G6应该支持为不同的子图（DG1）指定唯一的布局布局每-图也是必要的，以确保最终用户的体验，特别是对于大型图形（DG 2）。R5图形分析算法。图形分析算法被广泛用于执行分析任务，用于洞察力阐述、假设验证和行为预测。G6必须集成通用的分析算法，以方便其应用（DG2）。Y. Wang，Z.白氏Z.Lin等人视觉信息学5（2021）4951Fig. 1. 一个图形实例的例子，包含画布、元素、布局等方面的初始化和配置。R6图形插件。插件可以通过新功能（DG2）扩展图形可视化。开发人员可以使用集成的插件或自定义插件进行重用和共享，这对于设计迭代至关重要。4. G6的主要模块G6由六个模块实现，以满足我们的设计要求：实例提供了访问G6特性的入口。 它是承载所有图项的实体，包括元素、布局、交互和功能;元素提供了节点和链接及其属性和功能的可访问性;布局支持多种图形渲染算法，用于不同的目的;交互包括一系列的侦听器和事件，它们将最终用户操作和图形数据连接起来;算法集成了常见的图形算法，以促进图形分析任务;插件使开发人员能够引入定制的功能，为最终用户提供更多的辅助工具。4.1. 图实例与Cytoscape.js、Sigma.js和NetV.js一样，G6使用图形实例来表示图形可视化的实体（节点链接图），并使用声明性选项来简化创建过程。图1示出了具有关于画布、元素、布局、数据、交互和状态的全局配置的图实例化的简化情况。G6提供了从全局级别更新图的接口（例如，全局平移和缩放、数据更新和布局调整）到局部级别（例如，元素管理、样式更新和事件监听）。4.1.1. 数据流数据驱动的框架，如React，渲染可视化组件，而不管全局或局部更新。它可能受到两个问题的困扰。首先，数据操作通常会使大部分数据保持不变，这会导致大量不必要的计算来更新其视觉组件。虽然现有的框架比较和检测更新，但它们的性能受到比较JSON对象中深层嵌套数据属性的阻碍。第二，数据驱动框架中的原始数据被视为不可变数据，因此必须通过深度复制进行更新，导致大量时间消耗。因此，G6没有采用完全数据驱动的机制，而是采用了灵活的策略，将控制权留给开发商。G6为全局和本地数据更新提供了不同的接口。对于全局数据更新，graph.changeData使用Diff算法更新差异数据，然后自动触发graph.layout来刷新布局。图二. G6内置节点类型的默认样式和文本标签(b)矩形、（c）椭圆、（d）圆形、（e）星形、（f）图像、（g）卡片、（h）圆环。对于本地数据更新，graph.addItem、graph.removeItem和 graph.updateItem 支 持 对 单 个 元 素 的 单 独 操 作 。graph.refreshPositions在布局转换和节点拖动期间更新节点位置这些用于本地更新和渲染的接口减少了比较和检测数据更改的工作，显著提高了可视化性能。4.2. 图形元素图形元素由节点和边组成，每个节点和边都是配备有类似于现有 图 形 可 视 化 工 具 的 各 种 基 本 操 作 的 单 独 单 元 （ 例 如 ，Cytoscape.js、Sigma.js、NetV.js）：多种模板类型。除了矩形和三角形等基本几何形状外，G6还包含一些不规则但常见的节点类型（图2），并具有丰富的样式配置选项（R1）。元素侦听器。G6支持对图形元素的事件监听，包括交互事件和定时事件，详见第4.3.1节。复合节点。有些图是以一种网络结构组织的，其中一组节点可以形成一个复合节点，称为组合。G6允许交互打开和关闭复合节点。为了满足受访者对R1灵活的样式化使开发人员能够通过定义元素绘制模式、生命周期函数和状态设置（R1）来注册他们的自定义类型。多元网络的扩展编码可以通过指定可视化映射来实现。G6 的 另 一 个 贡 献 是 基 于 组 件 的 规 范 ， 它 支 持 使 用 流 行 的JavaScript JavaScript扩展（JSX）语法定义元素样式支持React组件。在流程图或思维导图中，几何节点的锚点通常是边界框的顶点或边的中点（图1）。2）的情况。因此，G6通过指定边界框的百分比以供直接使用来提供精确的锚控制4.3. 图形交互交互模块可以分为三个部分：事件监听、状态风格和交互模式。事件监听为开发人员提供了响应交互事件的API。状态样式通过状态注册简化了样式管理。交互模式允许在不同场景之间切换交互。·········Y. Wang，Z.白氏Z.Lin等人视觉信息学5（2021）4952图三. 一个图形实例的示例，其中配置了默认状态、悬停状态和选定状态的状态样式。图四、 更新图实例状态的示例。4.3.1. 事件监听G6支持事件监听。我们将事件分为交互事件和生命周期事件（在G6中称为定时事件）。交互事件指的是最终用户的操作，比如鼠标点击和键盘输入。所有的交互事件都遵循Mozilla开发者网络（MDN）标准。生命周期事件在某些状态更改时自动发生，例如添加节点或停止动画。开发人员指定事件的响应，以提供适当的交互式反馈（R2）。4.3.2. 国家风格为了消除R2中繁琐重复的状态管理工作量，G6提供了StateStyle，用于使用相应的样式配置元素状态。在交互过程中，当元素 被转换为预设状态，而无需用于状态管理的附加代码。如 示 于 图 3 、 defaultNode 配 置 默 认 节 点 样 式 ，nodeStateStyles定义悬停和选中状态的样式使用configuredstate样式，开发人员只需要通过侦听以下当鼠标进入，离开，点击（图。 4）. 元素的样式将自动更新。4.3.3. 交互模式为了实现R3，G6引入了交互模式的概念。如图5，多个交互模式通过模式字段简单地配置（例如，默认模式和编辑模式），并可通过setMode进行切换。一种交互模式（例如，编辑）包含一个或多个相应的行为。G6中的不同行为意味着不同的相互作用，这些相互作用通常由一系列原子事件组成。例如，画布拖动以dragstart事件开始，以drag事件继续，以dragend事件结束。几个常见的行为已经被G6集成，并提供丰富的配置深度定制（图。 5）。G6使开发人员能够根据他们的需求定制具有适当行为集的交互模式。它为开发人员提供了一种优雅的方式来处理不同的场景，而无需繁琐的实现细节。图五. 在图形实例上配置交互模式和行为，然后在交互模式之间切换的示例。开发人员还可以通过registerBehavior注册他们自定义的 Behavior。图六、 一个 带有子图流水线的图实例的例子。4.4. 图形布局不同的场景需要不同的布局用于特定的目的。G6有超过20个内置布局（R4）与相应的- ING配置参数。开发人员可以使用registerLay-out在G6中注册布局以进行深度定制。此外，G6还支持子图布局机制（R4），可以用不同的布局来描绘子图，以突出显示特定的结构。该机制使开发人员能够以流动的方式配置多个子图布局图6显示A子图布局的情况下G6按照pipes数组的顺序呈现子图，数组中的每一项都包括type和nodesFilter，以指定子图的类型和作用域。每个子图布局可以通过平滑过渡过程来切换。G6为某些内置布局算法提供了预定义的过渡，并通过插值G6还提供了一些性能优化策略（R4），以提高布局效率和图形可视化的最终用户体验。为了避免复杂布局造成的进程阻塞，G6在后台集成了Web-Worker技术Y. Wang，Z.白氏Z.Lin等人视觉信息学5（2021）4953图7.第一次会议。G 6 内 置 的 一系列代表性插件。计算对于力导向布局和Fruchterman布局，G6利用GPU加速布局。4.5. 图表分析算法图分析算法已成为图分析中必不可少的算法，并得到了广泛的研究.G6结合了各种图分析算法（R5），包含经典的图论算法（例如，深度优先搜索、最小生成树、最短路径算法）和一些高级算法（例如，标签传播、Louvain聚类、图模式匹配算法）。开发人员可以通过简单的参数配置轻松地应用它们，从而摆脱繁琐的算法细节实现的痛苦。在前端实现算法还可以节省与后端服务器通信的时间。这些算法可以与图实例隔离使用，从而推动G6达到更高的开放水平。4.6. 图形插件G6准备了一套丰富的插件（R6），以使最终用户在探索过程中受益。 图 7介绍了六个具有代表性的插件。图例（图7（a））示出了节点-链路图的编码方案，以便于最终用户对图的理解。SnapLine（图 7（b））暗示坐标对齐，允许更精确的移动操作。工具栏（图7（c））是一个可扩展的容器，具有一组辅助功能。Fisheye（图） 7（d））和边缘过滤器（图。 7（e））提供区别的视角，使最终用户能够专注于图形可视化的局部细节。网格（图7（f））在背景中绘制水平线和垂直线，在一些分析任务中可能很有帮助，例如比较和对齐不同的元素。更 多 插 件 和 详 细 信 息 现 在 可 以 在网 址 ：https://g6.antv.vision/en/docs/manual/middle/plugins/5. 评价5.1. 可视化图库我们建立了一个图形可视化的画廊来展示G6的表现力。图8、展示了画廊的代表。其中一些需要在节点（图8（a，b，h））和边缘（图8（b-d））中进行样式定制。相比之下，其他人利用集成布局（图。 8（e，h））和复合节点（图。 8（f，g））以使可视化更可读。整个图库都可以在我们的网站上找到，4每个示例都提供了可编辑的源代码和易于理解的介绍我们的网站还提供了对设计、开发手册和API的全面介绍5.2. 性能比较我们比较了G6与Sigma.js和Cytoscape.js的布局性能。实验在13英寸MacBook Pro上进行，配备Apple M1硅，16 GB RAM和macOS Big Sur 11.5.2。我们收集了四个图形数据集，其尺度（节点数加上边数）为4331，10，664，13，744和35，000，并使用每个库集成的力导向布局 如示于图 9 ，G6在所有尺度上都比Cytoscape.js效率更高。随着GPU加速，G6更加盛行。Sigma.js无法可视化大小为13，744和35，000的数据集5.3. 专家访谈我们采访了六位来自行业的开发人员。其中四人是第3节中提到的初步研究的受访者，在图形可视化方面有超过四年的项目经验。其他人主要是前端开发人员，在图形可视化方面几乎没有专业知识插件. 开发人员还可以通过以下方式积累设计和代码：自定义插件。4 https://g6.antv.vision/en/examples/gallery·····Y. Wang，Z.白氏Z.Lin等人视觉信息学5（2021）4954图8.第八条。由G 6 创 建 的图形可视化画 廊 。（a）澳大利亚火灾树图，（b）转移图，（c）使用边缘捆绑的美国迁移图(d)弧图，（e）圣诞气泡，（f）决策气泡，（g）大图探索，（h）分层图。见图9。与Sigma.js和Cytoscape.js的性能比较。5.3.1. 程序首先，我们将介绍G6的主要功能，并通过图库中的一些案例进行演示在这个过程中，受访者可以随时打断我们的陈述并提出然后，受访者可以自由探索（30分钟），通过试验案例页面上的代码或查看教程，以获得对编程接口的完整介绍此后，他们需要一周的时间在实际项目中应用G6。最后，我们进行了一次访谈（30分钟），并收集了他们的反馈（对G6功能的评论以及他们对G6和其他图形可视化工具的偏好），以供进一步分析。5.3.2. 结果在表现力（DG1）方面，所有受访者都对定制功能表示赞赏。一些受访者评论说，基于React的规范及其React实现可能是最重要和最有用的功能“G6提供自定义布局以满足特定要求的能力 不同的场景（R1）。“G6拓宽了企业的想象力和独创性。”一些受访者也提到了G6提供的复合节点，称其为“层次分析的最佳工具”。‘‘(G6) opens up more possibili- ties虽然大多数受访者更喜欢G6，但一位受访者表示，“我可能会选择其他库（例如，Sigma.js），用于没有复杂风格化要求的在可用性（DG2）方面，G6被一位受访者描述为相反，当使用其他工具时，我总是需要寻求外部支持（例如，布局和分析算法）之前，完成了”。G6丰富的布局具有“强大的吸引力”，“用一套独特且可用的布局算法解决开发者的问题”;图形分析算法“提升了前端的天花板，带来强大的图形探索和分析能力”;图形插件“让开发者将自己的想法融入到这个一站式解决方案中”，“进一步丰富了G6的生态系统”。受访者还赞赏G6提供的各种优化机制，包括状态管理（R2）和交互模式（R3），这些机制“使图表样式更易于管理”。“与Cytoscape.js等其他工具相比，G6提供了一种更简洁、更直观的声明方法，显著提高了开发效率。他们还称赞双语教程当被问及图形可视化工具的未来选择时，五位受访者表示对使用G6的期望高于其他工具，如Sigma.js，Cytoscape.js和D3.js。基于对极端性能需求的考虑，人们保留了转向其他支持WebGL的工具的可能性5.3.3. 建议受访者也提出了一些宝贵的建议。他们提到，G6应该通过WebGL技术支持高性能计算，以达到更高的可用性。新手用户可能会对选择图形布局来呈现数据特征感到困惑，智能布局建议可以缓解这个问题。Y. Wang，Z.白氏Z.Lin等人视觉信息学5（2021）49556. 社区反馈G6自2017年以来已经迭代了317个版本，其在GitHub5上的开源代码获得了8312颗星。从社区收集了许多优秀的建议，例如，第4.4节中介绍的子图布局的流水线。在79名GitHub贡献者中，约有65%来自社区。7. 结论G6是一个基于Web的图形可视化库，它提供了全面的样式定制、布局、交互、算法和插件。它还集成了一系列功能，包括状态样式，交互模式和行为，以降低学习成本并简化开发过程，使开发人员能够有效地构建图形可视化。一个广泛的画廊，定量性能评估，和专家访谈证明了G6的表现力和可用性。在未来，我们将开发更多的功能，包括先进的图形布局算法，智能图形布局建议，和WebGL加速。CRediT作者贡献声明Yanyan Wang：软件，写作-原始草稿。白战宁：软件。林志峰：概念化。董小青：概念化。英超杰丰：写作-原创草稿。潘家诚：撰写、审校、编辑. 魏晨：超棒.竞合利益作者声明，他们没有已知的竞争性财务利益或个人关系，可能会影响本文报告的工作致谢我们要感谢黄彤、徐志明、郑立波、李晨璐、邱依林、陈华思和潘波对本文的帮助。国家自然科学基金项目（61772456）。伦理批准本研究不包含任何作者对人类或动物受试者进行的任何研究引用巴斯蒂安，M.，Heymann，S.，Jacomy，M.， 2009. Gephi：一个用于探索和操纵网络的开源软件。第三届AAAI网络日志和社交媒体国际会议博斯托克，M.，Heer，J.，2009. Protovis：一个可视化的图形工具包。IEEETrans.目视Comput. Graphics 15（6），1121博斯托克，M.，Ogievetsky，V.，Heer，J.，2011年。 D3数据驱动文档。IEEETrans.目视Comput. Graphics 17（12），2301-2309。布兰德斯大学，Pich，C.，2011年。更灵活的径向布局。J. 图算法应用15（1），157陈伟，Guo，F.，汉，D.，潘杰，聂，X.，夏，J.，张，X.，2018.基于结构的暗示性探索：一种有效探索大型网络的新方法。IEEE Trans.目视Comput. Graphics 25（1），555崔，W.，Qu，H.，2007.图形可视化研究综述。香港九龙清水湾145.德怀尔，T.，Marriott，K.，Wybrow，M.，2008. Dunnart：基于约束的网络图制作工具。在：国际图形绘制研讨会。施普林格，pp. 420-431Eades，P.，1984.一个启发式的图形绘制。 大会编号。 42，149-160. 弗朗兹，M.，洛佩斯CT哈克，G.，董，Y.，Sumer，O.巴德，G. D.，2016年。细胞景观JS：一个用于可视化和分析的图论库。Bioinformatics 32（2），309-311.Ghoniem，M.，Fekete，J. D、Castagliola，P.，2004.一个比较可读的-使 用 节点链接和基于矩阵的表示的图形的完整性。在：IEEE信息可视化研讨会。1994年，第100页。17比24Guare，J.，Sandrich，J.，Loewenberg，S.A.，2000.六度分离。剧院工作。Hachul，S.，Jünger，M.，2004.用基于势场的多级算法绘制大型图形。在：国际图形绘制研讨会施普林格，pp. 285-295.汉，D.，潘杰，赵，X.，陈伟，2021.网络电视。JS：一个基于Web的库，用于大规模图形和网络的高效可视化。目视Inf. 5（1），61-66.Heer，J.，博斯托克，M.，2010.交互式可视化的声明性语言设计。IEEE Trans.目视Comput. Graphics 16（6），1149Heer，J.，卡，S.K.，Landay，J.A.，2005.交互式信息可视化工具包。在：SIGCHI会议的人的因素在计算系统，pp。421-430Holten，D.，Van Wijk，J.J.，2009.图可视化中的力定向边捆绑。In：ComputerGraphics Forum，vol. 28. Wiley Online Library，pp. 983 -990。Jacomy，M.，文图里尼，T.，Heymann，S.，巴斯蒂安，M.，2014. ForceAs2是一个为Gephi软件设计的用于方便网络可视化的连续图布局算法。PLoS One 9（6），e98679.Kruskal，J.B.，1964.通过优化非度量假设的拟合优度的多维标度。Psychometrika29（1），1李，J.K.，妈，K L.，2018. P4：用于交互式信息可视化的可移植并行处理管道。IEEE Trans. Vis. Comput. Graphics 26（3），1548-1561.李，J.K.，妈，K L.，2019. P5：用于交互式数据分析和可视化的便携式渐进并行处理管道。IEEE Trans. Vis. Comput. Graphics26（1），1151-1160.李，J.K.，妈，K L.，2020. P6：一种用于将机器学习集成到可视化分析中的声明性语言。IEEE Trans. Vis. Comput. Graphics 27（2），380-389.Li，D.，Mei，H.，沈，Y.，Su，S.，张伟，王杰，Zu，M.，陈伟，2018年ECarts：一个快速构建基于Web的可视化的声明式框架。目视INF. 2（2），136Li，G.，Tian，M.，徐，Q，McGuffin，M.J.，Yuan，X.，2020. Gotree：一个语法树的可视化。在：2020年CHI计算机系统人为因素会议论文集，pp。1-13号。Pinaud，B.，Vallet，J.，梅兰松湾2020.大型社交网络的可视化技术比较概述：用户实验。目视INF. 4（4），23Romat，H.，阿佩尔角，Pietriga，E.，2019.具有图表的节点链接图的表达性创作。IEEE Trans.目视Comput. Graphics-遗漏广西快乐Saktheeswaran，A.，Srinivasan，A.，美国，Stasko，J.，2020.触摸？演讲？还是触摸和说话研究视觉网络探索与分析的多模态交互。IEEE Trans.目视Comput.Graphics 26（6），2168Satyanarayan，A.，Moritz，D.，Wongsuphasawat，K.，Heer，J.，2016. Vega-lite：交互式图形的语法。IEEE Trans. Vis. Comput. Graphics 23（1），341-350.Satyanarayan，A.，拉塞尔，R.，Hoffswell，J.，Heer，J.，2015. Reactive Vega：一个声明式交互式可视化的流媒体架构。IEEETrans. 目视Comput. Graphics 22（1），659Srinivasan，A.，美国，Stasko，J.，2017. Orko：促进多模式交互，用于网络的视觉探索和分析。IEEE Trans. Vis. Comput. Graphics 24（1），511-521.Tenenbaum，J.B.，De Silva，V.，Langford，J.C.，2000.非线性降维的全局几何框架。科学290（5500），2319-2323。Wickham，H.，2011. ggplot2. Wiley Interceptip.修订版计算Stat. 3（2），180-185。Xie，C.，中国科学院，钟伟，徐伟，Mueller，K.，2019.使用超图学习进行异构数据的可视化分析ACM Trans.内特尔系统Technol. 10（1），4：1-4：26. http://dx.doi.org/10.1145/3200765网站。Zhu，M.，陈伟，Hu，Y.，侯，Y.，刘，L.，张，K.，2020. DRGraph：一种高效的大规模图形降维布局算法。 IEEETrans. 目视Comput. Graphics 27（2），1666Zhu，H.，Zhu，M.，冯，Y.，蔡，D.，Hu，Y.，吴，S.，Wu，X.，中国农业科学院，陈伟，2021年通过KNN图的分层嵌入可视化大规模高维数据。目视INF. 5（2），51https://github.com/antvis/g6/