G6-Analyzer 的设计

简介

从需求到分析，从功能到设计的思考过程

范围

首先要明确 G6-Analyzer 要做的事情有哪些：

• 看到整体的节点的分布和关联关系
• 分析局部的关联关系，分析两个节点之间的关系，查看节点的详细信息
• 大数据时的分层展示，探索分析

构成

一个典型的分析场景有具体的几部分构成：

• 画布，展示节点和边
• 缩略图，展示全局的视角，进行导航
• 工具栏，缩放、框选、切换模式等命令按钮的容器
• Tooltip, 显示详情信息
• Legend, 图例，显示节点和边的颜色、形状、大小的映射

功能

作为用户进行关系分析的工具，G6-Analyzer 需要支持如下功能：

• 导入（导出功能更侧重图片)
• 布局，解决如何看清楚图的问题，常见的有树布局、网络布局
• 节点和边的展示，主要是树和网的展示
• 缩放、平移、鱼眼放大等
• 显示详情，弹出框、tooltip 等
• 筛选过滤，图例筛选、框选过滤等 （待细化）
• 查找和关系计算，连通性、出入度、图统计信息等图算法基础（待细化）
• 节点、边的拖拽
• 增量显示，高亮局部（高亮子树）
• 局部布局，切换布局（待讨论）

这些功能都能转换成为用例，用例的细化在详细设计中进行

其他

• 分析场景基本不进行节点和边的编辑，如果想实现增删改等操作在业务层让用户自己实现。
• 自定义节点和边的场景在分析场景下比较少，更多的是处于视觉效果进行自定义
• 性能问题在数据量比较大的情况下需要重点考虑，对项目进行分级：
  • < 100 个节点和边
  • < 1000 个节点和边
  • < 10000 个节点和边

  • 10000 个节点和边

  • 更多，仅考虑分层展示

设计

G6-Analyzer 底层基于 G6，同时使用一些通用的可视化组件

包结构

组件

通用的可视化组件有：

布局算法

列出常见的布局方法

整体类图

省略了上面介绍模块子类的整体类图

整体流程

这里列出整个 G6-Analyzer 的主要流程，观察这个过程中的数据流

操作示例