Graphin正式版是一款图表分析软件,软件的功能注重在分析领域,Graphin正式版可以帮助用户对图表中的数据进行分析,了解每个数据背后代表的意义,知道每个数据的含义,方便用户进行后续的操作,Graphin正式版支持布局切换,根据需求的不同,得到的分析结果也不同,满足不同场景的布局需求。
数据驱动
充分利用 React 框架特性,支持数据到视图的映射与变化
自动布局
内置丰富的布局,支持布局切换,满足不同场景下的布局需求
分析探索
沉淀分析方法,内置分析组件,专注关系可视分析领域
通用布局
Graphin和G6的同学也在布局算法层投入大量的精力,针对图分析场景做了大量的优化工作,Graphin中包含诸如力导布局、圆形布局、同心圆布局、网格布局、径向布局、有向分层等布局算法。使开发者不再需要额外调整便能获得一个不错的布局效果,从而增强图的可读性。
大图布局
在某些特定分析场景下,需要在画布上绘制的点/边数量较多。而像力导布局每次迭代的所消耗的计算资源也会增大进而阻塞JS线程使图的绘制帧率很低,导致页面卡顿, 即大图布局问题。Graphin采用Web Worker与补间动画结合的技术,把计算量较大力导的迭代过程迁移到Web worker中进行, 使在点边数量较多的场景下也能保证页面的顺滑。下图呈现的是400个节点,800条边的场景下图的绘制情况。当然大图布局的优化策略也可以写一篇文章了,这里不再深入,先留个坑位。
子图布局
如果图中节点有明显的分类,或者用户需要针对图中特定节点进行下一步分析,可以采用子图布局的方式对该部分节点进行重新布局,选择合适的布局算法进一步增强图的可读性。下图中你可以看到存在两个子图分别采用了Circle布局和Radial布局来呈现,布局结果清晰明了,图的可读性非常强。
Graphin 实例接口
在一些特殊情况下,我们需要直接访问 Graphin 实例,来获取一些信息,或者直接对 G6 实例进行操作。这个时候我们可以通过 ref 来获取 Graphin 的实例:
01. APIs 接口:
通过 graphinRef.current.apis 可以访问到 Graphin 内部的一组 API。这组 API 同样可以在 Graphin 组件中获取到。
APIs 的具体接口请参考 API 文档。http://antv.vision/graphin-1.x-site/zh/docs/api/graphin#apis
// TODO 添加 SandBox 实例
02. G6 Graph 实例
通过 graphinRef.current.graph,可以获取到 Graphin 中实例化的 G6 实例。
这适用于需要监听 G6 内部事件等等场景。通常来说不推荐使用这种方式来做 hack,因为这跳出了 Graphin 的整个生命周期,可能会和 Graphin 本身产生一些冲突。
Extend 扩展接口
Extend 介绍
extend 顾名思义是扩展的意思。Graphin 支持 3 种扩展类型:扩展自定义布局,扩展自定义节点,扩展自定义图标。
Graphin 内置了布局,节点 与图标。除此之外,Graphin 给用户提供了扩展机制,用户可以方便的通过 extend 配置自定义布局,节点与图表。
扩展是通过 props.extend 实现的:
下面让我们来看如何具体自定义布局,节点和图标。
扩展布局
让我们来实现一个简单的随机布局作为例子。
首先我们要定义一个 layout 函数:
这个 layout 函数返回一个数组,每个数组都是一个自定义 layout 配置。layout 配置中最关键的就是 layout 方法,这个方法接受 data 作为参数,然后返回修改过的 data 数据。修改的就是每个节点上的 x 和 y 属性,也就是给每个节点附上了位置信息。
接下来我们在 Graphin 的 extend.layout 中传入这个函数,并制定 layout.name 为 custom,就可以使用这个自定义 layout 了。
扩展节点
扩展节点指的是扩展 NodeShape,也就是 G6 中节点的渲染形状和样式。
在 Graphin 中,我们支持通过 JSON 配置的形式来配置 NodeShape。让开发者不用使用 G6 的 API,声明式的对 NodeShape 进行扩展。
比如我们要注册一个新的 RectNode 类型的 NodeShape。首先我们要定义一个 NodeShape 函数:
这个函数返回的是一个 JSON schema,是对 Shape 的描述。主要包括 shapeComponents 和 state。
shapeComponents 是一个数组,每一项是一个 Shape 的样式描述。其中 shape 的值是 G6 中的内置 shape。shape 类型和 attrs 的详情见 G6 文档。
state 则是对 G6 中 behavior 中 state 的抽象。state 的 key 是 G6 的 behavior 中 setItemState 的状态。value 也一个 map,key 是 shapeComponents 中 shape 的 id。value 是 attrs 对象。因此 state 对象是对不同状态下 shapeComponents 的属性的描述。通过这个 API,我们可以声明式的对 NodeShape 的样式和组成进行编写,更符合 React 的编程范式。
Layout 自动布局在图分析过程中,针对不同的分析场景,我们需要不同的布局方案。
01. 布局的定义
布局,顾名思义是如何放置节点,反应在 Graphin 的 data.nodes 中就是节点的 x,y 坐标。
布局算法就是一个函数,用来给节点添加 x,y 坐标。
布局的指定是通过 Graphin 的 props.layout 实现的:
02. 内置布局
01. circle
名称:圆形布局
特点:整体呈现圆形排布。
适用场景:当我们找到一群点中的关键节点,它所联系的节点最多,那么利用圆形布局,便可以在中心处轻松找到这个关键节点
使用实例:
02. concentric
名称: 同心圆布局
特点:将节点按照度数排序,节点度数大的一群点会排列在最中心,度数小的节点会分布在最外层。整体呈现同心圆排布
适用场景:当我们找到一群点中的关键节点,它所联系的节点最多,那么利用圆形布局,便可以在中心处轻松找到这个关键节点
使用实例:
03. grid
名称:网格布局
特点:将节点依次整齐排列,呈现网格状
适用场景:节点的位置按照用户自定义后的排序展开,清晰明了,一般用于其他布局的前置分析
使用实例:
04. radial
名称:迳向布局
特点:节点像雷达一样散开,是静态布局里解决交叉问题的主要布局算法
适用场景: ??
使用实例:
05. dagre
名称:有向层次布局
特点:按照边的方向与节点的层次,呈现树形排列
适用场景:当我们需要知道一群数据里的层次结构,上下游关系,那么 dagre 有向层次布局便是非常好的办法。
使用实例:
06. force
名称: 力导布局
特点:节点按照自然受力进行分布,节点间模拟电荷斥力保持不相交,边通过弹簧拉力保持不相离,最终在多次动态迭代中,达到一个受力平衡
适用场景:想解决点边相交问题的时候,使用力导非常合适。一般作为其他布局的后置布局使用
使用实例:
同类推荐
2022-07-23
立即下载2022-07-09
立即下载2022-07-12
立即下载2022-07-12
立即下载2022-07-09
立即下载2022-07-16
立即下载相关文章
Glary Utilities如何修复系统文件?Glary Utilities修复系统文件的技巧
2022-12-11福昕PDF阅读器添加笔记注释的技巧
2022-11-26如何删除访客记录?和平精英删除访客记录的方法
2022-12-04Xmanager如何更改默认编辑器?
2022-05-20Zend Studio最新注册码下载_Zend Studio完美破解
2022-11-12网易邮箱大师撤回邮件的技巧
2022-03-25Edge浏览器打开兼容模式的方法
2022-12-18迅捷视频转换器转换视频的方法
2022-12-042345好压怎么加密?2345好压给压缩文件加密的方法
2021-11-02FL Studio如何添加效果器?FL Studio添加效果器的方法
2021-11-27