6.4 KiB
| title | order |
|---|---|
| 一般图场景案例 | 0 |
一般图场景案例
一般图是指非树嵌套结构的、可能存在环路的数据结构展示的图。一般图与树图的区别详见 一般图与树图介绍
图表决策
这是一个带交互的图表决策图，辅助用户“按使用目的”寻找合适的可视化方式。该 demo 结合了自定义节点、自定义边、力导向布局、数据切换、交互等功能，已应用在 AntV 官网。
聚类的折叠/扩展
使用 Fruchterman 布局实现交互式折叠/扩展聚类。尝试点击节点以折叠/扩展一个聚类。
圣诞推文可视化
该案例展示了圣诞夜与圣诞节网友们在 Tweeter 上发送的推文中，出现频率 top 100 的单词。可以通过拖拽、点击等交互，查看单词的上下文。
”彩蛋“：别人家的彩蛋是彩蛋，而我们的"彩蛋"是个课堂作业：
实现了该 demo 后，我们发现了一个小 Bug：由于 ’christmas‘ 的上下文节点众多，展开它后，在布局即将收敛时出现了疯狂的抖动鬼畜。欢迎在 GitHub 上提 PR 修复它。
美国航线边绑定
使用 G6 可视化美国航线图，使用边绑定工具降低视觉混乱。在大规模图上，使用边绑定可以降低视觉混乱，更清晰地展示图的整体走势、结构，突出航线频繁的城市，它们可能是重要的交通枢纽，并展示更多的统计信息，以便观察者进行分析。图中颜色映射航班的飞行方向（出发（橙红色）与降落（青色））。节点大小表示到达与离开该城市的航班总数量，每个节点使用了饼图展示达到（橙红色）和离开（青色）航班的比例。并增加 hover 的交互，使用 tooltip 展示每个城市的经纬度。
大规模图下钻式探索
一些科学研究表明，不超过 500 个节点的图可视化是适合终端用户阅读和交互式探索的。根据这个原则，在大规模图上，我们将元数据中的节点通过 LOUVAIN 聚类算法进行聚合。首先展示被聚合后的图，然后用户可以通过展开聚合节点进行下钻式探索。如果一次聚合后的节点数仍然庞大，可以进行多层次的聚合。为了控制渲染节点的数量，展开多个聚类后，最早被展开的聚类将会被自动收起。这一方案除了满足上述原则，还能减少前端计算和渲染的负担。
定义
该 Demo 简要演示了一种针对大规模图数据的一整套展示、交互、分析方案，包括：用户交互界面，数据处理流程，交互式探索，分析过程回溯，算法分析。
何时使用
在大规模数据场景中，前端浏览器的计算、渲染性能有限，很难保证流畅的实时交互，又需要基于海量的关系数据进行探索分析时。该方案可以解决该问题。
图例
-
聚合节点：
代表由 Louvain 算法计算出的一个聚类，包含多个真实节点。中间的数字代表了该聚类所包含的真实节点个数。
-
真实节点：
原数据中的节点。颜色代表所属聚类。
-
带有绿点标记的节点：
相较于上一次的结果，该标记标识了本次更新的结果中新增的聚合节点或真实节点。
-
聚合边：
至少一个端点是聚合节点。
-
真实边：
两个端点都是真实节点。
图交互
每个“聚合点”
「右击」 任意节点或边，一个相对应的上下文菜单将会出现。
右击
你也可以通过右击
画布菜单
请在全屏模式下体验
在画布左上角，有一个画布菜单，包含一系列辅助探索的工具。从左到右，它们分别是：
- 显示/隐藏边标签；
- 鱼眼放大镜；
- 拉索选择模式；
- 寻找最短路径（按 SHIFT 点选两个端点）；
- 缩小；
- 使图内容适应视窗；
- 放大；
- 搜索一个节点（输入 ID）。
注意
该 demo 仅为展示大规模图可视化方案，因此使用的数据是一个较小的、模拟的数据集。除了上述内容外，还有很多其他的功能。愉快地探索吧。希望它对你有所帮助。