Graphin 正式版

Graphin正式版是一款图表分析软件，软件的功能注重在分析领域，Graphin正式版可以帮助用户对图表中的数据进行分析，了解每个数据背后代表的意义，知道每个数据的含义，方便用户进行后续的操作，Graphin正式版支持布局切换，根据需求的不同，得到的分析结果也不同，满足不同场景的布局需求。

Graphin正式版软件特色

数据驱动

充分利用 React 框架特性，支持数据到视图的映射与变化

自动布局

内置丰富的布局，支持布局切换，满足不同场景下的布局需求

分析探索

沉淀分析方法，内置分析组件，专注关系可视分析领域

Graphin正式版布局方式

通用布局

Graphin和G6的同学也在布局算法层投入大量的精力，针对图分析场景做了大量的优化工作，Graphin中包含诸如力导布局、圆形布局、同心圆布局、网格布局、径向布局、有向分层等布局算法。使开发者不再需要额外调整便能获得一个不错的布局效果，从而增强图的可读性。

大图布局

在某些特定分析场景下，需要在画布上绘制的点/边数量较多。而像力导布局每次迭代的所消耗的计算资源也会增大进而阻塞JS线程使图的绘制帧率很低，导致页面卡顿， 即大图布局问题。Graphin采用Web Worker与补间动画结合的技术，把计算量较大力导的迭代过程迁移到Web worker中进行, 使在点边数量较多的场景下也能保证页面的顺滑。下图呈现的是400个节点，800条边的场景下图的绘制情况。当然大图布局的优化策略也可以写一篇文章了，这里不再深入，先留个坑位。

子图布局

如果图中节点有明显的分类，或者用户需要针对图中特定节点进行下一步分析，可以采用子图布局的方式对该部分节点进行重新布局，选择合适的布局算法进一步增强图的可读性。下图中你可以看到存在两个子图分别采用了Circle布局和Radial布局来呈现，布局结果清晰明了，图的可读性非常强。

Graphin正式版官方教程

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

名称： 力导布局

特点：节点按照自然受力进行分布，节点间模拟电荷斥力保持不相交，边通过弹簧拉力保持不相离，最终在多次动态迭代中，达到一个受力平衡

适用场景：想解决点边相交问题的时候，使用力导非常合适。一般作为其他布局的后置布局使用

使用实例：