⑴Graphin 又称 Graph Insight，是一款功能强大简单易用的图表分析洞察软件，也是基于 G 封装的 React
⑵组件库，专注在关系可视分析领域，可进行图分析与图编辑等操作，使用这款软件用户可以对图进行布局分析可视化探索，可以对图进行编辑连线，流程管理等操作；Graphin
⑶是一个图可视化渲染引擎，拥有React
⑷强大的组件生态以及简单的编程模型，大大降低用户的使用门槛，同时该软件还支持关系分析知识图谱基础设施监控等众多图标分析功能，非常方便实用，有需要的用户可以自行下载。
⑸充分利用 React 框架特性，实现从数据到画布渲染的映射
⑹增量数据添加：Graphin 会根据前置布局，动态完成增量数据添加，达到节点扩散，关系发现等效果。
⑺全量数据渲染：Graphin 支持全量数据渲染，满足保存，导入，导出等需求。
⑻内置丰富的布局，支持布局切换，满足不同场景下的布局需求。
⑼分析过程是一个动态交互的过程，对于图分析也不例外。因此我们需要一些分析组件帮助我们辅助分析，这里 Graphin 内置了两款组件：Toobar
⑽通用工具栏 和 ContextMenu 右键菜单 ，未来计划新增 MiniMap 缩略图 与 ProptertiesFilter 属性筛选器，Legend
⑾图例等组件，从而达到让用户高效分析的目的。
⑿内置节点与边的样式，支持用户通过 JSON Schema 自定义。
⒀支持节点扩散，寻找边关系等基础分析方法。
⒁开源后计划新增 时序分析（Timebar，地理位置分析（Map mode等高级分析方法。
⒂充分利用 React 框架特性，支持数据到视图的映射与变化
⒃内置丰富的布局，支持布局切换，满足不同场景下的布局需求
⒄沉淀分析方法，内置分析组件，专注关系可视分析领域
⒅$ npm install antv/graphin --save
⒆这是一个最简单的 Graphin 组件的在线演示。访问 创建一个
⒇CodeSandbox 的在线示例，别忘了保存以创建一个新的实例。通过 CodeSandbox，我们可以不用去配那些琐碎的 React
⒈脚手架，快速尝鲜。
⒉Graphin 使用起来就像普通的组件一样，它只有一个必选属性 data，内部会对其进行数据校验，data
⒊的数据结构有一定的要求，详情参考：核心概念/Data 数据驱动。
⒋Graphin 提供一个 Mock 函数，帮助我们快速生成一些图数据，让我们试试看吧：
⒌Graphin 组件内置了 种布局，默认提供布局为
⒍concentric（同心圆布局。我们可以根据自己业务的不同来调整布局。比如，我们希望节点按照里力导（force排列。让我们来调整上述的代码：
⒎. 配置 Node 和 Edge 样式
⒏想要修改 Graphin 的节点和边的样式，我们可以直接修改 data 上的数据：
⒐data.node 和 data.edge 上的各个属性，比如 shape 和 style 等等和 G 节点和边数据上的是一样的。这里会透传给
⒑G。这里的配置可以参考 G 的文档：内置节点 和 内置边。
⒒需要注意的是，如果传入的数据没有 shape，Graphin 给节点的默认 shape 是内置的自定义的
⒓CircleShape。默认的边是内置的自定义 LineEdge。
⒔Graphin 目前仅提供两个官方组件，Toolbar 和 ContextMenu。关于它们，你们可以在核心概念/ponents
⒕分析组件中得到更详细的介绍，我们以添加组件 Toolbar 为例：
⒖安装组件，graphin 分析组件发布在单独的 NPM 包 graphin-ponents 中：
⒗$ npm install antv/graphin-ponents --save
⒘Graphin-ponents 基于 antd 组件，因此如果是非 antd 项目，需要手动引入 antd 的 css
⒙将组件放在 Graphin 组件内部，这样 Graphin 组件可以将 graph，apis 等属性传递给分析组件：
⒚关于 Graphin 组件，我们可以到 Grapin Studio 中去体验一下功能：
⒛todo/redo 撤销重做功能
①zoomIn/out 缩小放大功能
②fullscreen 全屏功能
③contextmenu 右键菜单
④图分析有着非常丰富的事件，如果我们想监听事件，该如何做呢？
⑤得到 Graphin 的 Ref 实例
⑥使用 G 的 graph 进行事件监听
⑦通过上面的 步，我们基本了解了 Graphin 的全部 个核心概念
⑧data（数据layout（布局ponents（分析组件，events（数据。
⑨开发点有趣的功能
⑩通过上文，聪明的小伙伴已经发现了，Graphin 的设计完全遵照了 React
Ⅰ的编程模型，声明式的完成了从数据到视图的映射。现在让我们一起来开发两个有趣的功能，布局切换 与 节点扩散。
Ⅱ同一组数据，改变布局算法会产生不一样的布局效果，从而满足人们的分析需求。
Ⅲ因为 Graphin 是 React 组件，改变 props.layout 就能改变视图的布局效果，因此我们只要把多种布局 layouts
Ⅳ组合起来，每次切换改变 props.layout 即可。
Ⅴ设计布局切换 LayoutSelector组件的接口。
Ⅵ获取 Graphin 支持的内置布局列表 layouts。
ⅦGraphin 提供了很多 API，用于将内部的一些状态或者函数封装给用户使用。内置的布局信息可通过注入到 Graphin 子组件 props 中的
Ⅷprops.apis.getInfo().layouts获得
ⅨGraphin 提供两种方式获得 apis 接口，第一种是通过组件的 props 传递，即所有包裹在 Graphin 组件内部的组件，都会获得
Ⅹapis 这个属性。第二种方式是通过 ref
㈠实例，详见进阶指导/GraphRef。第一种适用于用户自定义组件，非常方便拿到需要的接口。第二种方式更加灵活，可以在 Graphin 外层使用 Graphin
㈡所提供的信息，常用于复杂场景或者多画布实例的情况下。
㈢将一个节点扩散出它的一度，二度，多度关系，这是非常常用的一种分析手法。
㈣「节点扩散」在图分析中是一个比较典型的功能。常规情况下，在画布中进行节点操作，比如添加节点，删除节点，我们都会考虑很多问题，比如从 个节点变为
㈤ 个节点，画布如何变化呢？新增的 个节点会放在什么位置呢？使用 Graphin
㈥时，我们就不需要考虑这么多，只需要记住它是数据驱动的，我们不需要关心具体的实现，只需要告诉 Graphin 你需要渲染的数据是什么就可以。增加节点不用使用
㈦graph.add(node)，删除节点也不用调用 graph.remove(node)，一切都是改变数据 props.data 即可。
㈧对选中的节点进行数据 Mock，模拟出节点扩散的结果（实际应用中这可能是从服务端返回的数据。
㈨Click 事件触发改变 state.data 即可。
㈩. Graphin 与 G 的关系是什么？
搞懂 Graphin 与 G 的关系非常重要，虽然 Graphin 是基于 G 封装的 React
组件库，这只是它的技术实现，并不是它的定位。G 是图分析与图可视化的分析引擎，在分析领域，可以使用 G 做关系可视分析，也可以使用 G
做流量可视分析，Graphin 只是一个在关系可视分析领域的解决方案，如下图所示：
工程方案：G 有一定的上手门槛，Graphin 提供了一套工程方案，渲染，交互，布局流程内置，与 React 框架整合，把 G 能力封装聚合成
产品能力：Graphin 有一颗想做产品的心，开源后，我们将对标商业图分析工具 ReGraph 去打造，参考业界优秀图分析产品的功能特性，内置
布局切换，关系扩散，撤销重做等功能，未来计划新增 地图模式(Map Mode)，时序分析（Timebar，团伙导航等高级分析方法。
简单易用：本身是一个比较复杂的概念，Graphin 屏蔽了 G 的一些图可视化概念，注册节点也可以通过 JSON schema
去描述，交互，布局等概念都封装在 Graphin 内部，用户只需要像使用普通 React 组件一样去使用 Graphin 即可。
. Graphin 未来的计划是什么？
回答 Graphin 未来去哪儿的问题，我们得先得回答 Graphin 从哪儿来的问题
Graphin 诞生在一个图分析业务团队，第一版本还是使用 cytoscape.js
进行开发的。随着业务进入深水区，基于业务的定制越来越多，我们切换了引擎到 G，与 G 的开发者深入合作，慢慢地融入整个 AntV 体系。以下思维导图中
部分是 Graphin 开源版本已经做到的功能
修订版本号：每周末会进行日常 bugfix 更新。（如果有紧急的 bugfix，则任何时候都可发布
次版本号：每月发布一个带有新特性的向下兼容的版本。
主版本号：含有破坏性更新和新特性，不在发布周期内。