结语 结语 恭喜！你已经成功创建了一个基于 G6 的图可视化应用，并学会了： 基本绘制方法 远程数据加载 属性配置 布局运用 增加交互 添加辅助工具 完整代码见：Tutorial案例代码 。 如果你希望继续学习深入的 G6 知识，请查看 G6 核心概念 ；关于 G6 的更高阶的功能原理介绍和深入探讨，请查看G6 高级指引 。 开发过程中可通...

FAQ 01. Graphin 与 G6 的关系是什么？ 02. Graphin 未来的计划是什么？ FAQ 01. Graphin 与 G6 的关系是什么？ 搞懂 Graphin 与 G6 的关系非常重要，虽然 Graphin 是基于 G6 封装的 React 组件库，这只是它的技术实现，并不是它的定位。G6 是图分析与图可视化的分析引擎，...

Register Register BehaviorRegister Register <Graphin/> 组件 props.register 配置。用于直接使用 G6 API 来自定义节点，边和行为。 属性 类型 是否必选 说明 nodeShape (G6) => Register [] 否 自定义 G6 NodeShape edg...

Random 属性 center width height 方法 使用方法 Random Random 布局是 G6 中的默认布局方法。当实例化图时没有指定布局方法，且数据中也不存在位置信息时，G6 将自动使用 Random 布局。 属性 center 类型 ： Array示例 ：[ 0, 0 ]默认值 ：图的中心是否必须 ：f...

插件与工具 插件 Minimap Grid 网格 交互工具 tooltip 节点提示框 edge-tooltip 边提示框 完整代码 插件与工具 为辅助用户在图上探索，G6 提供了一些辅助工具，其中一部分是插件工具，另一部分是交互工具。 本文将为 Tutorial案例 添加缩略图插件、网格插件、节点提示框、边提示框。 插件 使用...

前言 什么是 G6 入门教程简介 前言 基础知识 环境准备 前言 什么是 G6 G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等基础的图可视化能力。旨在让关系变得透明，简单。让用户获得关系数据的 Insight。 入门教程简介 我们在本入门教程中将会完成一个如下图所示简单的图可视化，我们将在后文中称其为 Tut...

Shape 用法 属性 itemType labelPosition labelAutoRotate 绘制 draw(cfg, group) afterDraw(cfg, group) 更新 update(cfg, item) afterUpdate(cfg, item) shouldUpdate(type) setState(name...

Graphin 实例接口 01. APIs 接口： 02. G6 Graph 实例 Graphin 实例接口 在一些特殊情况下，我们需要直接访问 Graphin 实例，来获取一些信息，或者直接对 G6 实例进行操作。这个时候我们可以通过 ref 来获取 Graphin 的实例： const Graphene = ( props : ...

状态 State 什么是 state 交互状态 业务状态 何时使用 state 配置不同 state 的样式 实例化 Graph 时定义 state 样式 自定义节点和边时定义 state 样式 使用 state graph.on Behavior 小结 状态 State 什么是 state G6 中的 state ，指的是...

自定义边 1. 从无到有定义边 自定义边 示例数据 2. 扩展现有边 3. 边的交互样式 4. 自定义带箭头的边 自定义边 G6 除了提供丰富的 内置边 外，还提供了自定义边的机制，方便用户开发更加定制化的边，包括含有复杂图形的边、复杂交互的边、带有动画的边等。 在本章中我们会通过四个案例，从简单到复杂讲解边的自定义：1. 从无到有的...