G6 图可视化引擎
关注
分享
扫一扫
G6 图可视化引擎
Matrix 工作室
为天地立心，为生民立命，为往圣继绝学，为万世开太平。
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
G6 图可视化引擎——快速上手
安装 & 引用在项目中引入 G6 有以下两种方式：NPM 引入；CDN 引入。在项目中使用 NPM 包引入Step 1: 使用命令行在项目目录下执行以下命令： npm install --save @antv/g6Step 2: 在需要用的 G6 的 JS 文件中导入：import G6 from '@antv/g6';在 HTML 中使用 CDN 引入// version <= 3.2<script src="https://gw.alipayobje.原创 2020-06-23 22:11:25 · 5500 阅读 · 2 评论 -
G6 图可视化引擎——简介
什么是 G6G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明，简单。让用户获得关系数据的 Insight。基于 G6，用户可以快速搭建自己的 图分析 或 图编辑 应用。强大的布局强大的动画及交互G6 的特性G6 作为一款专业的图可视化引擎，具有以下特性：优秀的性能：支持大规模图数据的交互与探索；丰富的元素：内置丰富的节点与边元素，自由配置，支持自定义；可控的交互：内置 10+ 交互行为，支持自定义交互；.原创 2020-06-23 21:50:09 · 3314 阅读 · 0 评论 -
G6 图可视化引擎——入门教程——前言
什么是 G6G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等基础的图可视化能力。旨在让关系变得透明，简单。让用户获得关系数据的 Insight。入门教程简介我们在本入门教程中将会完成一个如下图所示简单的图可视化，我们将在后文中称其为 Tutorial 案例，完整代码。前言我们将会通过本入门教程完成包含图的创建、渲染、元素的配置、布局、交互、动画、工具的最终的 Tutorial 案例。在这部分教学中，读者将会学习到 G6 中基础和核心的功能。掌握该入门教程内容后，可以帮助读.原创 2020-06-23 23:09:25 · 1669 阅读 · 0 评论 -
G6 图可视化引擎——入门教程——绘制 Tutorial 案例
本文将进行 Tutorial 案例的简单绘制和配置。通过本文，你将知道创建一般图时一些常用的配置项及其作用。基础绘制创建容器需要在 HTML 中创建一个用于容纳 G6 绘制的图的容器，通常为 div 标签。G6 在绘制时会在该容器下追加 canvas 标签，然后将图绘制在其中。<body> <div id="mountNode"></div> <!-- 引入 G6 --> <!-- ... --></body>.原创 2020-06-23 23:15:33 · 2092 阅读 · 0 评论 -
G6 图可视化引擎——入门教程——元素及其配置
图的元素特指图上的节点 Node 和边 Edge 。在上一章节中，我们已经将 Tutorial 案例的图绘制了出来，但是各个元素及其 label 在视觉上很简陋。本文通过将上一章节中简陋的元素美化成如下效果，介绍元素的属性、配置方法。基本概念图的元素图的元素特指图上的节点 Node 和边 Edge 。G6 内置了一系列 内置的节点 和 内置的边，供用户自由选择。G6 不同的内置节点或不同的内置边主要区别在于元素的 图形 Shape，例如，节点可以是圆形、矩形、图片等。元素的属性不论是节点还是边原创 2020-06-24 09:34:08 · 3234 阅读 · 0 评论 -
G6 图可视化引擎——入门教程——使用图布局 Layout
当数据中没有节点位置信息，或者数据中的位置信息不满足需求时，需要借助一些布局算法对图进行布局。G6 提供了 9 种一般图的布局和 4 种树图的布局：一般图：Random Layout：随机布局；Force Layout：经典力导向布局；（布局网络中粒子之间具有引力和斥力，从随机无序的布局不断演变为趋于平衡稳定的布局。适用于描述事物间关系，比如人物关系、计算机网络关系等。）Circular Layout：环形布局；Radial Layout：辐射状布局；MDS Layout：高维数据降维算法.原创 2020-06-24 21:09:29 · 8262 阅读 · 1 评论 -
G6 图可视化引擎——入门教程——图的交互 Behavior
G6 封装了一系列交互方法，方便用户直接使用。本文将为 Tutorial 案例 增加简单的交互：hover 节点、点击节点、点击边、放缩画布、拖拽画布。本节目标效果如下：基本概念交互行为 BehaviorG6 中的交互行为。G6 内置了一系列交互行为，用户可以直接使用。简单地理解，就是可以一键开启这些交互行为：drag-canvas：拖拽画布；zoom-canvas：缩放画布。交互管理 ModeMode 是 G6 交互行为的管理机制，一个 mode 是多种行为 Behavior 的组合.原创 2020-06-24 22:15:04 · 2629 阅读 · 0 评论 -
G6 图可视化引擎——入门教程——插件与工具
为辅助用户在图上探索，G6 提供了一些辅助工具，其中一部分是插件工具，另一部分是交互工具。本文将为 Tutorial 案例 添加缩略图插件、网格插件、节点提示框、边提示框。插件使用插件时，有三个步骤：引入插件；实例化插件；在实例化图时将插件的实例配置到图上。Minimap缩略图 (Minimap) 是一种常见的用于快速预览和探索图的工具，可作为导航辅助用户探索大规模图。现在，我们为 Tutorial 案例 配置一个 Minimap：预期效果使用方法Minimap 是 G6 的原创 2020-06-24 23:11:16 · 3234 阅读 · 0 评论 -
G6 图可视化引擎——入门教程——动画
由于动画机制较为复杂，我们未在 Tutorial-案例 中增加动画。G6 的动画分为两个层次：图全局动画：图整体变化时的动画过渡；元素动画：节点和边的动画效果。全局动画G6 的全局动画指通过图实例进行操作时，产生的动画效果。例如：graph.updateLayout(cfg)通过实例化图时配置 animate: true，可以达到每次进行上述操作时，动画效果变化的目的。例子const graph = new G6.Graph({ // ...原创 2020-06-24 23:20:35 · 2806 阅读 · 2 评论 -
G6 图可视化引擎——核心概念——节点/边/Combo——内置节点——内置节点总览
G6 的内置节点包括 circle，rect，ellipse，diamond，triangle，star，image，modelRect。这些内置节点的默认样式分别如下图所示。本文将概述 G6 中的各个内置节点类型、内置节点的通用属性、配置方法。内置节点类型说明下面表格中显示了内置的各类节点，同时对一些特殊的字段进行了说明：名称描述默认示例circle圆形：- size 是单个数字，表示直径- 圆心位置对应节点的位置- color 字段默认在描边上生效- 标签文本默认在节点中央- 更多字段见 Ci原创 2020-06-25 12:24:35 · 3870 阅读 · 0 评论 -
G6 图可视化引擎——核心概念——节点/边/Combo——内置节点——Circle
G6 内置了圆 Circle 节点，其默认样式如下。标签文本位于圆形中央。使用方法如 内置节点 一节所示，配置节点的方式有两种：实例化图时全局配置，在数据中动态配置。1 实例化图时全局配置用户在实例化 Graph 时候可以通过 defaultNode 指定 type 为 ‘circle’，即可使用 circle 节点。const graph = new G6.Graph({ container: 'mountNode', width: 800, height: 600, def原创 2020-06-25 14:12:37 · 3065 阅读 · 0 评论 -
G6 图可视化引擎——核心概念——节点/边/Combo——内置节点——Rect
G6 内置了 rect 节点，其默认样式如下。标签文本位于矩形中央。使用方法如 内置节点 一节所示，配置节点的方式有两种：实例化图时全局配置，在数据中动态配置。1 实例化图时全局配置用户在实例化 Graph 时候可以通过 defaultNode 指定 type 为 ‘rect’，即可使用 rect 节点。const graph = new G6.Graph({ container: 'mountNode', width: 800, height: 600, defaultNode原创 2020-06-25 23:29:51 · 2335 阅读 · 0 评论 -
核心概念——节点/边/Combo——内置节点——Ellipse
title: Ellipseorder: 3G6 内置了 ellipse 节点，其默认样式如下。标签文本位于椭圆中央。使用方法如 内置节点 一节所示，配置节点的方式有两种：实例化图时全局配置，在数据中动态配置。1 实例化图时全局配置用户在实例化 Graph 时候可以通过 defaultNode 指定 type 为 'ellipse'，即可使用 ellipse 节点。const graph = new G6.Graph({ container: 'mountNode', .原创 2020-07-23 23:29:54 · 642 阅读 · 0 评论 -
核心概念——节点/边/Combo——内置节点——Diamond
title: Diamondorder: 4DiamondG6 内置了菱形 Diamond 节点，其默认样式如下。标签文本位于菱形中央。 使用方法如 内置节点 一节所示，配置节点的方式有两种：实例化图时全局配置，在数据中动态配置。1 实例化图时全局配置用户在实例化 Graph 时候可以通过 defaultNode 指定 type 为 'diamond'，即可使用 diamond 节点。const graph = new G6.Graph({ container:.原创 2020-07-23 23:30:03 · 644 阅读 · 0 评论 -
核心概念——节点/边/Combo——内置节点——Triangle
title: Triangleorder: 5TriangleG6 内置了三角形 Triangle 节点，其默认样式如下。标签文本位于三角形下方。使用方法如 内置节点 一节所示，配置节点的方式有两种：实例化图时全局配置，在数据中动态配置。1 实例化图时全局配置用户在实例化 Graph 时候可以通过 defaultNode 指定 type 为 'triangle'，即可使用 triangle 节点。const graph = new G6.Graph({ container:.原创 2020-07-23 23:30:11 · 598 阅读 · 0 评论 -
核心概念——节点/边/Combo——内置边——内置边总览
G6 提供了 9 种内置边：line：直线，不支持控制点；polyline：折线，支持多个控制点；arc：圆弧线；quadratic：二阶贝塞尔曲线；cubic：三阶贝塞尔曲线；cubic-vertical：垂直方向的三阶贝塞尔曲线，不考虑用户从外部传入的控制点；cubic-horizontal：水平方向的三阶贝塞尔曲线，不考虑用户从外部传入的控制点；loop：自环。这些内置边的默认样式分别如下图所示。 本文将概述 G6 中的各个内置边类型、内置边的通用属性、配置方法。各类型边详细配原创 2020-07-03 19:07:01 · 1698 阅读 · 0 评论 -
核心概念——节点/边/Combo——内置Combo——内置Combo总览
G6 的内置 Combo 包括 circle 和 rect 两种类型，分别如下图所示。 本文将概述 G6 中的各个内置 Combo 类型、内置 Combo 的通用属性、配置方法。各类型 Combo 详细配置项及配置方法见本目录下相应文档。⚠️ 注意: 使用 Combo 时，必须在示例化图时配置 groupByTypes 设置为 false，图中元素的视觉层级才能合理。内置 Combo 类型说明下面表格中显示了内置的各类 Combo，同时对一些特殊的字段进行了说明：名称描述默认示例circle圆形：原创 2020-07-03 19:10:14 · 1883 阅读 · 0 评论 -
高级指引——概念解释——图形 Shape 及其属性
title: 图形 Shape 及其属性order: 0G6 中的元素（节点/边）是由一个或多个图形 Shape组成，主要通过自定义节点或自定义边时在 draw 方法中使用 group.addShape 添加，G6 中支持以下的图形 Shape：circle：圆；rect：矩形；ellipse：椭圆；polygon：多边形；fan：扇形；image：图片；marker：标记；path：路径；text：文本；dom(svg)：DOM（图渲染方式 renderer 为 'svg' 时.原创 2020-07-11 23:59:51 · 5621 阅读 · 4 评论 -
拓展阅读 —— G6 坐标系深度解析
title: G6 坐标系深度解析order: 0在 G6 中，实例化图时指定 container 字段指定了画布 <Canvas></Canvas> 标签的父容器。而 DOM 的坐标与真正绘制图形时的坐标并不是同一套坐标系，这可能会使得如下场景中用户指定坐标时产生困惑：在画布上放置一个 position: absolute 的 DOM 元素，如 tooltip、 menu 等时：在鼠标点击画布上的位置放置；鼠标点击节点时，在节点位置。上面问题在 graph 缩放.原创 2020-07-11 23:59:35 · 3135 阅读 · 0 评论 -
高级指引——自定义节点
title: 自定义节点order: 1G6 提供了一系列内置节点，包括 circle、rect、diamond、triangle、star、image、modelRect。若内置节点无法满足需求，用户还可以通过 G6.registerNode('nodeName', options) 进行自定义节点，方便用户开发更加定制化的节点，包括含有复杂图形的节点、复杂交互的节点、带有动画的节点等。在本章中我们会通过五个案例，从简单到复杂讲解节点的自定义。这五个案例是： 1. 从无到有的定义节点：绘制图形；.原创 2020-07-11 23:59:26 · 4728 阅读 · 5 评论 -
高级指引——手动创建节点分组 Group
title: 手动创建节点分组 Grouporder: 8节点分组在默认情况下是根据数据自动渲染的，当数据中存在 groups 时根据 groups 字段渲染分组，当不存在 groups 时，则根据 nodes 数据中是否存在 groupId 来渲染分组。当数据中即不存在 groups，节点数据中也不存在 groupId 时，将不会渲染节点分组。CustomGroup 为节点分组，支持 Circle 和 Rect 两种类型。用户可通过 CustomGroup 创建节点分组、设置分组的样式.原创 2020-07-14 00:00:08 · 1257 阅读 · 0 评论 -
核心概念——节点分组 Combo
title: 节点分组 Comboorder: 8V3.5 后支持的全新节点分组 Combo 机制。原节点分组仍可使用。对于熟悉图可视化类库的用户来说，节点分组是非常实用的一个功能。此前，G6 已经存在一个节点分组 Node Group 功能，但它的机制无法支持一些较复杂的功能，例如：带有节点分组的图布局、自定义 Combo、嵌套节点分组的均匀 padding、节点与分组的边、分组与分组的边、空的节点分组等。V3.5 推出了全新的节点分组 Combo 机制，能够支持所有常用功能，参考 Demo。.原创 2020-07-14 00:00:04 · 3620 阅读 · 1 评论 -
核心概念——节点分组 Group
title: 节点分组 Grouporder: 9New Feature：自 G6 3.1.2 开始支持自定义节点分组的标题了，可以渲染带有标题的分组。对于熟悉图可视化类库的用户来说，节点分组可能是比较实用的一个功能。自 G6 3.0.5 版本开始，G6 加入了节点分组的功能，详情参考 Demo。数据结构新增节点分组功能时，尽量保持了 G6 数据结构的稳定性。为了体现分组的特性，我们在 nodes 数据项中加入了 groupId 属性，另外新增了 groups 字段，用于表示数据中所包括的分.原创 2020-07-14 00:00:14 · 1932 阅读 · 0 评论