Graphin

Graphin简介

Graphin提供图形可视化分析功能，可以将各种关系数据可视化，让用户在分析数据和图形时得到更多帮助。现在大数据应用广泛，很多数据都是互联的。如果需要分析各种数据关系，需要直观地显示数据，以便在图形上查看数据关系。这个Graphin关注的是关系视觉分析领域。您可以在软件中导入数据分析，在软件中设置增量节点，编辑实体关系，以及编辑关系扩散方案。将复杂的数据添加到这个软件中，可以快速可视化数据，让用户可以在图表上查看数据，内置圆形布局、定向分层、垂直布局、水平和垂直布局、同心布局、力导布局、自定义随机布局等图形查看方案！

Graphin基本简介

Graphin名为Graph Insight，是基于G6包的React组件库，专注于关系可视化分析领域，简单高效，开箱即用。

Graphin软件功能

1.数据驱动

充分利用React框架实现从数据到画布渲染的映射。

增量数据添加:Graphin会根据前端布局动态添加增量数据，达到节点扩散和关系发现的效果。

全尺寸数据渲染:Graphin支持全尺寸数据渲染，满足保存、导入、导出的需求。

2.布局切换

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

3.分析组件

分析过程是一个动态交互的过程，图分析也不例外。因此，我们需要一些分析组件来帮助我们进行分析。这里Graphin有两个内置组件:Toobar通用工具栏和ContextMenu右键菜单。未来计划增加MiniMap缩略图、PptertiesFilter、Legend图例等组件，让用户高效分析。

第四步:定制风格

内置节点和边缘样式，允许用户通过ON Schema进行自定义。

5.基本分析

支持节点扩散和寻找边缘关系的等基础分析方法。

6.高级分析

开源之后，计划增加Timebar、Map模式等高级分析方法。

Graphin软件特色

数据驱动

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

自动布局

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

分析探索

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

Graphin教程

Graphin实例接口

在一些特殊情况下，我们需要直接访问Graphin实例来获取一些，或者直接在G6实例上工作。此时，我们可以通过ref:

1.API接口:

graphinref . current . API可以访问Graphin内部的一组API。这组API也可以在Graphin组件中获得。

API的具体接口请参考API文档。https://antv . vision/graphin-1 . x-site/zh/docs/API/graphin # API

// TODO添加沙盒实例

02.G6图形示例

您可以通过graphinRef.current.graph在Graphin中实例化G6实例

这适用于需要监控G6内部事件等场景。一般不建议这样黑，因为它跳出了Graphin的整个生命周期，可能会和Graphin本身造成一些冲突。

扩展扩展接口

扩展介绍

Extend，顾名思义，就是扩展的意思。Graphin支持三种扩展类型:自定义布局扩展、自定义节点扩展、自定义图标扩展。

Graphin有内置布局、节点和图标。此外，Graphin为用户提供了扩展机制，用户可以通过extend方便地配置自定义布局、节点和图表。

扩展是通过pps.extend实现的:

让我们看看如何自定义布局、节点和图标。

扩展布局

让我们实现一个简单的随机布局作为例子。

首先，我们需要定义一个布局函数:

这个布局函数返回一个数组，每个数组都是一个自定义的布局配置。布局的关键是布局方法，它以数据为参数，返回修改后的数据。被修改的是每个节点上的X和Y亏格，也就是位置被附加到每个节点上。

接下来，我们在/

扩展节点

扩展节点是指扩展的NodeShape，即G6中节点的渲染形状和样式。

在Graphin中，我们通过on configuration来支持NodeShape的配置。让开发人员在不使用G6 API的情况下声明性地扩展NodeShape。

例如，我们需要注册一个新的矩形节点类型的节点形状。首先，我们需要定义一个节点形状函数:

此函数返回一个“开”模式，这是对“形状”的描述。主要包括shapeComponents和state。

ShapeComponents是一个数组，每个项目都是一个形状的样式描述。形状的值是G6中内置的形状。有关形状类型和属性的详细信息，请参见G6文档。

状态是G6中状态在行为中的形象。状态的关键是G6行为中setItemState的状态。该值也是一个映射，关键是shapeComponents中形状的id。是value valueattrs对象。因此，状态对象是对不同状态的shapeComponents的属的描述。通过这个API，我们可以以声明的方式编写NodeShape的样式和组成，更符合React的编程范式。

自动布局在图分析的过程中，我们需要针对不同的分析场景采用不同的布局方案。

1.布局的定义

布局，顾名思义就是如何放置节点，体现在Graphin的data.nodes上，是节点的X、Y坐标。

布局算法是向节点添加X和Y坐标的函数。

的布局由pps.layout of Graphin指定:

2.内置布局

01.圆

名称:圆形布局

特点:整体布局为圆形。

场景:当我们在一组点中找到关键节点时，它接触的节点最多，所以我们可以很容易地使用圆形布局在中心找到这个关键节点。

使用示例:

02.概念c

名称:同心圆布局

特点:节点按度排序，一组度大的节点会排列在中心，度小的节点会分布在最外层。整体同心圆排列

场景:当我们在一组点中找到关键节点时，它接触的节点最多，所以我们可以很容易地使用圆形布局在中心找到这个关键节点。

使用示例:

03.权志龙

名称:网格布局

特点:节点有序排列成网格状。

场景:节点的位置按照用户自定义的顺序展开，清晰明了，一般用于其他布局的预分析。

使用示例:

04.射线

名称:方向布局

特点:节点像雷达一样分散，是解决静态布局中交叉问题的主要布局算法。

适用场景:？？

使用示例:

05.达格雷

名称:定向分层布局

特点:根据边的方向和节点的层次，呈现树形排列。

场景:当我们需要知道一组数据中的层次结构和上下游关系时，那么dagre有向层次布局是一个非常好的方法。

使用示例:

06.力

名称:强制导引布局

特点:节点按自然力分布，节点间模拟的电荷斥力保持不相交，同时通过弹簧张力保持在一起，最终在多次动态迭代中达到力的平衡。

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

使用示例:

Graphin常见问题

Graphin和G6有什么关系？

了解Graphin和G6的关系非常重要。虽然Graphin是基于G6包的React组件库，但这只是它的技术实现，并不是它的定位。G6是图形分析和图形可视化的分析引擎。在分析领域，G6可用于关系可视化分析或流程可视化分析。Graphin只是关系可视化分析领域的一个解决方案，如下图所示:

工程方案:G6有一定的入门门槛。Graphin提供一套工程方案，内置渲染、交互和布局流程，与React框架集成，将G6能力包聚合到API中。

产品能力:Graphin有做产品的欲望。开源之后，我们将搭建基准业务图分析工具ReGraph，参考行业优秀的图来分析产品的特性，如内置布局切换、关系扩散、撤销和重做等，并计划未来增加Map Mode、时间序列分析(Timebar)和gang navigation等高级分析方法。

易用性:这是一个复杂的概念。/[k0/]屏蔽了G6的一些图形可视化概念，注册节点也可以用ON schema来描述。交互、布局等概念封装在Graphin内部，用户只需要像普通的React组件一样使用Graphin。