{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-0-9-49-antv-gatsby-theme-antv-site-templates-example-tsx","path":"/zh/examples/scatter/customAnimate","result":{"data":{"site":{"siteMetadata":{"title":"G6","githubUrl":"git@github.com:antvis/g6.git","examples":[{"slug":"tree","icon":"tree","title":{"zh":"树图","en":"Tree Graph"}},{"slug":"net","icon":"net","title":{"zh":"一般图","en":"General Graph"}},{"slug":"graphql","icon":"graphql","title":{"zh":"其他表达形式","en":"Net Charts"}},{"slug":"shape","icon":"shape","title":{"zh":"元素","en":"Shape"}},{"slug":"interaction","icon":"interaction","title":{"zh":"交互","en":"Interaction"}},{"slug":"scatter","icon":"scatter","title":{"zh":"动画","en":"Animation"}},{"slug":"tool","icon":"tool","title":{"zh":"组件","en":"Component"}},{"slug":"case","icon":"case","title":{"zh":"复杂案例","en":"Case"}}],"playground":null},"pathPrefix":null},"allMarkdownRemark":{"edges":[{"node":{"html":"\n

\n\n\n\"npm\n\"NPM\n\"Percentage

\n

English README

\n

G6 是一个图可视化框架。它提供了一套图可视化的基础设置，包括渲染、布局、交互、动画、分析、辅助工具等。帮助开发者搭建属于自己的图 图分析 应用或是 图编辑器 应用。 详情请见开发文档。

\n

\n

\n

安装

\n
$ npm install @antv/g6
\n

使用

\n\n
import G6 from '@antv/g6';\n\nconst data = {\n  nodes: [{\n    id: 'node1',\n    x: 100,\n    y: 200\n  },{\n    id: 'node2',\n    x: 300,\n    y: 200\n  }],\n  edges: [{\n    target: 'node2',\n    source: 'node1'\n  }]\n};\nconst graph = new G6.Graph({\n  container: 'mountNode',\n  width: 500,\n  height: 500,\n  defaultNode: {\n    shape: 'circle',\n    style: {\n      fill: '#40a9ff',\n      stroke: '#096dd9'\n    }\n  },\n  nodeStateStyles: {\n    hover: {\n      lineWidth: 3\n    },\n    select: {\n      lineWidth: 5\n    }\n  }\n});\ngraph.data(data);\ngraph.render();
\n

开发

\n
$ npm install\n\n# run test case\n$ npm run test-live\n\n# build watching file changes and run demos\n$ npm run dev
\n

如何贡献

\n

请让我们知道您要解决或贡献什么，所以在贡献之前请先提交 issues 描述 bug 或建议。

\n

成为一个贡献者前请阅读 代码贡献规范.

\n

License

\n

MIT license.

","fields":{"slug":"/zh/docs/manual/introduction"},"frontmatter":{"title":"简介","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/introduction.zh.md"}}},{"node":{"html":"

什么是 G6

\n

G6 是一个前端图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等基础的图可视化能力。旨在让关系变得透明，简单。让用户获得关系数据的 Insight。

\n

入门教程简介

\n

我们在本入门教程中将会完成一个如下图所示简单的图可视化，我们将在后文中称其为 Tutorial案例，完整代码。
\"tutorial-demo-final.gif\"

\n
Tutorial案例 效果图
\n

前言

\n

我们将会通过本入门教程完成包含图的创建、渲染、元素的配置、布局、交互、动画、工具的最终的 Tutorial案例。在这部分教学中，读者将会学习到 G6 中基础和核心的功能。掌握该入门教程内容后，可以帮助读者初步理解 G6 并为深度理解 G6 打好基础。

\n

该入门教程将会划分为以下几个章节：

\n\n

提示 
该入门教程是为希望“边学边做”的读者设计的。如果您更希望从底层概念开始学习 G6，您可以参见：中级教程。

\n

基础知识

\n

本教程会从教你使用 G6 去创建一个完整的图可视化应用。在学习之前，我们假设读者对 HTML 和 JavaScript 有所了解，但并不要求对 G6 有任何的基础。如果读者对 G6 的基本内容已经熟知，可以适当跳过部分内容，有针对性地阅读重要的知识点。

\n

环境准备

\n

建议使用新版的 Chrome 浏览器作为运行环境，用任意的代码编辑器进行代码的编写即可。本教程默认采用 CDN 的方式直接引入 G6 类库，引入的版本是 3.1.1，此版本很多特性会大大简化我们的代码。如果希望在其他环境尝试本教程的学习，读者可以参考 快速上手 中的安装配置部分。

\n

新建 index.html 文件，并添加如下代码：

\n
<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <title>Tutorial Demo</title>\n  </head>\n  <body>\n    <!-- 引入 G6 -->\n    <script src=\"https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.1/build/g6.js\"></script>\n\n    <script>\n      console.log(G6.Global.version);\n    </script>\n  </body>\n</html>
\n

使用浏览器打开 index.html 文件，打开控制台，可以看到 G6 的版本号，说明 G6 已成功引入。
\"image.png\"

","fields":{"slug":"/zh/docs/manual/tutorial/preface"},"frontmatter":{"title":"前言","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/preface.md"}}},{"node":{"html":"

图形 Shape

\n

Shape 指 G6 中的图形、形状，它可以是圆形、矩形、路径等。它一般与 G6 中的节点、边相关。G6 中的每一种节点或边由一个或多个 Shape 组成。

\n

例如下图（左）的节点包含了一个圆形图形；下图（中）的节点含有有一个圆形和一个文本图形；下图（右）的节点中含有 5 个圆形（蓝绿色的圆和上下左右四个锚点）、一个文本图形。但每种节点和边都会有自己的唯一关键图形 keyShape，下图中三个节点的 keyShape 都是蓝绿色的圆，keyShape 主要用于交互检测、样式随状态自动更新等，见 keyShape。
\"image.png\"      \"image.png\"      \"image.png\"

\n
\n

（左）只含有一个圆形图形的节点，keyShape 是该圆形。（中）含有圆形和文本图形的节点，keyShape 是圆形。（右）含有主要圆形、文本、上下左右四个小圆形的节点，keyShape 是圆形。

\n
\n

G6 使用不同的 shape 及组合，设计了多种内置的节点和边。G6 内置节点的有 'circle'， 'rect'，'ellipse'，...（详见 内置节点）；内置边的有 'line'，'polyline'，'cubic'，...（详见 内置边）。

\n

除了使用内置的节点和边外，G6 还允许用户通过自己搭配和组合 Shape 进行节点和边的自定义，详见 自定义节点 和 自定义边。

\n

KeyShape

\n

如上所述，每一种节点和边都有一个唯一的关键图形 keyShape。keyShape 是在节点的 draw 方法中返回的图形对象，用于确定节点的包围盒（Bounding Box） —— bbox（x, y, width, height) ，从而计算相关边的连入点（与相关边的交点）。若 keyShape 不同，节点与边的交点计算结果不同。 

\n

示例 

\n

本例中的一个节点由一个 rect 图形和一个带灰色描边、填充透明的 circle 图形构成。

\n\n

\"2019-06-13.07.png\"

\n\n

\"2019-06-13.png\"

\n

Shape 的生命周期

\n
\n

当用户需要自定义节点和自定义边时，需要了解 Shape 的生命周期。使用内置节点和边则可以跳过这一部分内容。

\n
\n

从整体来看，Shape 的生命周期分为：

\n\n

Shape 作为 Graph 上的核心元素，这几个阶段都需要考虑，但是销毁可以交给 Graph 来处理，所以在定义 Shape 时不需要考虑，仅需要考虑三个阶段即可：

\n\n

所以我们在设计自定义节点和边时，定义了三个方法，若需要自定义节点和边，需要有选择性地复写它们：

\n\n

关于自定义Shape更多的方法请参考 Shape API 文档。

\n

anchorPoint

\n

节点的连接点 anchorPoint 指的是边连入节点的相对位置，即节点与其相关边的交点位置。anchorPoints 是一个二维数组，每一项表示一个连接点的位置，在一个图形 shape 中，连接点的位置如下图所示，x 和 y 方向上范围都是 [0, 1]：
\n

\n

节点中有了 anchorPoints 之后，相关边可以分别选择连入起始点、结束点的哪一个 anchorPoint。当需要在节点之间连多条线时，这种机制能够使边的连入更美观。

\n

边可以通过指定 sourceAnchor 和 targetAnchor 分别选择起始点、结束点的 anchorPoint。sourceAnchor 和 targetAnchor 取的值是相对应节点上 anchorPoints 数组的索引值。

\n

下面数据演示了如何在节点上配置连接点、在边上指定连接点：

\n
const data = {\n  nodes: [\n    {\n      id: 'node1',\n      label: 'node1',\n      x: 100,\n      y: 200,\n      // 该节点可选的连接点集合，该点有两个可选的连接点\n      anchorPoints: [\n        [0, 1],\n        [0.5, 1],\n      ],\n      shape: 'rect',\n    },\n    {\n      id: 'node2',\n      label: 'node2',\n      x: 300,\n      y: 400,\n      // 该节点可选的连接点集合，该点有两个可选的连接点\n      anchorPoints: [\n        [0.5, 0],\n        [1, 0.5],\n      ],\n      shape: 'rect',\n    },\n  ],\n  edges: [\n    {\n      source: 'node1',\n      target: 'node2',\n      // 该边连入 source 点的第 0 个 anchorPoint，\n      sourceAnchor: 0,\n      // 该边连入 target 点的第 0 个 anchorPoint，\n      targetAnchor: 0,\n      style: {\n        endArrow: true,\n      },\n    },\n    {\n      source: 'node2',\n      target: 'node1',\n      // 该边连入 source 点的第 1 个 anchorPoint，\n      sourceAnchor: 1,\n      // 该边连入 source 点的第 1 个 anchorPoint，\n      targetAnchor: 1,\n      style: {\n        endArrow: true,\n      },\n    },\n  ],\n};\n
","fields":{"slug":"/zh/docs/manual/middle/keyConcept"},"frontmatter":{"title":"G6 中的关键概念","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/middle/keyConcept.zh.md"}}},{"node":{"html":"

通用属性

\n

属性

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
属性名含义备注
fill设置用于填充绘画的颜色、渐变或模式对应canvas属性fillStyle
stroke设置用于笔触的颜色、渐变或模式对应canvas属性strokeStyle
shadowColor设置用于阴影的颜色
shadowBlur设置用于阴影的模糊级别数值越大，越模糊
shadowOffsetX设置阴影距形状的水平距离
shadowOffsetY设置阴影距形状的垂直距离
opacity设置绘图的当前 alpha 或透明值对应canvas属性globalAlpha
\n

用法

\n
group.addShape('rect', {\n  attrs: {\n    fill: 'red',\n    shadowOffsetX: 10,\n    shadowOffsetY: 10,\n    shadowColor: 'blue',\n    shadowBlur: 10,\n    opacity: 0.8,\n  },\n});\n
\n

圆图形 Circle

\n

属性

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
属性名含义备注
x圆心的 x 坐标
y圆心的 y 坐标
r圆的半径
\n

用法

\n
group.addShape('circle', {\n  attrs: {\n    x: 100,\n    y: 100,\n    r: 50,\n    fill: 'blue',\n  },\n});\n
\n

椭圆图形 Ellipse

\n

属性

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
属性名含义备注
x圆心的 x 坐标
y圆心的 y 坐标
rx水平半径
ry垂直半径
\n

用法

\n
group.addShape('ellipse', {\n  attrs: {\n    x: 100,\n    y: 100,\n    rx: 50,\n    ry: 50,\n    fill: 'blue',\n  },\n});\n
\n

扇形图形 Fan

\n

属性

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
属性名含义备注
x扇形圆心的 x 坐标
y扇形圆心的 y 坐标
rs水平半径
re垂直半径
startAngle起点弧度弧度是弧度，即使用Math.PI表示
endAngle终点弧度
clockwise为true时顺时针渲染，为false时逆时针渲染
\n

用法

\n
group.addShape('fan', {\n  attrs: {\n    x: 50,\n    y: 50,\n    re: 40,\n    rs: 30,\n    startAngle: (1 / 2) * Math.PI,\n    endAngle: Math.PI,\n    clockwise: false,\n    fill: '#b7eb8f',\n  },\n});\n
\n

图片图形 Image

\n

属性

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
属性名含义备注
x图片左上角的 x 坐标
y图片左上角的 y 坐标
width图片宽度
height图片高度
img图片源G6支持多种格式的图片：
- url
- ImageData
- Image
- canvas
\n

用法

\n
group.addShape('image', {\n  attrs: {\n    x: 0,\n    y: 0,\n    img:\n      'https://g.alicdn.com/cm-design/arms-trace/1.0.155/styles/armsTrace/images/TAIR.png',\n  },\n});\n
\n

标记图形 Marker

\n

属性

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
属性名含义备注
x中心的 x 坐标
y中心的 y 坐标
r形状半径
symbol指定形状内置了一些常用形状，如圆形circle, 矩形 square, 菱形 diamond,三角形 triangle, 倒三角形triangle-down，也可以是自定义的path路径。
\n

用法

\n
group.addShape('marker', {\n  attrs: {\n    x: 10,\n    y: 10,\n    r: 10,\n    symbol: function(x, y, r) {\n      return [\n        [ 'M', x, y ],\n        [ 'L', x + r, y + r ],\n        [ 'L'，x + r * 2, y ],\n        [ 'Z' ]\n      ]\n    }\n  }\n});
\n

多边形图形 Polygon

\n

属性

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
属性名含义备注
points多边形的所有端点坐标数组形式
\n

用法

\n
group.addShape('polygon', {\n  attrs: {\n    points: [\n      [30, 30],\n      [40, 20],\n      [30, 50],\n      [60, 100],\n    ],\n    fill: 'red',\n  },\n});\n
\n

矩形图形 Rect

\n

属性

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
属性名含义备注
x矩形左上角的 x 坐标
y矩形左上角的 y 坐标
width矩形的宽度
height矩形的高度
radius定义圆角支持整数或数组形式， 分别对应左上、右上、右下、左下角的半径：
- radius缩写为 1或 [ 1 ] 相当于 [ 1, 1, 1, 1 ]
- radius 缩写为 [ 1, 2 ] 相当于 [ 1, 2, 1, 2 ]
- radius 缩写为 [ 1, 2, 3 ] 相当于 [ 1, 2, 3, 2 ]
\n

用法

\n
group.addShape('rect', {\n  attrs: {\n    x: 150,\n    y: 150,\n    width: 150,\n    height: 150,\n    stroke: 'black',\n    radius: [2, 4],\n  },\n});\n
","fields":{"slug":"/zh/docs/api/properties/NodeProperties"},"frontmatter":{"title":"节点属性","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/properties/NodeProperties.zh.md"}}},{"node":{"html":"

Node继承自Item，所以，Item上面的方法在Node实例中都可以调用。

\n

lock()

\n
\n

3.1.4 版本新增

\n
\n

锁定当前节点，锁定节点后，该节点不再响应拖动节点的事件。

\n

提示锁定节点后，拖动画布和缩放画布的操作依然对该节点有效，如果想在锁定节点后，不响应拖动画布和缩放的事件，需要自定义拖动画布和缩放的 Behavior，具体可参考锁定节点不响应拖动画布的事件【todo】和锁定节点不响应缩放事件【todo】。

\n

用法

\n
const node = graph.findById('node');\nnode.lock();\n
\n

unlock()

\n
\n

3.1.4 版本新增

\n
\n

解锁锁定的节点。

\n

用法

\n
const node = graph.findById('node');\nnode.unlock();\n
\n

hasLocked()

\n
\n

3.1.4 版本新增

\n
\n

检测节点是否处于锁定状态。

\n

返回值

\n\n

用法

\n
const node = graph.findById('node');\nconst hasLocked = node.hasLocked();\n
\n

getEdges()

\n

获取与当前节点有关联的所有边。

\n

返回值

\n\n

用法

\n
// 获取与node关联的所有边\nconst edges = node.getEdges();\n
\n

getInEdges()

\n

获取与当前节点关联的所有入边。

\n

返回值

\n\n

用法

\n
// 获取与node关联的所有入边\nconst edges = node.getInEdges();\n
\n

getOutEdges()

\n

获取与当前节点关联的所有出边。

\n

返回值

\n\n

用法

\n
// 获取与node关联的所有出边\nconst edges = node.getOutEdges();\n
\n

getAnchorPoints()

\n

获取节点上面定义的锚点。

\n

返回值

\n\n

用法

\n
// 获取定义在节点上的锚点数据\nconst anchor = node.getAnchorPoints();\n
\n

getLinkPoint(point)

\n

获取距离指定坐标最近的一个锚点。

\n

参数

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称类型是否必选描述
pointobjecttrue节点外部的一个点，用于计算交点及最近的锚点
\n

返回值

\n\n

用法

\n
const point = {\n  x: 100,\n  y: 105,\n};\n// 获取连接点\nconst linkPoint = node.getLinkPoint(point);\n
\n

getLinkPointByAnchor(index)

\n

根据锚点索引获取连接点的x、y坐标。

\n

参数

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称类型是否必选描述
indexnumbertrue锚点的索引
\n

返回值

\n\n

用法

\n
// 获取定义在节点上的第一个锚点\nconst anchor = node.getLinkPointByAnchor(0);\n
\n

addEdge(edge)

\n

添加指定的边到当前节点上。

\n

参数

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称类型是否必选描述
edgeEdgetrueEdge实例
\n

用法

\n
const edge = new Edge({\n  // TODO\n});\nnode.addEdge(edge);\n
\n

removeEdge(edge)

\n

移除与当前节点相关的指定边。

\n

参数

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称类型是否必选描述
edgeEdgetrueEdge实例
\n

用法

\n
const edge = node.removeEdge(edge); // TODO\n
","fields":{"slug":"/zh/docs/api/nodeEdge/Node"},"frontmatter":{"title":"Node","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/nodeEdge/Node.zh.md"}}},{"node":{"html":"

背景

\n

社交网络分析是图可视化中一个重要的应用场景。
随着社交网络越来越流行，人与人、人与组织之间的关系变得越来越复杂，使用传统的分析手段，已经很难满足我们的分析需求。在这种情况下，图分析及图可视化显得愈发重要。

\n

功能概述

\n

基于 G6 实现一个图分析应用，模拟了一个关系分析场景，使用模拟数据，来展示在图分析应用中我们可以做的一些事情：

\n\n\n

关系扩散

\n

通过指定输入查询到具体的个人后，可以针对查询到的个人，做 1-6 度的关系扩散，可以进一步分析与他相关的人或组织的关系。

\n

适用场景：在社交网络中，通过 A 的一度关系可以查询到他的所有朋友，通过二度关系，可以查询到他的朋友的朋友，通过分析相关动态，可以了解到关于 A 的更多的信息。

\n\n

关系预判

\n

在海量的社交网络数据中，人与人、人与组织之间会存在很多种不同类型的关系，我们已知的都是已经真实发生的事情，如 A 是 B 的朋友，B 属于 C 组织，但我们不知道如果 D 也属于 E 组织的话，整个网络会发生什么样的变化。这个时候，关系预判就能够帮助我们，我们通过输入两个节点 D 和 E 来判断，如果我们在 D 和 E节点之间新增一条F 类型的关系，与之相关的关系就会很清晰地呈现在我们眼前。

\n

适用场景：在社交网络中，A 和 B 之间没有直接关系，但想知道如何 A 和 B 之间有某种关系的话，整个关系网络会发生什么样的变化。

\n\n

关系聚合

\n

A 和 B 之间可能会存在多个同事关系，如 A 和 B 在 C 公司是同事，在 D 公司也是同事，只是两条同事关系的时间戳不同。对于这种情况，我们没必要将全有的关系都绘制到页面上，可以将同类型的关系合并成一条关系，点击时再展开。

\n

适用场景：为了降低视觉干扰，将多条同类型的关系合并成一条。

\n\n

圈检测

\n

在社交网络数据中，假设我们已经有了一批类似 A 是 B 的朋友，B 是 C 的朋友，C 又是 A 的朋友 这样的朋友圈，这个时候，有一个或两个用户 D / E ，我们想知道 D 和 E 是否在我们已知的朋友圈中，可以通过圈检测的功能，输入 D 或 E，如果在已知的朋友圈中，则会展示所在的所有圈。

\n

适用场景：检测给定用户 A 和 B 是否存在于已知的朋友圈中。

\n\n

圈查询

\n

对于已知的圈，我们可以查询每个圈中包含的节点，以及它们之间的关系。

\n

适用场景：查询指定朋友圈中所有的用户以及用户之间的关系。

\n\n

高效分析

\n

图分析应用中，为了提升分析的效率，我们提供了数据过滤、标记重点节点和边、隐藏 / 显示 Label等辅助功能，可帮助用户更快更好地进行分析。

\n

数据过滤

\n

当画布上存在大量的节点及边时，想要进行高效分析是件很困难的事情，我们可以通过过滤的功能，将暂时不需要关注的类型的节点和边先隐藏起来，以便我们将精力放在重点的节点和边上面。

\n\n

标记节点及边

\n

在分析过程中，将重点需要关注的节点和边进行标记，可以在复杂的网络关系中很清晰地呈现出我们需要重点关注的内容。

\n\n

尤其在特别复杂的网络中，该功能特别有用。

\n\n

隐藏 / 显示节点

\n

在分析过程中，对于一些不是很重要的节点，我们可以选择隐藏掉它和与它相关的边，这样就方便我们将注意力集中在重点的节点上面。当分析完以后，我们还可以选择将隐藏的节点全部显示出来。

\n\n

隐藏 / 显示 Label

\n

当边特别多时，边上的 label 不仅会重叠在一起，也会影响我们进一步的分析，我们选择将边上的 label 隐藏。

\n\n

总结

\n

本应用以模拟的社交网络数据为例，演示了通过使用 G6 构建的一个图分析的应用。在实际的场景中，不仅仅局限于社交网络数据，任何重关系类的数据，都适合使用图分析的技术来进行分析，如风控、反洗钱、信用卡诈骗等金融领域，商品、商家及卖家等电商领域。通过使用图分析技术，我们可以很轻易地具备传统分析方法所欠缺的能力，如分析朋友的朋友这种多度关系的能力。G6 是一款图可视化引擎，专注于图分析领域，非常适合用来构建重型的图分析应用。

\n

应用地址

\n

基于 G6 的图分析应用源码：https://github.com/baizn/g6-analyzer-example
G6 官网：https://antv.alipay.com/zh-cn/g6/3.x/index.html
G6 GitHub：https://github.com/antvis/g6

","fields":{"slug":"/zh/docs/manual/cases/relations"},"frontmatter":{"title":"基于 G6 的图分析应用","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/cases/relations.zh.md"}}},{"node":{"html":"

G6 中的元素（节点/边）是由一个或多个小图形 Shape组成，主要通过自定义节点或自定义边时在 draw 方法中使用 group.addShape 添加，G6 中支持以下的图形 Shape：

\n\n

各图形 Shape 的通用属性

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
属性名含义备注
fill设置用于填充绘画的颜色、渐变或模式对应 canvas 属性 fillStyle
stroke设置用于笔触的颜色、渐变或模式对应 canvas 属性 strokeStyle
shadowColor设置用于阴影的颜色
shadowBlur设置用于阴影的模糊级别数值越大，越模糊
shadowOffsetX设置阴影距形状的水平距离
shadowOffsetY设置阴影距形状的垂直距离
opacity设置绘图的当前 alpha 或透明值对应 canvas 属性 globalAlpha
\n

用法

\n
group.addShape('rect', {\n  attrs: {\n    fill: 'red',\n    shadowOffsetX: 10,\n    shadowOffsetY: 10,\n    shadowColor: 'blue',\n    shadowBlur: 10,\n    opacity: 0.8,\n  },\n});\n
\n

圆图形 Circle

\n

属性

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
属性名含义备注
x圆心的 x 坐标
y圆心的 y 坐标
r圆的半径
\n

用法

\n
group.addShape('circle', {\n  attrs: {\n    x: 100,\n    y: 100,\n    r: 50,\n    fill: 'blue',\n  },\n});\n
\n

椭圆图形 Ellipse

\n

属性

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
属性名含义备注
x圆心的 x 坐标
y圆心的 y 坐标
rx水平半径
ry垂直半径
\n

用法

\n
group.addShape('ellipse', {\n  attrs: {\n    x: 100,\n    y: 100,\n    rx: 50,\n    ry: 50,\n    fill: 'blue',\n  },\n});\n
\n

扇形图形 Fan

\n

属性

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
属性名含义备注
x扇形圆心的 x 坐标
y扇形圆心的 y 坐标
rs水平半径
re垂直半径
startAngle起点弧度弧度是弧度，即使用 Math.PI 表示
endAngle终点弧度
clockwise为 true 时顺时针渲染，为 false 时逆时针渲染
\n

用法

\n
group.addShape('fan', {\n  attrs: {\n    x: 50,\n    y: 50,\n    re: 40,\n    rs: 30,\n    startAngle: (1 / 2) * Math.PI,\n    endAngle: Math.PI,\n    clockwise: false,\n    fill: '#b7eb8f',\n  },\n});\n
\n

图片图形 Image

\n

属性

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
属性名含义备注
x图片左上角的 x 坐标
y图片左上角的 y 坐标
width图片宽度
height图片高度
img图片源G6 支持多种格式的图片：url、ImageData、Image、canvas
\n

用法

\n
group.addShape('image', {\n  attrs: {\n    x: 0,\n    y: 0,\n    img:\n      'https://g.alicdn.com/cm-design/arms-trace/1.0.155/styles/armsTrace/images/TAIR.png',\n  },\n});\n
\n

标记图形 Marker

\n

属性

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
属性名含义备注
x中心的 x 坐标
y中心的 y 坐标
r形状半径
symbol指定形状内置了一些常用形状，如圆形 circle ， 矩形 square ， 菱形 diamond ，三角形 triangle ， 倒三角形 triangle-down ，也可以是自定义的 path 路径。
\n

用法

\n
group.addShape('marker', {\n  attrs: {\n    x: 10,\n    y: 10,\n    r: 10,\n    symbol: function(x, y, r) {\n      return [['M', x, y], ['L', x + r, y + r], ['L', x + r * 2, y], ['Z']];\n    },\n  },\n});\n
\n

多边形图形 Polygon

\n

属性

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
属性名含义备注
points多边形的所有端点坐标数组形式
\n

用法

\n
group.addShape('polygon', {\n  attrs: {\n    points: [\n      [30, 30],\n      [40, 20],\n      [30, 50],\n      [60, 100],\n    ],\n    fill: 'red',\n  },\n});\n
\n

矩形图形 Rect

\n

属性

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
属性名含义备注
x矩形左上角的 x 坐标
y矩形左上角的 y 坐标
width矩形的宽度
height矩形的高度
radius定义圆角支持整数或数组形式， 分别对应左上、右上、右下、左下角的半径：
- radius 缩写为 1 或 [ 1 ] 相当于 [ 1, 1, 1, 1 ]
- radius 缩写为 [ 1, 2 ] 相当于 [ 1, 2, 1, 2 ]
- radius 缩写为 [ 1, 2, 3 ] 相当于 [ 1, 2, 3, 2 ]
\n

用法

\n
group.addShape('rect', {\n  attrs: {\n    x: 150,\n    y: 150,\n    width: 150,\n    height: 150,\n    stroke: 'black',\n    radius: [2, 4],\n  },\n});\n
\n

路径 Path

\n

  注意：\n边太细时候点击不中，请设置 lineAppendWidth 属性值。

\n

属性

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
属性名含义备注
path线条路径可以是 String 形式，也可以是线段的数组。
startArrow起始端的箭头为 true 时为默认的箭头效果，也可以是一个自定义箭头
endArrow末尾端的箭头为 true 时为默认的箭头效果，也可以是一个自定义箭头
lineAppendWidth边的击中范围提升边的击中范围，扩展响应范围，数值越大，响应范围越广
lineCap设置线条的结束端点样式
lineJoin设置两条线相交时，所创建的拐角形状
lineWidth设置当前的线条宽度
miterLimit设置最大斜接长度
lineDash设置线的虚线样式，可以指定一个数组一组描述交替绘制线段和间距（坐标空间单位）长度的数字。 如果数组元素的数量是奇数， 数组的元素会被复制并重复。例如， [5, 15, 25] 会变成 [5, 15, 25, 5, 15, 25]。
\n

用法

\n
group.addShape('path', {\n  attrs: {\n    startArrow: {\n      path: 'M 10,0 L -10,-10 L -10,10 Z', // 自定义箭头为中心点在(0, 0)，指向 x 轴正方向的path\n      d: 10,\n    },\n    endArrow: {\n      path: 'M 10,0 L -10,-10 L -10,10 Z', // 自定义箭头为中心点在(0, 0)，指向 x 轴正方向的path\n      d: 10,\n    },\n    path: [\n      ['M', 100, 100],\n      ['L', 200, 200],\n    ],\n    stroke: '#000',\n    lineWidth: 8,\n    lineAppendWidth: 5,\n  },\n});\n
","fields":{"slug":"/zh/docs/manual/advanced/shape-and-properties"},"frontmatter":{"title":"关键概念-图形 Shape 及其属性","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/advanced/shape-and-properties.zh.md"}}},{"node":{"html":"

在 G6 中，可以通过以下三种方式更新文本样式。

\n

实例化Graph

\n

实例化Graph时，可以通过在defaultNode或defaultEdge中指定labelCfg属性修改文本的样式。

\n
const graph = new G6.Graph({\n  container: 'mountNode',\n  width: 1000,\n  height: 800,\n  defaultNode: {\n    shape: 'node',\n    labelCfg: {\n      style: {\n        fill: '#fff',\n        fontSize: 14,\n      },\n    },\n  },\n  defaultEdge: {\n    shape: 'line-with-arrow',\n    labelCfg: {\n      style: {\n        fill: '#fff',\n        fontSize: 14,\n      },\n    },\n  },\n});\n
\n

数据中指定labelCfg

\n
const data = {\n  nodes: [\n    {\n      id: 'node1',\n      label: 'node1',\n      labelCfg: {\n        style: {\n          fill: '#fff',\n          fontSize: 12,\n        },\n      },\n    },\n  ],\n};\n
\n

使用update/updateItem

\n

使用update/updateItem更新节点或边时，也可以更新节点或边上的文本。

\n
graph.updateItem(node, {\n  // 节点的样式\n  style: {\n    stroke: 'blue',\n  },\n  // 节点上文本的样式\n  labelCfg: {\n    style: {\n      fill: '#fff',\n      fontSize: 12,\n    },\n  },\n});\n
\n

想知道文本都可以设置哪些属性，请👉参考文本属性样式。

","fields":{"slug":"/zh/docs/manual/FAQ/updateText"},"frontmatter":{"title":"如何更新文本样式","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/FAQ/updateText.zh.md"}}},{"node":{"html":"

G6 内置了直线 line 边，其默认样式如下。
\"image.png\"

\n

使用方法

\n

如 内置边 一节所示，配置边的方式有两种：实例化图时全局配置，在数据中动态配置。

\n

1 实例化图时全局配置

\n

用户在实例化 Graph 时候可以通过 defaultEdge 指定 shape 为 'line'，即可使用 line 边。

\n
const graph = new G6.Graph({\n  container: 'mountNode',\n  width: 800,\n  height: 600,\n  defaultEdge: {\n    shape: 'line',\n    // 其他配置\n  },\n});\n
\n

2 在数据中动态配置

\n

如果需要使不同节点有不同的配置，可以将配置写入到节点数据中。这种配置方式可以通过下面代码的形式直接写入数据，也可以通过遍历数据的方式写入。

\n
const data = {\n  nodes: [\n    ... // 节点\n  ],\n  edges: [{\n    source: 'node0',\n    target: 'node1'\n    shape: 'line',\n    ... // 其他配置\n    style: {\n      ...  // 样式属性，每种边的详细样式属性参见各边文档\n    }\n  },\n    ... // 其他边\n  ]\n}
\n

配置项说明

\n

line 边支持以下的配置项，对于 Object 类型的配置项将在后面有详细讲解：

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称含义类型备注
color直线的颜色String优先级低于 style 中的 stroke
style直线的样式ObjectCanvas支持的属性
label标签文本文字String
labelCfg文件配置项Object
\n

样式属性 style

\n

Object 类型。配置项与边的通用样式属性相同，见 内置边。下面代码演示在实例化图时全局配置方法中配置 style，以达到下图效果。
\"image.png\"

\n
const data = {\n  nodes: [\n    {\n      id: 'node0',\n      x: 100,\n      y: 100,\n      size: 20,\n    },\n    {\n      id: 'node1',\n      x: 200,\n      y: 100,\n      size: 20,\n    },\n  ],\n  edges: [\n    {\n      source: 'node0',\n      target: 'node1',\n      shape: 'line',\n      label: 'line',\n    },\n  ],\n};\nconst graph = new G6.Graph({\n  container: 'mountNode',\n  width: 800,\n  height: 600,\n  defaultEdge: {\n    // shape: 'line',  // 在数据中已经指定 shape，这里无需再次指定\n    style: {\n      stroke: 'steelblue',\n      lineWidth: 5,\n    },\n    labelCfg: {\n      position: 'end',\n      refY: -10,\n    },\n  },\n});\ngraph.data(data);\ngraph.render();\n
\n

标签文本配置 labelCfg

\n

Object 类型。其配置与边的通用文本配置相同，见 内置边。
基于上面 样式属性 style 中的代码，下面代码在 defaultNode 中增加了 labelCfg 配置项进行文本的配置，使之达到如下图效果。
\"image.png\"

\n
const data = {\n  // ... data 内容\n};\nconst graph = new G6.Graph({\n  // ... 图的其他配置\n  defaultEdge: {\n    // ... 其他配置\n    labelCfg: {\n      position: 'end',\n      refY: -10,\n    },\n  },\n});\n// ...\n
","fields":{"slug":"/zh/docs/manual/middle/elements/edges/line"},"frontmatter":{"title":"line","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/middle/elements/edges/line.zh.md"}}},{"node":{"html":"

G6 内置了圆 Circle 节点，其默认样式如下。标签文本位于圆形中央。
\"image.png\"

\n

使用方法

\n

如 内置节点 一节所示，配置节点的方式有两种：实例化图时全局配置，在数据中动态配置。

\n

1 实例化图时全局配置

\n

用户在实例化 Graph 时候可以通过 defaultNode 指定 shape 为 'circle'，即可使用 circle 节点。

\n
const graph = new G6.Graph({\n  container: 'mountNode',\n  width: 800,\n  height: 600,\n  defaultNode: {\n    shape: 'circle', // 节点类型\n    // ... 其他配置\n  },\n});\n
\n

2 在数据中动态配置

\n

如果需要使不同节点有不同的配置，可以将配置写入到节点数据中。这种配置方式可以通过下面代码的形式直接写入数据，也可以通过遍历数据的方式写入。

\n
const data = {\n  nodes: [\n  {\n\t  id: 'node0',\n    shape: 'circle', // 节点类型\n    ... // 其他配置\n  },\n    ... // 其他节点\n  ],\n  edges: [\n    ... // 边\n  ]\n}
\n

配置项说明

\n

circle 节点支持以下的配置项，对于 Object 类型的配置项将在后面有详细讲解：

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称含义类型备注
size圆的直径NumberArray
stylecircle 默认样式ObjectCanvas支持的属性
labelCfg文件配置项Object
stateStyles各状态下的样式Object只对keyShape起作用
linkPoints相关边的连入点Object默认不显示
icon圆上 icon 配置Object默认不显示icon
\n
样式属性 style
\n

Object 类型。通过 style 配置来修改节点的填充色、描边等属性。下面代码演示在实例化图时全局配置方法中配置 style，使之达到如下图效果。
\"image.png\"

\n
const data = {\n  nodes: [\n    {\n      x: 100,\n      y: 100,\n      shape: 'circle',\n      label: 'circle',\n    },\n  ],\n};\nconst graph = new G6.Graph({\n  container: 'mountNode',\n  width: 800,\n  height: 600,\n  defaultNode: {\n    // shape: 'circle',  // 在数据中已经指定 shape，这里无需再次指定\n    style: {\n      fill: '#bae637',\n      stroke: '#eaff8f',\n      lineWidth: 5,\n    },\n  },\n});\ngraph.data(data);\ngraph.render();\n
\n
标签文本配置 labelCfg
\n

Object 类型。通过 labelCfg 配置标签文本。基于上面 样式属性 style 中的代码，下面代码在 defaultNode 中增加了 labelCfg 配置项进行文本的配置，使之达到如下图效果。
\"image.png\"

\n
const data = {\n  // ... data 内容\n};\nconst graph = new G6.Graph({\n  // ... 图的其他属性\n  defaultNode: {\n    // ... 节点其他属性\n    labelCfg: {\n      position: 'bottom',\n      offset: 10,\n      style: {\n        // ... 文本样式的配置\n      },\n    },\n  },\n});\n// ...\n
\n
边的连入点 linkPoints
\n

Object 类型。通过配置 linkPoints ，可以指定节点周围「上、下、左、右」四个方向上边的连入点。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称含义类型备注
top是否显示上部的连接点Boolean默认为false
bottom是否显示底部的连接点Boolean默认为false
left是否显示左侧的连接点Boolean默认为false
right是否显示右侧的连接点Boolean默认为false
size连接点的大小Number默认为3
fill连接点的填充色String默认为#72CC4A
stroke连接点的描边颜色String默认为#72CC4A
lineWidth连接点描边的宽度Number默认为1
\n

基于上面 样式属性 style 中的代码，下面代码在 defaultNode 中增加了 linkPoints 配置项进行连入点的配置，使之达到如下图效果。
\"image.png\"

\n
const data = {\n  // ... data 内容\n};\nconst graph = new G6.Graph({\n  // ... 图的其他属性\n  defaultNode: {\n    // ... 其他属性\n    linkPoints: {\n      top: true,\n      bottom: true,\n      left: true,\n      right: true,\n      fill: '#fff',\n      size: 5,\n    },\n  },\n});\n// ...\n
\n
图标 icon
\n

Object 类型。通过配置 icon，可以在节点上显示小图标。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称含义类型备注
show是否显示iconBoolean默认为false，不显示
widthicon的宽度Number默认为16
heighticon的高度Number默认为16
imgicon的地址String
\n

基于上面 样式属性 style 中的代码，下面代码在 defaultNode 中增加了 icon 配置项进行图标的配置，使之达到如下图效果。
\"image.png\"

\n
const data = {\n  // ... data 内容\n};\nconst graph = new G6.Graph({\n  // ... 图的其他属性\n  defaultNode: {\n    // ... 其他属性\n    icon: {\n      show: true,\n      //img: '...', 可更换为其他图片地址\n      width: 25,\n      height: 25,\n    },\n  },\n});\n// ...\n
","fields":{"slug":"/zh/docs/manual/middle/elements/nodes/circle"},"frontmatter":{"title":"circle","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/middle/elements/nodes/circle.zh.md"}}},{"node":{"html":"

G6.registerNode(nodeName, options, extendNodeName)

\n

当内置节点不满足需求时，可以通过G6.registerNode(nodeName, options, extendNodeName)方法自定义节点。

\n

参数

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称类型是否必选描述
nodeNamestringtrue自定义节点名称，需保持唯一性。
optionsobjecttrue自定义节点时的配置项，配置项中包括完整的生命周期方法，具体请参考：Shape 文档。
extendNodeNamestringfalse自定义节点时可基于内置节点进行定义，该字段表示内置节点名称，所有内置节点请参考：内置节点。
\n

用法

\n
G6.registerNode(\n  'nodeName',\n  {\n    /**\n     * 绘制节点/边，包含文本\n     * @param  {Object} cfg 节点的配置项\n     * @param  {G.Group} group 节点的容器\n     * @return {G.Shape} 绘制的图形，通过node.get('keyShape') 可以获取到\n     */\n    draw(cfg, group) {},\n    /**\n     * 绘制后的附加操作，默认没有任何操作\n     * @param  {Object} cfg 节点的配置项\n     * @param  {G.Group} group 节点的容器\n     */\n    afterDraw(cfg, group) {},\n    /**\n     * 更新节点，包含文本\n     * @override\n     * @param  {Object} cfg 节点的配置项\n     * @param  {Node} node 节点\n     */\n    update(cfg, node) {},\n    /**\n     * 更新节点后的操作，一般同 afterDraw 配合使用\n     * @override\n     * @param  {Object} cfg 节点的配置项\n     * @param  {Node} node 节点\n     */\n    afterUpdate(cfg, node) {},\n    /**\n     * 设置节点的状态，主要是交互状态，业务状态请在 draw 方法中实现\n     * 单图形的节点仅考虑 selected、active 状态，有其他状态需求的用户自己复写这个方法\n     * @param  {String} name 状态名称\n     * @param  {Object} value 状态值\n     * @param  {Node} node 节点\n     */\n    setState(name, value, node) {},\n    /**\n     * 获取控制点\n     * @param  {Object} cfg 节点、边的配置项\n     * @return {Array|null} 控制点的数组,如果为 null，则没有控制点\n     */\n    getAnchorPoints(cfg) {},\n  },\n  'extendNodeName',\n);\n
\n

G6.registerEdge(edgeName, options, extendEdgeName)

\n

当内置的边不能满足需求时，可以通过registerEdge(edgeName, options, extendEdgeName)方法注册自定义的边。

\n

参数

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称类型是否必选描述
edgeNamestringtrue自定义边的名称
optionsobjecttrue自定义边时的配置项，配置项中包括完整的生命周期方法，具体请参考：Shape 文档。
extendEdgeNamestringfalse自定义边时可基于内置边进行定义，该字段表示内置边的名称，所有内置边请参考：内置边。
\n

用法

\n
G6.registerEdge(\n  'edgeName',\n  {\n    /**\n     * 绘制节点/边，包含文本\n     * @param  {Object} cfg 节点的配置项\n     * @param  {G.Group} group 节点的容器\n     * @return {G.Shape} 绘制的图形，通过node.get('keyShape') 可以获取到\n     */\n    draw(cfg, group) {},\n    /**\n     * 绘制后的附加操作，默认没有任何操作\n     * @param  {Object} cfg 节点的配置项\n     * @param  {G.Group} group 节点的容器\n     */\n    afterDraw(cfg, group) {},\n    /**\n     * 更新节点，包含文本\n     * @override\n     * @param  {Object} cfg 节点的配置项\n     * @param  {Node} node 节点\n     */\n    update(cfg, node) {},\n    /**\n     * 更新节点后的操作，一般同 afterDraw 配合使用\n     * @override\n     * @param  {Object} cfg 节点的配置项\n     * @param  {Node} node 节点\n     */\n    afterUpdate(cfg, node) {},\n    /**\n     * 设置节点的状态，主要是交互状态，业务状态请在 draw 方法中实现\n     * 单图形的节点仅考虑 selected、active 状态，有其他状态需求的用户自己复写这个方法\n     * @param  {String} name 状态名称\n     * @param  {Object} value 状态值\n     * @param  {Node} node 节点\n     */\n    setState(name, value, node) {},\n  },\n  'extendEdgeName',\n);\n
\n

G6.registerBehavior(behaviorName, behavior)

\n

当内置的 Behavior 不能满足需求时，使用registerBehavior(behaviorName, behavior)方法注册自定义的交互行为。

\n

参数

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称类型是否必选描述
behaviorNamestringtrue自定义 Behavior 的名称
behaviorobjecttrue自定义 behavior 时的配置项，配置项中包括的方法及作用具体请参考：Behavior 文档。
\n

用法

\n
// 注册自定义Behavior\nG6.registerBehavior('behaviorName', {\n  // 设置事件及处理事件的回调之间的对应关系\n  getEvents() {\n    return {\n      'node:click': 'onClick',\n      mousemove: 'onMousemove',\n      'edge:click': 'onEdgeClick',\n    };\n  },\n  /**\n   * 处理node:click事件的回调\n   * @override\n   * @param  {Object} evt 事件句柄\n   */\n  onClick(evt) {\n    const node = evt.item;\n    const graph = this.graph;\n    const point = { x: evt.x, y: evt.y };\n    const model = node.getModel();\n    // TODO\n  },\n  /**\n   * 处理mousemove事件的回调\n   * @override\n   * @param  {Object} evt 事件句柄\n   */\n  onMousemove(evt) {\n    // TODO\n  },\n  /**\n   * 处理:click事件的回调\n   * @override\n   * @param  {Object} evt 事件句柄\n   */\n  onEdgeClick(evt) {\n    // TODO\n  },\n});\n
\n

G6.registerLayout(layoutName, layout)

\n

当内置布局不满足需求时，可以通过 G6.registerLayout(layoutName, layout) 方法自定义布局。

\n

参数

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称类型是否必选描述
layoutNamestringtrue自定义布局名称
layoutobjecttrue自定义布局的配置项，配置项中包括的方法及作用具体请参考：Layout 文档。
\n

用法

\n
G6.registerLayout('layoutName', {\n  /**\n   * 定义自定义行为的默认参数，会与用户传入的参数进行合并\n   */\n  getDefaultCfg() {\n    return {};\n  },\n  /**\n   * 初始化\n   * @param {object} data 数据\n   */\n  init(data) {\n    const self = this;\n    self.nodes = data.nodes;\n    self.edges = data.edges;\n  },\n  /**\n   * 执行布局\n   */\n  execute() {\n    // TODO\n  },\n  /**\n   * 根据传入的数据进行布局\n   * @param {object} data 数据\n   */\n  layout(data) {\n    const self = this;\n    self.init(data);\n    self.execute();\n  },\n  /**\n   * 更新布局配置，但不执行布局\n   * @param {object} cfg 需要更新的配置项\n   */\n  updateCfg(cfg) {\n    const self = this;\n    Util.mix(self, cfg);\n  },\n  /**\n   * 销毁\n   */\n  destroy() {\n    const self = this;\n    self.positions = null;\n    self.nodes = null;\n    self.edges = null;\n    self.destroyed = true;\n  },\n});\n
","fields":{"slug":"/zh/docs/api/GlobalAPI"},"frontmatter":{"title":"G6","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"api/GlobalAPI.zh.md"}}},{"node":{"html":"

G6 默认提供的节点是一个基础图形加一个文本图形的实现。可选的内置节点包括 circle，rect，ellipse，diamond，triangle，star，image，modelRect，这些内置节点的默认样式分别如下图所示。
\n

\n

内置节点类型说明

\n

下面表格中显示了内置的各类节点，同时对一些特殊的字段进行了说明：

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称描述默认示例
circle圆形：
- size 是单个数字，表示直径
- 圆心位置对应节点的位置
- color 字段默认在描边上生效
- 标签文本默认在节点中央
- 更多字段见 circle 节点的配置
\"image.png\"
rect矩形：
- size 是数组，例如：[100, 50]
- 矩形的中心位置是节点的位置，而不是左上角
- color 字段默认在描边上生效
- 标签文本默认在节点中央
- 更多字段见 rect 节点的配置
\"image.png\"
ellipse椭圆：
- size 是数组，表示椭圆的长和宽
- 椭圆的圆心是节点的位置
- color 字段默认在描边上生效
- 标签文本默认在节点中央
- 更多字段见 ellipse 节点的配置
\"image.png\"
diamond菱形：
- size 是数组，表示菱形的长和宽
- 菱形的中心位置是节点的位置
- color 字段默认在描边上生效
- 标签文本默认在节点中央
- 更多字段见 diamond 节点的配置
\"image.png\"
triangle三角形：
- size 是数组，表示三角形的长和高
- 三角形的中心位置是节点的位置
- color 字段默认在描边上生效
- 标签文本默认在节点下方
- 更多字段见 triangle 节点的配置
\"image.png\"
star星形：
- size 是单个数字，表示星形的大小
- 星星的中心位置是节点的位置
- color 字段默认在描边上生效
- 标签文本默认在节点中央
- 更多字段见 star 节点的配置
\"image.png\"
image图片：
- size 是数组，表示图片的长和宽
- 图片的中心位置是节点位置
- img 图片的路径，也可以在 style 里面设置
- color 字段不生效
- 标签文本默认在节点下方
- 更多字段见 image 节点的配置
\"image.png\"
modelRect菱形：
- size 是数组，表示菱形的长和宽
- 菱形的中心位置是节点的位置
- color 字段默认在描边上生效
- 标签文本默认在节点中央
- 若有 description 字段则显示在标签文本下方显示 description 内容
- 更多字段见 modelRect 节点的配置
\"image.png\"
 \"image.png\"
\n

节点的通用属性

\n

所有内置的节点支持的通用属性：

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称是否必须类型备注
idtrueString节点编号
xfalseNumberx 坐标
yfalseNumbery 坐标
shapefalseString节点图形，默认为 'circle'
sizefalseNumberArray
anchorPointsfalseArray指定边连如节点的连接点的位置（相对于该节点而言），可以为空。例如: [0, 0]，代表节点左上角的锚点，[1, 1],代表节点右下角的锚点。
stylefalseObject节点的样式属性
labelfalseString文本文字
labelCfgfalseObject文本配置项
\n

样式属性 style

\n

Object 类型。通过 style 配置来修改节点的填充色、边框颜色、阴影等属性。下表是 style 对象中常用的配置项：

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称是否必须类型备注
fillfalseString节点填充色
strokefalseString节点的描边颜色
lineWidthfalseNumber描边宽度
shadowColorfalseString阴影颜色
shadowBlurfalseNumber阴影范围
shadowOffsetXfalseNumber阴影 x 方向偏移量
shadowOffsetXfalseNumber阴影 y 方向偏移量
...
\n

下面代码演示在实例化图时全局配置方法中配置 style：

\n
const graph = new G6.Graph({\n  container: 'mountNode',\n  width: 800,\n  height: 600,\n  defaultNode: {\n    // ... 其他属性\n    style: {\n      fill: '#steelblue',\n      stroke: '#eaff8f',\n      lineWidth: 5,\n      // ... 其他属性\n    },\n  },\n});\n
\n

标签文本 label 及其配置 labelCfg

\n

label String 类型。标签文本的文字内容。
labelCfg Object 类型。配置标签文本。下面是 labelCfg 对象中的常用配置项：

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称是否必须类型备注
positionfalseString文本相对于节点的位置，目前支持的位置有:  'center'，'top'，'left'，'right'，'bottom'。默认为 'center'。
offsetfalseNumberArray
stylefalseObject标签的样式属性
\n

上表中的标签的样式属性 style 的常用配置项如下： 

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称是否必须类型备注
fillfalseString文本颜色
strokefalseString文本描边颜色
lineWidthfalseNumber文本描边粗细
opacityfalseNumber文本透明度
fontfalseString文本内容的当前字体属性
fontSizefalseNumber文本字体大小
...
\n

下面代码演示在实例化图时全局配置方法中配置 label 和 labelCfg。

\n
const graph = new G6.Graph({\n  container: 'mountNode',\n  width: 800,\n  height: 600,\n  defaultNode: {\n    // ... 其他属性\n    label: 'node-label',\n    labelCfg: {\n      position: 'bottom',\n      offset: [10, 10, 10, 10],\n      style: {\n        fill: '#666',\n      },\n    },\n  },\n});\n
\n

节点的配置方法

\n

配置节点的方式有三种：实例化图时全局配置，在数据中动态配置，使用 graph.node(nodeFn) 函数配置。这几种配置方法可以同时使用，优先级：

\n

使用 graph.node(nodeFn) 配置 > 数据中动态配置 > 实例化图时全局配置

\n

即有相同的配置项时，优先级高的方式将会覆盖优先级低的。

\n

实例化图时全局配置

\n

用户在实例化 Graph 时候可以通过 defaultNode 配置节点，这里的配置是全局的配置，将会在所有节点上生效。

\n
const graph = new G6.Graph({\n  container: 'mountNode',\n  width: 800,\n  height: 600,\n  defaultNode: {\n    shape: 'circle',\n    // 其他配置\n  },\n});\n
\n

在数据中动态配置

\n

如果需要为不同节点进行不同的配置，可以将配置写入到节点数据中。这种配置方式可以通过下面代码的形式直接写入数据，也可以通过遍历数据的方式写入。

\n
const data = {\n  nodes: [{\n    id: 'node0',\n    size: 100,\n    shape: 'rect',\n    ...    // 其他属性\n    style: {\n      ...  // 样式属性，每种节点的详细样式属性参见各节点文档\n    }\n  },{\n    id: 'node1',\n    size: [50, 100],\n    shape: 'ellipse',\n    ...    // 其他属性\n    style: {\n      ...  // 样式属性，每种节点的详细样式属性参见各节点文档\n    }\n  },\n    ... // 其他节点\n  ],\n  edges: [\n    ... // 边\n  ]\n}
\n

使用 graph.node(nodeFn) 配置

\n

该方法可以为不同节点进行不同的配置。
提示：

\n\n
// const data = ...\n// const graph = ...\ngraph.node((node) => {\n  return {\n    id: node.id,\n    shape: 'rect',\n    style: {\n      fill: 'blue'\n    }\n  }\n});\n\ngraph.data(data);\ngraph.render();
\n

实例演练

\n
const data = {\n  nodes: [{\n    x: 100,\n    y: 100,\n    shape: 'circle',\n    label: 'circle',\n },{\n    x: 200,\n    y: 100,\n    shape: 'rect',\n   \tlabel: 'rect',\n },{\n    id: 'node-ellipse',\n    x: 330,\n    y: 100,\n    shape: 'ellipse',\n   \tlabel: 'ellipse'\n },{\n    id: 'node-diamond',\n    x: 460,\n    y: 100,\n    shape: 'diamond',\n   \tlabel: 'diamond'\n },{\n    id: 'node-triangle',\n    x: 560,\n    y: 100,\n    //size: 80,\n    shape: 'triangle',\n   \tlabel: 'triangle'\n },{\n    id: 'node-star',\n    x: 660,\n    y: 100,\n    //size: [60, 30],\n    shape: 'star',\n   \tlabel: 'star'\n },{\n    x: 760,\n    y: 100,\n    size: 50,\n    shape: 'image',\n    img: 'https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg',\n   \tlabel: 'image',\n },{\n    id: 'node-modelRect',\n    x: 900,\n    y: 100,\n    shape: 'modelRect',\n   \tlabel: 'modelRect'\n }]\n};\n\nconst graph = new G6.Graph({\n\tcontainer: 'mountNode',\n  width: 1500,\n  height: 300\n});\ngraph.data(data);\ngraph.render();
\n

显示结果：\n
\n

\n\n

调整节点配置

\n

下面演示通过将配置写入数据的方式，调整 id 为 'node-ellipse' 的椭圆节点的文本位置，颜色和样式。将下面代码替换上面代码中 id 为 'node-ellipse' 的节点数据即可生效。

\n
{\n  id: 'node-ellipse',\n  x: 330,\n  y: 100,\n  shape: 'ellipse',\t\n  size: [60, 30],\n  label: 'ellipse',\n  labelCfg: {\n    position: 'bottom',\n    offset: 5\n  },\n  style: {\n    fill: '#fa8c16',\n    stroke: '#000',\n    lineWidth: 2\n  }\n}
\n\n

再为 id 为 'node-modelRect' 的 modelRect 节点添加描述文字，使用下面代码替换 id 为 'node-modelRect' 的节点数据即可得到带有内容为 '描述文本xxxxxxxxxxx' 的 modelRect 节点。

\n
{\n  id: 'node-modelRect',\n  x: 900,\n  y: 100,\n  description: '描述文本xxxxxxxxxxx',\n  shape: 'modelRect',\n  label: 'modelRect'\n}
\n\n

相关阅读

\n","fields":{"slug":"/zh/docs/manual/middle/elements/defaultNode"},"frontmatter":{"title":"内置的节点","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/middle/elements/defaultNode.zh.md"}}},{"node":{"html":"

G6 中内置的 Tooltip 组件。

\n

使用指南

\n

下面的代码演示展示了如何在图上使用 tooltip。如果需要定义 tooltip 的样式，需要定义类名为 g6-tooltip 的标签的 CSS 样式：

\n
.g6-tooltip {\n    border: 1px solid #e2e2e2;\n    border-radius: 4px;\n    font-size: 12px;\n    color: #545454;\n    background-color: rgba(255, 255, 255, 0.9);\n    padding: 10px 8px;\n    box-shadow: rgb(174, 174, 174) 0px 0px 10px;\n  }
","fields":{"slug":"/zh/examples/tool/tooltip"},"frontmatter":{"title":"提示框","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tool/tooltip/index.zh.md"}}},{"node":{"html":"

Tooltip is a built-in components in G6.

\n

Usage

\n

The demo below show how to use tooltip on graph. Tooltip's style can be defined by the CSS with class name g6-tooltip:

\n
.g6-tooltip {\n    border: 1px solid #e2e2e2;\n    border-radius: 4px;\n    font-size: 12px;\n    color: #545454;\n    background-color: rgba(255, 255, 255, 0.9);\n    padding: 10px 8px;\n    box-shadow: rgb(174, 174, 174) 0px 0px 10px;\n  }
","fields":{"slug":"/en/examples/tool/tooltip"},"frontmatter":{"title":"Tooltip","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tool/tooltip/index.en.md"}}},{"node":{"html":"

There are 8 kinds of built-in nodes in G6, which can be extended by configurations.

\n

Usage

\n

8 built-in nodes and their extensions allow users to select appropriate ones for their scenario. For example, rect node is suitable for flow graph. Parameter linkPoint is the link points for related edges.

\n

Please refer to Built-in Nodes in G6 for more information.

","fields":{"slug":"/en/examples/shape/basic"},"frontmatter":{"title":"Built-in Nodes","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"shape/basic/index.en.md"}}},{"node":{"html":"

G6 共内置了 8 种不同类型的节点，支持通过配置项进行扩展。

\n

何时使用

\n

用户可根据具体的业务场景，选择合适的内置节点。如，矩形节点适合在流程图中使用。 linkPoints 用于配置相关边的连入位置。更多内容请参考 G6 内置的节点。

","fields":{"slug":"/zh/examples/shape/basic"},"frontmatter":{"title":"内置节点","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"shape/basic/index.zh.md"}}},{"node":{"html":"

通过自定义节点，可以实现节点的动画效果。

\n

使用指南

\n

下面代码演示了三种通过自定义边实现的边动画：

\n\n

G6 中更多关于动画的内容，请参考动画文档。

","fields":{"slug":"/zh/examples/scatter/node"},"frontmatter":{"title":"节点动画","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"scatter/node/index.zh.md"}}},{"node":{"html":"

Node animation can be realized by customing a node.

\n

Usage

\n

The three demos below show the node animation realized by customing node:

\n\n

For more information, please refer to document Animation。

","fields":{"slug":"/en/examples/scatter/node"},"frontmatter":{"title":"Node Animation","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"scatter/node/index.en.md"}}},{"node":{"html":"

Highlighting a node and its neighbors when user hover it is a common requirement in graph analysis applications.

\n

Usage

\n

The demos below show two ways to satisfy the highlight requirement:

\n","fields":{"slug":"/en/examples/interaction/highlight"},"frontmatter":{"title":"Highlight Nodes","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"interaction/highlight/index.en.md"}}},{"node":{"html":"

在图分析应用中，鼠标 hover 到某个节点后，高亮其相邻的节点及边是一种非常常见的需求。

\n

使用指南

\n

该示例演示了 G6 内置的 activate-relations 和自定义实现高亮相邻节点的方式。另外，如果内置高亮关注点及其邻居的行为不能满足需求，用户也可以通过使用 graph.on 或自定义 Behavior 实现。

","fields":{"slug":"/zh/examples/interaction/highlight"},"frontmatter":{"title":"高亮相邻节点","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"interaction/highlight/index.zh.md"}}},{"node":{"html":"

Metro map with animated edges.

\n

Usage

\n

The demo below shows the metro map with custom animated edges.

","fields":{"slug":"/en/examples/case/metroLines"},"frontmatter":{"title":"Animated Metro Map","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"case/metroLines/index.en.md"}}},{"node":{"html":"

基于 G6 实现的地铁线路图。

\n

使用指南

\n

该代码演示展示了自定义带动画的边以实现地铁线路的流动效果。

","fields":{"slug":"/zh/examples/case/metroLines"},"frontmatter":{"title":"地铁线路图","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"case/metroLines/index.zh.md"}}},{"node":{"html":"

Force-directed layout is a set of algorithms which are imporved and extended by lots of researchers based on the earliest classical force-directed algorithm. They simulate the nodes and edges in the graph as the physical objects. There are attractive forces and repulsive forces between nodes to iteratively move them to reach a reasonable layout.

\n

Usage

\n

The classical force-directed layout in G6 comes from d3.js. As the demo below, you can deploy it in layout while instantiating Graph. it can also be used for Subgraph Layout.

\n","fields":{"slug":"/en/examples/net/forceDirected"},"frontmatter":{"title":"Force-directed Layout","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"net/forceDirected/index.en.md"}}},{"node":{"html":"

力导向图布局作为较早被发明的一种实际应用布局算法，经过研究者多年改进、扩展，已发展成为一类算法的集合。该类算法的特点是模拟物理世界中的作用力，施加在节点上，并迭代计算以达到合理放置节点、美观布局的一类算法。

\n

使用指南

\n

G6 内置的经典力导向算法引用了 d3.js 的力导向算法。如下面代码所示，可在实例化 Graph 时使用该布局。除此之外，还可以如子图布局所示单独使用布局。

\n","fields":{"slug":"/zh/examples/net/forceDirected"},"frontmatter":{"title":"力导向图布局","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"net/forceDirected/index.zh.md"}}},{"node":{"html":"

从根节点开始，同一深度的节点在同一层，并且布局时会将节点大小考虑进去。\n
\ncompactbox

\n

使用指南

\n

紧凑树适用于展示树结构数据，配合 TreeGraph 使用。如下面代码所示，可在实例化 TreeGraph 时使用该布局。除此之外，还可以如子图布局所示单独使用布局。

\n

其配置项中 Function 类型的配置项可以为不同的元素配置不同的值。具体描述请查看相关教程。

","fields":{"slug":"/zh/examples/tree/compactBox"},"frontmatter":{"title":"紧凑树","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tree/compactBox/index.zh.md"}}},{"node":{"html":"

The nodes with the same depth will be layed on the same level. The node size will be considred while doing layout.\n
\ncompactbox

\n

Usage

\n

CompactBox is an appropriate layout method for tree data structure. As the demo below, you can deploy it in layout while instantiating Graph. it can also be used for Subgraph Layout.

\n

You can set different configurations for different nodes if the parameter is Function type. Please refer to the ducuments for more information.

","fields":{"slug":"/en/examples/tree/compactBox"},"frontmatter":{"title":"CompactBox","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tree/compactBox/index.en.md"}}},{"node":{"html":"

什么是 G6

\n

G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等基础的图可视化能力。旨在让关系变得透明，简单。让用户获得关系数据的 Insight。

\n

\"68747470733a2f2f67772e616c697061796f626a656374732e636f6d2f7a6f732f726d73706f7274616c2f485178596775696e464f4d49587247514f4142592e676966.gif\"

\n

安装 & 引用

\n

在项目中引入 G6 有以下两种方式：npm 引入，CDN 引入。

\n

1 在项目中使用 npm 包引入

\n

Step 1: 使用命令行在项目目录下执行以下命令：

\n
 npm install --save @antv/g6
\n

Step 2: 在需要用的 G6 的 JS 文件中导入：

\n
import G6 from '@antv/g6';\n
\n

2 在 HTML 中使用 CDN 引入

\n
<script src=\"https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-{$version}/build/g6.js\"></script>
\n

 注意 

\n\n

快速试用

\n

创建一个 G6 的关系图仅需要下面几个步骤：

\n
    \n
  1. 创建关系图的 HTML 容器；
    2. \n
  2. 数据准备；
    3. \n
  3. 创建关系图；
    4. \n
  4. 配置数据源，渲染。
    5. \n
\n

Step 1 创建容器

\n

需要在 HTML 中创建一个用于容纳 G6 绘制的图的容器，通常为 div 标签。G6 在绘制时会在该容器下追加 canvas 标签，然后将图绘制在其中。

\n
<div id=\"mountNode\"></div>
\n

Step 2 数据准备

\n

引入 G6 的数据源为 JSON 格式的对象。该对象中需要有节点（nodes）和边（edges）字段，分别用数组表示：

\n
const data = {\n  // 点集\n  nodes: [\n    {\n      id: 'node1', // String，该节点存在则必须，节点的唯一标识\n      x: 100, // Number，可选，节点位置的 x 值\n      y: 200, // Number，可选，节点位置的 y 值\n    },\n    {\n      id: 'node2', // String，该节点存在则必须，节点的唯一标识\n      x: 300, // Number，可选，节点位置的 x 值\n      y: 200, // Number，可选，节点位置的 y 值\n    },\n  ],\n  // 边集\n  edges: [\n    {\n      source: 'node1', // String，必须，起始点 id\n      target: 'node2', // String，必须，目标点 id\n    },\n  ],\n};\n
\n

 注意 

\n\n

Step 3 创建关系图

\n

创建关系图（实例化）时，至少需要为图设置容器、宽和高。

\n
const graph = new G6.Graph({\n  container: 'mountNode', // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身\n  width: 800, // Number，必须，图的宽度\n  height: 500, // Number，必须，图的高度\n});\n
\n

Step 4 配置数据源，渲染

\n
graph.data(data); // 读取 Step 2 中的数据源到图上\ngraph.render(); // 渲染图\n
\n

最终的结果

\n

\"image.png\"

\n

完整代码

\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Tutorial Demo</title>\n</head>\n\t<body>\n    /* 图的画布容器 */\n    <div id=\"mountNode\"></div>\n    \n    /* 引入 G6 */\n    <script src=\"https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.0/build/g6.js\"></script>\n    \n    <script>\n      // 定义数据源\n      const data = {\n        // 点集\n        nodes: [{\n          id: 'node1',\n          x: 100,\n          y: 200\n        },{\n          id: 'node2',\n          x: 300,\n          y: 200\n        }],\n        // 边集\n        edges: [\n          // 表示一条从 node1 节点连接到 node2 节点的边\n          {\n            source: 'node1',\n            target: 'node2'\n          }\n        ]\n      };\n      \n      // 创建 G6 图实例\n      const graph = new G6.Graph({\n        container: 'mountNode', // 指定图画布的容器 id，与第 9 行的容器对应\n        // 画布宽高\n        width: 800,\n        height: 500\n      });\n      // 读取数据\n      graph.data(data);\n      // 渲染图\n      graph.render();\n    </script>\n  </body>\n</html>
\n

React 中使用 G6

\n

你是在 React 中使用 G6 吗？我们提供了在 React 中使用 G6 的 Demo

\n

更多关于 React 中如何使用 G6，请参考React 中使用 G6 的文档，有任何问题都可以通过页面底部的钉钉交流群和我们沟通，也非常欢迎给我们提 Issues。

\n

更多

\n

本章仅仅介绍了如何安装以及最简单的场景，在 G6 Tutorial 中其他的章节中我们会教会你：

\n\n

想了解更高阶的功能，请参见 G6 核心概念，G6 高级指引。

\n

友情链接

\n

结合前端库的第三方实现：

\n\n

G6 图可视化交流群

\n

欢迎各界 G6 使用者、图可视化爱好者加入 G6 图可视化交流群（钉钉群，使用钉钉扫一扫加入）讨论与交流。\n
\"image.png\"

\n

 提示 

\n","fields":{"slug":"/zh/docs/manual/getting-started"},"frontmatter":{"title":"快速上手","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/getting-started.zh.md"}}},{"node":{"html":"

什么是 Graph

\n

中文字“图”在大家的传统认知里指的是图画、图像，而图论与可视化中的“图”—— Graph 则有着更精确的定位：主体（objects）与关系（relationships）的组成。它甚至不局限于视觉，主体与关系的数据也可以称为图。
\n—— 摘自 AntV 专栏文章：Graph Visualization · 知多少 之 《HelloWorld 图可视化》

\n

在 G6 中，Graph 对象是图的载体，它包含了图上的所有元素（节点、边等），同时挂载了图的相关操作（如交互监听、元素操作、渲染等）。
Graph 对象的生命周期为：初始化 —> 加载数据 —> 渲染 —> 更新 —> 销毁。

\n

在 快速上手 中，我们简单介绍了 初始化、加载数据、渲染图 的使用方法。本文将主要介绍初始化/实例化图。

\n

前提代码

\n

本文的讲解将会基于下面这份内嵌 JavaScript 的 HTML 代码。该代码通过定义数据、实例化图、读取数据、渲染图等操作中完成了下图中简单的图：
\n

\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Tutorial Demo</title>\n</head>\n  <body>\n    /* 图的画布容器 */\n    <div id=\"mountNode\"></div>\n    /* 引入 G6 */\n    <script src=\"https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.0/build/g6.js\"></script>\n    <script>\n      // 定义数据源\n      const data = {\n        // 点集\n        nodes: [{\n          id: 'node1',\n          x: 100,\n          y: 200\n        },{\n          id: 'node2',\n          x: 300,\n          y: 200\n        }],\n        // 边集\n        edges: [\n          // 表示一条从 node1 节点连接到 node2 节点的边\n          {\n            source: 'node1',\n            target: 'node2'\n          }\n        ]\n      };\n      \n      // 创建 G6 图实例\n      const graph = new G6.Graph({\n        container: 'mountNode', // 指定图画布的容器 id，与第 9 行的容器对应\n        // 画布宽高\n        width: 800,\n        height: 500\n      });\n      // 读取数据\n      graph.data(data);\n      // 渲染图\n      graph.render();\n    </script>\n  </body>\n</html>
\n

初始化/实例化图

\n

通过 new G6.Graph(config) 进行图的实例化。其中参数 config 是 Object 类型的图的配置项，图的大部分功能可以通过该配置项进行全局配置。如 前提代码 这样实例化图：

\n
const graph = new G6.Graph({\n  container: 'mountNode', // 指定图画布的容器 id，与第 9 行的容器对应\n  // 画布宽高\n  width: 800,\n  height: 500,\n});\n
\n

必要配置项

\n

上面代码中实例化 Graph 的部分使用了三个必要的配置项：

\n\n

     类型：String | Object。图的 DOM 容器。可以是 String，为 DOM 容器的 id。也可以是 Object ，为 DOM 对象。

\n\n

     类型：Number。图的画布的宽度和高度。

\n

常用配置项

\n

下面列举实例化图时常见的配置项，完整的配置项参见 Graph API。

\n

整体渲染相关

\n\n

      类型：String；选项：'svg' | 'canvas'；默认：'canvas'。选择 SVG 或 Canvas 方式渲染。

\n\n

      类型：Boolean；默认：'false'。图是否自适应画布。

\n\n

      类型：Number | Array；默认：0。图自适应画布时的四周留白像素值。fitView 为 true 时生效。

\n

全局元素配置

\n\n

      类型：Object。默认情况下全局节点的配置项，包括样式属性和其他属性。详见 内置节点。

\n\n

      类型：Object。默认情况下全局边的配置项，包括样式属性和其他属性。详见 内置边。

\n\n

      类型：Object。除默认状态外的其他状态下节点的样式配置。详见 状态 State。

\n\n

      类型：Object。除默认状态外的其他状态下边的样式配置。详见 状态 State。

\n

布局相关

\n\n

      类型：Object。若数据中不存在节点位置，则默认为随机布局。配置布局类型及其参数。详见 使用布局 Layout 教程，Layout API。

\n

交互行为相关

\n\n

      类型：Array。配置多种交互模式及其包含的交互事件的。详见 交互模式 Mode 教程。

\n

动画相关

\n\n

      类型：Boolean；默认：'false'。是否启用全局动画。启用后，布局变化时将会以动画形式变换节点位置。

\n\n

      类型：Object。全局动画的配置项，包括动画效果、动画时长等。详见 【TODO】。

\n

插件

\n\n

      类型：Array。配置辅助插件。详见 Plugin API。

\n

常用函数

\n

在 前提代码 中使用了两个必要的函数：

\n
// 读取数据\ngraph.data(data);\n// 渲染图\ngraph.render();\n
\n\n

Graph 的完整函数参见 Graph API。

","fields":{"slug":"/zh/docs/manual/middle/graph"},"frontmatter":{"title":"图 Graph","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/middle/graph.zh.md"}}},{"node":{"html":"

通用属性

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
属性名含义备注
fill设置用于填充绘画的颜色、渐变或模式对应canvas属性fillStyle
stroke设置用于笔触的颜色、渐变或模式对应canvas属性strokeStyle
shadowColor设置用于阴影的颜色
shadowBlur设置用于阴影的模糊级别数值越大，越模糊
shadowOffsetX设置阴影距形状的水平距离
shadowOffsetY设置阴影距形状的垂直距离
opacity设置绘图的当前 alpha 或透明值对应canvas属性globalAlpha
\n

线条 Path

\n

特别注意边太细时候点击不中，请设置 lineAppendWidth 属性值。

\n

属性

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
属性名含义备注
path线条路径可以是String形式，也可以是线段的数组。
startArrow起始端的箭头为true时为默认的箭头效果，也可以是一个自定义箭头
endArrow末尾端的箭头为true时为默认的箭头效果，也可以是一个自定义箭头
lineAppendWidth边的击中范围提升边的击中范围，扩展响应范围，数值越大，响应范围越广
lineCap设置线条的结束端点样式
lineJoin设置两条线相交时，所创建的拐角形状
lineWidth设置当前的线条宽度
miterLimit设置最大斜接长度
lineDash设置线的虚线样式，可以指定一个数组一组描述交替绘制线段和间距（坐标空间单位）长度的数字。 如果数组元素的数量是奇数， 数组的元素会被复制并重复。例如， [5, 15, 25] 会变成 [5, 15, 25, 5, 15, 25]。
\n

用法

\n
group.addShape('path', {\n  attrs: {\n    startArrow: {\n      path: 'M 10,0 L -10,-10 L -10,10 Z', // 自定义箭头为中心点在(0, 0)，指向 x 轴正方向的path\n      d: 10,\n    },\n    endArrow: {\n      path: 'M 10,0 L -10,-10 L -10,10 Z', // 自定义箭头为中心点在(0, 0)，指向 x 轴正方向的path\n      d: 10,\n    },\n    path: [\n      ['M', 100, 100],\n      ['L', 200, 200],\n    ],\n    stroke: '#000',\n    lineWidth: 8,\n    lineAppendWidth: 5,\n  },\n});\n
","fields":{"slug":"/zh/docs/api/properties/EdgeProperties"},"frontmatter":{"title":"边属性","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/properties/EdgeProperties.zh.md"}}},{"node":{"html":"

Edge继承自Item，所以，Item上面的方法在Edge实例中都可以使用。

\n

setSource(source)

\n

设置边的起始节点。

\n

参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| source | Node | true | 起始节点实例 |

\n

用法

\n
const edge = new Edge({\n  // TODO\n});\n\nconst node = new Node({\n  // TODO\n});\n\nedge.setSource(node);\n
\n

setTarget(target)

\n

设置边的终止节点。

\n

参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| target | Node | true | 终止节点实例 |

\n

用法

\n
const edge = new Edge({\n  // TODO\n});\n\nconst node = new Node({\n  // TODO\n});\n\nedge.setTarget(node);\n
\n

getSource()

\n

获取当前边的起始节点。

\n

返回值

\n\n

用法

\n
const edge = new Edge({\n  // TODO\n});\n\nconst node = edge.getSource();\n
\n

getTarget()

\n

获取当前边的终止节点。

\n

返回值

\n\n

用法

\n
const edge = new Edge({\n  // TODO\n});\n\nconst node = edge.getTarget();\n
","fields":{"slug":"/zh/docs/api/nodeEdge/Edge"},"frontmatter":{"title":"Edge","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/nodeEdge/Edge.zh.md"}}},{"node":{"html":"

  注意：\n
图形分组 Group 与 节点分组 Group 虽然都名为 Group，但属于不同层次的概念。

\n\n
\n

什么是图形分组 Group

\n

图形分组 group 类似于 SVG 中的 <g> 标签：元素 g 是用来组合图形对象的容器。在 group 上添加变换（例如剪裁、旋转、放缩、平移等）会应用到其所有的子元素上。在 group 上添加属性（例如颜色、位置等）会被其所有的子元素继承。此外， group 可以多层嵌套使用，因此可以用来定义复杂的对象。

\n

在 G6 中，Graph 的一个实例中的所有节点属于同一个变量名为 nodeGroup 的 group，所有的边属于同一个变量名为 edgeGroup 的 group。节点 group 在视觉上的层级（zIndex）高于边 group，即所有节点会绘制在所有边的上层。
如下图（左）三个节点属于 nodeGroup ，两条边属于 edgeGroup ， nodeGroup 层级高于 edgeGroup ，三个节点绘制在三条边的上层。下图（右）是（左）图的节点降低透明度后的效果，可以更清晰看到边绘制在节点下方。
\"image.png\"\"image.png\"

\n
\n

（左）节点和边的图形分组 Group 演示。（右）给左图的节点降低了透明度。

\n
\n
\n

何时使用图形分组 Group

\n

自定义节点、自定义边时将会涉及到图形分组 Group 的概念。图形分组 Group 方便了用户对节点或边上元素的组合和管理。
例如，如下图中的节点 A 有一个包含节点 A 中所有图形的 group，该 group 中包含了一个 circle 图形和一个文本图形。节点 B 是一个自定义节点，有一个包含节点 B 中所有图形的 group，该 group 包含了 circle 图形、rect 图形、文本图形。

\nimg\nimg\n
\n

如何使用图形分组 Group

\n

以下方法将会在自定义节点、自定义边时用到。

\n

声明实例

\n
const group = new Group(cfgs);
\n

实例方法

\n\n

向分组中添加新的分组。

\n
const subGroup = group.addGroup({\n  id: 'rect',\n});\n
\n\n

向分组中添加新的图形。

\n
const keyShape = group.addShape('rect', {\n  attrs: {\n    stroke: 'red',\n  },\n});\n
\n

提示：在分组上添加的 clip， transform 等会影响到该分组中的所有图形。

","fields":{"slug":"/zh/docs/manual/advanced/graphics-group"},"frontmatter":{"title":"关键概念-图形分组 Group","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/advanced/graphics-group.zh.md"}}},{"node":{"html":"

除了 内置交互行为 Behavior 和 交互模式 Mode 搭配的事件管理方式外，G6 提供了直接的单个事件、时机的监听方法，可以监听画布、节点、边、以及各函数被调用的时机等。这些事件可以分为以下四个层次：

\n\n

如果要了解G6支持的所有事件，请参考Event文档。

\n

G6 上所有的事件都需要在graph上监听。

\n
graph.on('click', ev => {\n  const shape = ev.target;\n  const item = ev.item;\n  if (item) {\n    const type = item.getType();\n  }\n});\n\ngraph.on('node:click', ev => {\n  const shape = ev.target;\n  const node = ev.item;\n});\n
","fields":{"slug":"/zh/docs/manual/middle/states/bindEvent"},"frontmatter":{"title":"监听和绑定事件","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/middle/states/bindEvent.zh.md"}}},{"node":{"html":"

G6 提供了三种修改节点样式的方法。

\n

实例化Graph

\n

实例化 Graph 时，可以通过在 defaultNode 或 defaultEdge 中指定 **style** 样式属性。

\n
const graph = new G6.Graph({\n  container: 'mountNode',\n  width: 1000,\n  height: 800,\n  defaultNode: {\n    shape: 'circle',\n    style: {\n      fill: '#fff',\n      fontSize: 14,\n    },\n  },\n  defaultEdge: {\n    shape: 'line-with-arrow',\n    style: {\n      fill: '#fff',\n      fontSize: 14,\n    },\n  },\n});\n
\n

数据中指定style

\n
const data = {\n  nodes: [\n    {\n      id: 'node1',\n      label: 'node1',\n      style: {\n        fill: '#fff',\n        fontSize: 12,\n      },\n    },\n  ],\n};\n
\n

使用 update / updateItem

\n

使用 update / updateItem 更新节点或边。

\n
graph.updateItem(node, {\n  // 节点的样式\n  style: {\n    stroke: 'blue',\n  },\n});\n
\n

想要知道节点都支持哪些属性样式，请👉参数节点支持的属性。

","fields":{"slug":"/zh/docs/manual/FAQ/updateElement"},"frontmatter":{"title":"如何更新节点或边的样式","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/FAQ/updateElement.zh.md"}}},{"node":{"html":"

G6 内置了折线 polyline 边，其默认样式如下。
\"image.png\"

\n

使用方法

\n

如 内置边 一节所示，配置边的方式有两种：实例化图时全局配置，在数据中动态配置。

\n

1 实例化图时全局配置

\n

用户在实例化 Graph 时候可以通过 defaultEdge 指定 shape 为 'polyline'，即可使用 polyline 边。

\n
const graph = new G6.Graph({\n  container: 'mountNode',\n  width: 800,\n  height: 600,\n  defaultEdge: {\n    shape: 'polyline',\n    // 其他配置\n  },\n});\n
\n

2 在数据中动态配置

\n

如果需要使不同节点有不同的配置，可以将配置写入到节点数据中。这种配置方式可以通过下面代码的形式直接写入数据，也可以通过遍历数据的方式写入。

\n
const data = {\n  nodes: [\n    ... // 节点\n  ],\n  edges: [{\n    source: 'node0',\n    target: 'node1'\n    shape: 'polyline',\n    ... // 其他配置\n    style: {\n      ...  // 样式属性，每种边的详细样式属性参见各边文档\n    }\n  },\n    ... // 其他边\n  ]\n}
\n

配置项说明

\n

polyline 边支持以下的配置项：

\n
color: '#87e8de',\nstyle: {\n  offset: 20,  // 拐弯处距离节点最小距离\n  radius: 10,  // 拐弯处的圆角弧度，若不设置则为直角\n  lineWidth: 2,\n  stroke: '#87e8de'\n},\nlabel: '边的标签文字',\nlabelCfg: {\n  refX: 10,  // 文本在 x 方向偏移量\n  refY: 10,  // 文本在 y 方向偏移量\n  style: {\n    fill: '#595959'\n  }\n}
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称含义类型备注
color边的颜色String优先级低于 style 中的 stroke
style边的样式ObjectCanvas支持的属性
style.radius拐弯处的圆角弧度Number若不设置则为直角，polyline 特有
style.offset拐弯处距离节点最小距离Number默认为 5，polyline 特有
label标签文本文字String
labelCfg文件配置项Object
\n

样式属性 style

\n

Object 类型。与其他类型的边不同的是，polyline 的 style 含有两个特殊属性：

\n\n

其它配置项与边的通用样式属性相同，见 内置边
下面代码演示在实例化图时全局配置方法中配置 style，以达到下图效果。
\"image.png\"

\n
const data = {\n  nodes: [\n    {\n      id: 'node0',\n      x: 100,\n      y: 100,\n      size: 20,\n    },\n    {\n      id: 'node1',\n      x: 200,\n      y: 200,\n      size: 20,\n    },\n  ],\n  edges: [\n    {\n      source: 'node0',\n      target: 'node1',\n      shape: 'polyline',\n      label: 'polyline',\n    },\n  ],\n};\nconst graph = new G6.Graph({\n  container: 'mountNode',\n  width: 800,\n  height: 600,\n  defaultEdge: {\n    // shape: 'polyline',  // 在数据中已经指定 shape，这里无需再次指定\n    style: {\n      radius: 10,\n      offset: 10,\n      stroke: 'steelblue',\n      lineWidth: 5,\n    },\n  },\n});\ngraph.data(data);\ngraph.render();\n
\n

标签文本配置 labelCfg

\n

Object 类型。其它配置与边的通用文本配置相同，见 内置边。基于上面 样式属性 style 中的代码，下面代码在 defaultNode 中增加了 labelCfg 配置项进行文本的配置，使之达到如下图效果。
\"image.png\"

\n
const data = {\n  // ... data 内容\n};\nconst graph = new G6.Graph({\n  // ... 图的其他配置\n  defaultEdge: {\n    // ... 其他配置\n    labelCfg: {\n      refY: -10,\n      refX: 60,\n    },\n  },\n});\n// ...\n
","fields":{"slug":"/zh/docs/manual/middle/elements/edges/polyline"},"frontmatter":{"title":"polyline","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/middle/elements/edges/polyline.zh.md"}}},{"node":{"html":"

G6 内置了 rect 节点，其默认样式如下。标签文本位于矩形中央。
\"image.png\"

\n

使用方法

\n

如 内置节点 一节所示，配置节点的方式有两种：实例化图时全局配置，在数据中动态配置。

\n

1 实例化图时全局配置

\n

用户在实例化 Graph 时候可以通过 defaultNode 指定 shape 为 'rect'，即可使用 rect 节点。

\n
const graph = new G6.Graph({\n  container: 'mountNode',\n  width: 800,\n  height: 600,\n  defaultNode: {\n    shape: 'rect',\n    // 其他配置\n  },\n});\n
\n

2 在数据中动态配置

\n

如果需要使不同节点有不同的配置，可以将配置写入到节点数据中。这种配置方式可以通过下面代码的形式直接写入数据，也可以通过遍历数据的方式写入。

\n
const data = {\n  nodes: [{\n\t  id: 'node0',\n    shape: 'rect',\n    ... // 其他配置\n    },\n    ... // 其他节点\n  ],\n  edges: [\n    ... // 边\n  ]\n};
\n

配置项说明

\n

rect 节点支持以下的配置项，对于 Object 类型的配置项将在后面有详细讲解：

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称含义类型备注
sizerect的宽高NumberArray
stylerect默认样式ObjectCanvas支持的属性
labelCfg文件配置项Object
stateStyles各状态下的样式Object只对keyShape起作用
linkPointsrect上的链接点Object默认不显示
\n

样式属性 style

\n

Object 类型。通过 style 配置来修改 rect 的填充色、边框颜色、阴影等属性。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称含义类型备注
radius圆角半径Number默认为直角矩形
stroke描边颜色String
lineWidth描边粗细Number默认为 1
fill填充色String
fillOpacity透明度Number默认为 1
\n

下面代码演示在实例化图时全局配置方法中配置 style，使之达到如下图效果。
\"image.png\"

\n
const data = {\n  nodes: [\n    {\n      x: 100,\n      y: 100,\n      shape: 'rect',\n      label: 'rect',\n    },\n  ],\n};\n\nconst graph = new G6.Graph({\n  container: 'mountNode',\n  width: 500,\n  height: 300,\n  defaultNode: {\n    // shape: 'rect', // 在数据中已经指定了 shape，这里无需再次指定\n    style: {\n      fill: '#bae637',\n      stroke: '#eaff8f',\n      lineWidth: 5,\n      radius: 10,\n    },\n  },\n});\ngraph.data(data);\ngraph.render();\n
\n

标签文本配置 labelCfg

\n

Object 类型。通过 labelCfg 配置标签文本。基于上面 样式属性 style 中的代码，下面代码在 defaultNode 中增加了 labelCfg 配置项进行文本的配置，使之达到如下图效果。
\"image.png\"

\n
const data = {\n  // ... data 内容\n};\nconst graph = new G6.Graph({\n  // ... 图的其他配置\n  defaultNode: {\n    // ... 其他配置\n    labelCfg: {\n      style: {\n        fill: '#9254de',\n        fontSize: 18,\n      },\n      position: 'bottom',\n    },\n  },\n});\n// ...\n
\n

边的连入点 linkPoints

\n

Object 类型。通过配置 linkPoints ，可以指定矩形周围「上、下、左、右」四个方向上边的连入点。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称含义类型备注
top是否显示上部的连接点Boolean默认为false
bottom是否显示底部的连接点Boolean默认为false
left是否显示左侧的连接点Boolean默认为false
right是否显示右侧的连接点Boolean默认为false
size连接点的大小Number默认为3
fill连接点的填充色String默认为#72CC4A
stroke连接点的边框颜色String默认为#72CC4A
lineWidth连接点边框的宽度Number默认为1
\n

基于上面 样式属性 style 中的代码，下面代码在 defaultNode 中增加了 linkPoints 配置项进行连入点的配置。
\"image.png\"

\n
const data = {\n  // ... data 内容\n};\nconst graph = new G6.Graph({\n  // ... 图的其他配置\n  defaultNode: {\n    // 其他配置\n    linkPoints: {\n      top: true,\n      bottom: true,\n      left: true,\n      right: true,\n      size: 5,\n      fill: '#fff',\n    },\n  },\n});\n// ...\n
","fields":{"slug":"/zh/docs/manual/middle/elements/nodes/rect"},"frontmatter":{"title":"rect","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/middle/elements/nodes/rect.zh.md"}}},{"node":{"html":"

本文将进行 Tutorial案例的简单绘制和配置。通过本文，你将知道创建一般图时一些常用的配置项及其作用。

\n

基础绘制

\n

创建容器

\n

需要在 HTML 中创建一个用于容纳 G6 绘制的图的容器，通常为 div 标签。G6 在绘制时会在该容器下追加 canvas 标签，然后将图绘制在其中。

\n
<body>\n  <div id=\"mountNode\"></div>\n  \n  <!-- 引入 G6 -->\n  <!-- ... -->\n</body>
\n

数据准备

\n

引入 G6 的数据源为 JSON 格式的对象。该对象中需要有节点（nodes）和边（edges）字段，分别用数组表示：

\n
<script>\n  // console.log(G6.Global.version);\n  const initData = {\n    // 点集\n    nodes: [{\n      id: 'node1', // 节点的唯一标识\n      x: 100,      // 节点横坐标\n      y: 200,      // 节点纵坐标\n      label: '起始点' // 节点文本\n    },{\n      id: 'node2',\n      x: 300,\n      y: 200,\n      label: '目标点'\n   }],\n    // 边集\n    edges: [\n      // 表示一条从 node1 节点连接到 node2 节点的边\n      {\n        source: 'node1',  // 起始点 id\n        target: 'node2',  // 目标点 id\n        label: '我是连线'   // 边的文本\n      }\n    ]\n  };\n</script>
\n

 注意

\n\n

图实例化

\n

图实例化时，至少需要为图设置容器、宽、高：

\n
<script>\n  // const initData = { ... }\n  const graph = new G6.Graph({\n    container: 'mountNode', // 指定挂载容器\n    width: 800,             // 图的宽度\n    height: 500             // 图的高度\n  });\n</script>
\n

图的渲染

\n

数据的加载和图的渲染是两个步骤，可以分开进行。

\n
<script>\n  // const initData = { ... }\n  //  const graph = ...\n  graph.data(initData);  // 加载数据\n  graph.render();        // 渲染\n</script>
\n

绘制结果

\n

调用 graph.render() 方法之后，G6 引擎会根据加载的数据进行图的绘制。如果没有额外指定图实例的 renderer 属性配置，则默认采用 Canvas 进行绘制，结果如下：
\"image.png\"

\n

真实数据加载

\n

上文中，我们使用了仅含有两个节点和一条边的数据，直接将数据定义放在了代码中。而真实场景的数据通常是远程接口请求加载的。为了方便，我们已经给读者准备好了一份 json 数据文件，地址如下：
https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json

\n

加载远程数据

\n

修改 index.html，通过 fetch 函数异步加载远程的数据源，并传入 G6 的图实例中：

\n
<script>\n  //  const graph = ...\n  const main = async () => {\n    const response = await fetch('https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json');\n    const remoteData = await response.json();\n    \n    // ...\n    graph.data(remoteData); // 加载远程数据\n    graph.render();         // 渲染\n  };\n  main();\n</script>
\n
\n

fetch 函数允许我们发起网络请求，加载数据，而其异步的过程可以通过 async/await 进行更合理的控制。这里我们为了方便起见，将主要逻辑放在了 main 函数里面。如果读者对 fetch 和 async/await 的知识有疑问，可以参考：async function，Fetch API

\n
\n

运行后，我们得到了下图结果：
\"image.png\"
乍看之下，图像有点奇怪，实际上数据已经正确的加载了进来。由于数据量比较大，节点和边都非常的多，显得内容比较杂乱。另外由于画布大小的限制，实际的图被画布截断了，目前只能看见部分内容，这个问题后文会继续解决。

\n

请看下面摘取自 tutorial-data.json 的部分数据，我们发现数据中节点定义了位置信息 x 与 y，并且很多节点的 x 和 y 不在图的宽高（width: 800, height: 600）范围内：

\n
{\n  \"nodes\": [\n    {\"id\": \"0\", \"label\": \"n0\", \"class\": \"c0\",\"x\": 1000, \"y\": -100 },\n    {\"id\": \"1\", \"label\": \"n1\", \"class\": \"c0\",\"x\": 300, \"y\": -10 },\n    ...\n  ],\n  \"edges\": [\n    ...\n  ]\n}
\n

由于 G6 在读取数据时，发现了数据中带有位置信息（x 和 y），就会按照该位置信息进行绘制，这是为了满足按照原始数据绘制的需求设计的。但为优化超出屏幕到问题，G6 提供了图的两个相关配置项：

\n\n

我们将实例化图的代码更改为如下形式：

\n
const graph = new G6.Graph({\n  // ...\n  fitView: true,\n  fitViewPadding: [20, 40, 50, 20],\n});\n
\n

上述代码将会生成如下图：
\"image.png\"
可以看到，图像已经可以自动适配画布的大小，完整的显示了出来。

\n

*常用配置

\n

本文使用到的配置以及后续 Tutorial 将会使用到到常用配置如下：

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
配置项类型选项 / 示例默认说明
rendererString'canvas' | 'svg''canvas'绘制图的方式是 canvas 还是 SVG。
fitViewBooleantrue | falsefalse是否将图适配到画布大小，可以防止超出画布或留白太多。
fitViewPaddingNumber | Array20 | [ 20, 40, 50, 20 ]0画布上的四周留白宽度。
animateBooleantrue | falsefalse是否启用图的动画。
modesObject{
  default: [ 'drag-node', 'drag-canvas' ]
}		null图上行为模式的集合。由于比较复杂，按需参见：G6 中的 mode。
defaultNodeObject{
  shape: 'circle',
  color: '#000',
  style: {
    ......
  }
}		null节点默认的属性，包括节点的一般属性和样式属性（style）。
defaultEdgeObject{
  shape: 'polyline',
  color: '#000',
  style: {
    ......
  }
}		null边默认的属性，包括边的一般属性和样式属性（style）。
nodeStateStylesObject{
  hover: {
    ......
  },
  select: {
    ......
  }
}		null节点在除默认状态外，其他状态下的样式属性（style）。例如鼠标放置（hover）、选中（select）等状态。
edgeStateStylesObject{
  hover: {
    ......
  },
  select: {
    ......
  }
}		null边在除默认状态外，其他状态下的样式属性（style）。例如鼠标放置（hover）、选中（select）等状态。
\n

完整代码

\n

至此，完整代码如下：

\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Tutorial Demo</title>\n</head>\n<body>\n  <div id=\"mountNode\"></div>\n  <script src=\"https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.0/build/g6.js\"></script>\n  <script>\n    const graph = new G6.Graph({\n      container: 'mountNode',\n      width: 1000,\n      height: 600,\n      renderer: 'svg',\n      fitView: true,\n      fitViewPadding: [ 20, 40, 50, 20 ]\n    });\n\n    const main = async () => {\n      const response = await fetch('https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json');\n      const remoteData = await response.json();\n      graph.data(remoteData);\n      graph.render();\n    };\n    main();\n  </script>\n</body>\n</html>
\n

 注意 
若需更换数据，请替换 'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json' 为新的数据文件地址。

","fields":{"slug":"/zh/docs/manual/tutorial/example"},"frontmatter":{"title":"绘制Tutorial案例","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/example.md"}}},{"node":{"html":"

背景

\n

大多数图数据在可视化时被展示成点-线图（Node-link Diagram）的形式。点-线图特别适用于如交通网络图一类的关系数据的展示，这种数据的节点通常带有地理位置信息，例如迁徙图、移民图、航线图等。
\"image.png\"\"image.png\"

\n
\n

（左）图 1. 法国航线图。（右）图 2. 美国航线图。

\n
\n

\"image.png\"\"image.png\"

\n
\n

（左）图 3. 世界网络 IXP 对等图。（右）图 4. 美国移民图。

\n
\n

问题

\n

虽然点-线图提供了直观的可视化，但是当数据存在大量节点和边时，视觉混乱（Visual Clutter）很快成为严重的问题。点-线图中的视觉混乱通常是边缘拥塞的直接结果，而在如交通网络一类数据中，节点位置通常具有明确定义的含义，并不总是可以修改节点位置以减少视觉混乱，如图 1～4 四个例子。因此，学术界诸多研究者设计了各种通过优化边的方式减轻上述视觉混乱，其中边绑定（Edge Bundling）方法被广泛研究和应用。各种边绑定的方法总结在【链接】。

\n

例如下面这一个复杂的美国航线数据集，节点代表美国城市，带有坐标和经纬度信息；一条边代表一条航线：

\n
{\n    \"nodes\": [{\n        \"x\": -922.24444,\n        \"y\": 347.29444,\n        \"id\": \"0\",\n        \"lon\": -92.224444,\n        \"lat\": 34.729444\n    }, {\n        \"x\": -922.24444,\n        \"y\": 347.29444,\n        \"id\": \"1\",\n        \"lon\": -92.224444,\n        \"lat\": 34.729444\n    },\n    ...\n    ],\n    \"edges\": [\n      {\n        \"source\": \"0\",\n        \"target\": \"21\",\n        \"id\": \"e0\"\n      }, {\n        \"source\": \"2\",\n        \"target\": \"13\",\n        \"id\": \"e1\"\n      },\n      ...\n    ]\n}
\n

如果使用 G6 简单地将节点和边渲染出来，将会得到如下结果：
\"image.png\"

\n
\n

图 5. G6 渲染原始数据结果

\n
\n

我们发现简单地将该数据渲染后的结果航线纵横交错，穿梭在密集的城市当中，视觉上十分混乱，即难以看清细节，也不能发现航线的总体趋势。

\n

期待效果

\n

我们希望可以通过边绑定的方法降低图 5 的视觉混乱，从而清晰图的整体走势、结构，突出航线频繁的城市，它们可能是重要的交通枢纽，并展示更多的统计信息，以便观察者进行分析。借助 G6，我们可以实现如下效果。通过边绑定，边的交错混乱情况被降低，颜色映射航班的飞行方向（出发（橙红色）与降落（青色））。节点大小表示到达与离开该城市的航班总数量，每个节点使用了饼图展示达到（橙红色）和离开（青色）航班的比例。并增加 hover 的交互，使用 tooltip 展示每个城市的经纬度。
\"airline-bundling-tooltip.gif\"

\n
\n

期待效果图及 tooltip 效果。

\n
\n

实现步骤

\n

统计必要信息

\n

首先，我们使用简单的 JS 根据数据统计每个节点的总度数（degree，即出入该城市的航线总数）、出度（outDegree，即飞出该城市的航线数）、入度（inDegree，即飞入该城市成航线数），为后续映射到节点上做好准备。

\n
const nodes = data.nodes;\nconst edges = data.edges;\nnodes.forEach(n => {\n  n.y = -n.y;\n  n.degree = 0;\n  n.inDegree = 0;\n  n.outDegree = 0;\n});\n// compute the degree of each node\nconst nodeIdMap = new Map();\nnodes.forEach(node => {\n  nodeIdMap.set(node.id, node);\n});\nedges.forEach(e => {\n  const source = nodeIdMap.get(e.source);\n  const target = nodeIdMap.get(e.target);\n  source.outDegree++;\n  target.inDegree++;\n  source.degree++;\n  target.degree++;\n});\nlet maxDegree = -9999,\n  minDegree = 9999;\nnodes.forEach(n => {\n  if (maxDegree < n.degree) maxDegree = n.degree;\n  if (minDegree > n.degree) minDegree = n.degree;\n});\nconst sizeRange = [1, 20];\nconst degreeDataRange = [minDegree, maxDegree];\n// 将范围是 degreeDataRange 的 degree 属性映射到范围 sizeRange 上后，\n// 写入到 nodes 中元素的‘size’属性中\nscaleNodeProp(nodes, 'size', 'degree', degreeDataRange, sizeRange);\n
\n

scaleNodeProp() 方法将指定的节点属性 refPropName 根据给定数值范围 outRange 归一化，映射到另一个属性 propName 上：

\n
/**\n * 映射属性\n * @param  {array} nodes          对象数组\n * @param  {string} propName      写入的属性名称\n * @param  {string} refPropName   被归一化的属性名称\n * @param  {array} dataRange      被归一化的属性的值范围 [min, max]\n * @param  {array} outRange       写入的属性的值范围 [min, max]\n */\nfunction scaleNodeProp(nodes, propName, refPropName, dataRange, outRange) {\n  const outLength = outRange[1] - outRange[0];\n  const dataLength = dataRange[1] - dataRange[0];\n  nodes.forEach(n => {\n    n[propName] =\n      ((n[refPropName] - dataRange[0]) * outLength) / dataLength + outRange[0];\n  });\n}\n
\n

通过上面两段代码，我们已经将归一化的度数映射到节点大小 size 上。

\n

实例化边绑定插件

\n

G6 中提供的边绑定插件是基于 FEDB（Force-Directed Edge Bundling for Graph Visualization）一文的实现。可以通过调节参数调整边绑定的效果。

\n
const edgeBundling = new Bundling({\n  bundleThreshold: 0.6, // 绑定的容忍度。数值越低，被绑定在一起的边相似度越高，即被绑在一起的边更少。\n  K: 100, // 绑定的强度\n});\n
\n

自定义饼图节点

\n

在第一步中，我们已经为节点大小 size 映射了每个节点的总度数。为了更详细展示每个城市飞出和飞入航班的比例，我们希望在每个节点上显示一个类似于饼图的效果。例如\"image.png\" ，桔红色扇形代表飞入该城市的航班比例，青色代表飞出该城市的航班比例。G6 原生的 circle 、rect 等节点形状不能满足这一需求，但 G6 提供了节点的扩展机制，通过下面的代码片段，可以在 G6 中注册一个自定义的节点：

\n
const lightBlue = 'rgb(119, 243, 252)';\nconst lightOrange = 'rgb(230, 100, 64)';\n\n// 注册自定义名为 pie-node 的节点类型\nG6.registerNode(\n  'pie-node',\n  {\n    drawShape: (cfg, group) => {\n      const radius = cfg.size / 2; // 节点半径\n      const inPercentage = cfg.inDegree / cfg.degree; // 入度占总度数的比例\n      const inAngle = inPercentage * Math.PI * 2; // 入度在饼图中的夹角大小\n      const outAngle = Math.PI * 2 - inAngle; // 出度在饼图中的夹角大小\n      const inArcEnd = [radius * Math.cos(inAngle), radius * Math.sin(inAngle)]; //入度饼图弧结束位置\n      let isInBigArc = 1,\n        isOutBigArc = 0;\n      if (inAngle > Math.PI) {\n        isInBigArc = 0;\n        isOutBigArc = 1;\n      }\n      // 定义代表入度的扇形形状\n      const fanIn = group.addShape('path', {\n        attrs: {\n          path: [\n            ['M', radius, 0],\n            ['A', radius, radius, 0, isInBigArc, 0, inArcEnd[0], inArcEnd[1]],\n            ['L', 0, 0],\n            ['B'],\n          ],\n          lineWidth: 0,\n          fill: lightOrange,\n        },\n      });\n      // 定义代表出度的扇形形状\n      const fanOut = group.addShape('path', {\n        attrs: {\n          path: [\n            ['M', inArcEnd[0], inArcEnd[1]],\n            ['A', radius, radius, 0, isOutBigArc, 0, radius, 0],\n            ['L', 0, 0],\n            ['B'],\n          ],\n          lineWidth: 0,\n          fill: lightBlue,\n        },\n      });\n      // 返回 keyshape\n      return fanIn;\n    },\n  },\n  'single-shape',\n);\n
\n

这样，我们就在 G6 中注册了一个名为 pie-node 的节点类型。

\n

实例化图

\n

在这一步中，我们在实例化图时，并为之指定边绑定插件、节点类型（刚才自定义的 pie-node）、节点样式、边样式（渐变色）。

\n
const edgeBundling = new Bundling({\n  bundleThreshold: 0.6, // 绑定的容忍度。数值越低，被绑定在一起的边相似度越高，即被绑在一起的边更少。\n  K: 100, // 绑定的强度\n});\nconst graph = new G6.Graph({\n  container: 'mountNode',\n  width: 1000,\n  height: 800,\n  plugins: [edgeBundling], // 加入插件\n  fitView: true,\n  defaultNode: {\n    size: 3,\n    color: 'steelblue',\n    fill: 'steelblue',\n  },\n  nodeStyle: {\n    default: {\n      lineWidth: 0,\n      fill: 'steelblue',\n    },\n  },\n  edgeStyle: {\n    default: {\n      lineWidth: 0.7,\n      strokeOpacity: 0.1, // 设置边透明度，在边聚集的部分透明度将会叠加，从而具备突出高密度区域的效果\n      stroke: 'l(0) 0:' + llightBlue16 + ' 1:' + llightOrange16,\n    },\n  },\n});\n
\n

这里出发端的颜色为 llightBlue16，结束端的颜色为 llightOrange16：

\n
const llightBlue16 = '#C8FDFC';\nconst llightOrange16 = '#FFAA86';\n
\n

为了配合节点和边的颜色，这里将页面的 body 的颜色设置为黑色：

\n
<style>\n  body{\n    background: rgb(0, 0, 0);\n  }\n</style>
\n

执行绑定和渲染

\n

有了 graph 实例和 edgeBundling 实例后，我们执行下面代码进行绑定操作和图的数据读入及渲染：

\n
edgeBundling.bundling(data); // 执行插件的绑定操作\ngraph.data(data);\ngraph.render();\n
\n

设置 tooltip 与交互操作

\n

使用 tooltip，可以在鼠标 hover 到节点上时展示该节点的其他属性值。首先在 html 中设定 tooltip 的样式：

\n
<style>\n  .g6-tooltip {\n    border: 1px solid #e2e2e2;\n    border-radius: 4px;\n    font-size: 12px;\n    color: #545454;\n    background-color: rgba(255, 255, 255, 0.9);\n    padding: 10px 8px;\n    box-shadow: rgb(174, 174, 174) 0px 0px 10px;\n  }\n</style>
\n

然后，在上一步实例化 graph 时，增加一个名为 modes 的配置项到参数中，如下写法启动了 drag-canvas 画图拖动操作、zoom-canvas 画布放缩操作，以及 tooltip，在 formatText 函数中指定了 tooltip 显示的文本内容：

\n
 modes: {\n   default: [ 'drag-canvas', 'zoom-canvas', {\n     type: 'tooltip',\n     formatText(model) {\n       const text = 'Longitude: ' + model.lon + '\\n Latitude: ' + model.lat;\n       return text;\n     },\n     shouldUpdate: e => {\n       return true;\n     }\n   }]\n }
\n

这样，当鼠标移动到节点上时，带有经纬度信息的 tooltip 将会出现：
\"image.png\"

\n
\n

tooltip

\n
\n

同时，可以拖拽和放缩画布：\"airline-bundling-interact.gif\"

\n
\n

缩放和拖动画布。

\n
\n

分析

\n

\"image.png\"

\n
\n

最终效果图。节点大小代表飞入及飞出该城市航线总数。节点饼图展示飞出与飞入航线比例统计信息（橙红色为飞入，青色为飞出）。边的渐变色代表航班的飞行方向。起始端：青色；结束端：橙红色。

\n
\n

最后，让我们一起分析如下的最终结果图给我们带来的信息：

\n\n

上述发现很容易被解释：美国东部是美国的经济、政治集中区域。

","fields":{"slug":"/zh/docs/manual/cases/edgeBundling"},"frontmatter":{"title":"Edge Bundling","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/cases/edgeBundling.zh.md"}}},{"node":{"html":"

G6 提供了 9 种内置边：

\n\n

这些内置边的默认样式分别如下图所示。
\n

\n

内置边类型说明

\n

下面表格中显示了内置的各类边，同时对一些特殊的字段进行了说明：

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称描述
line连接两个节点的直线：
- controlPoints 不生效
- 更多配置详见 line 边的配置
\"image.png\"
polyline多段线段构成的折线，连接两个端点：
- controlPoints 表示所有线段的拐点，不指定时根据 A* 算法自动生成折线
- 更多配置详见 polyline 边的配置
\"image.png\"
arc连接两个节点的一段圆弧：
- controlPoints 不生效
- 使用 curveOffset 指定弧的弯曲程度，其正负影响弧弯曲的方向
- 更多配置详见 arc 边的配置
\"image.png\"
quadratic只有一个控制点的曲线：
- controlPoints 不指定时，会默认线的一半处弯曲
- 更多配置详见 quadratic 边的配置
\"image.png\"
cubic有两个控制点的曲线：
- controlPoints 不指定时，会默认线的 1/3, 2/3 处弯曲
- 更多配置详见 cubic 边的配置
\"image.png\"
cubic-vertical垂直方向的三阶贝塞尔曲线，不考虑用户从外部传入的控制点\"image.png\"
cubic-horizontal水平方向的三阶贝塞尔曲线，不考虑用户从外部传入的控制点\"image.png\"
loop自环。更多配置详见 arc 边的配置\"image.png\"
\n

边的通用属性

\n

所有内置的边支持的通用属性：

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称是否必须类型备注
idfalseString边编号
sourcetrueStringNumber
targettrueString结束点 id
shapefalseString边图形，默认为 'line'
sourceAnchorfalseNumber边的起始节点上的锚点的索引值
targetAnchorfalseNumber边的终止节点上的锚点的索引值
stylefalseObject边的样式属性
labelfalseString文本文字，如果没有则不会显示
labelCfgfalseObject文本配置项
\n

样式属性 style

\n

Object 类型。通过 style 配置来修改边的颜色、线宽等属性。下表是 style 对象中常用的配置项：

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称是否必须类型备注
strokefalseString边的颜色
lineWidthfalseNumber边宽度
lineAppendWidthfalseNumber边响应鼠标事件时的检测宽度，当 lineWidth 太小而不易选中时，可以通过该参数提升击中范围
endArrowfalseBoolean边的结束端是否有箭头
strokeOpacityfalseNumber边透明度
shadowColorfalseString阴影颜色
shadowBlurfalseNumber阴影范围
shadowOffsetXfalseNumber阴影 x 方向偏移量
shadowOffsetXfalseNumber阴影 y 方向偏移量
...
\n

下面代码演示在实例化图时全局配置方法中配置 style：

\n
const graph = new G6.Graph({\n  container: 'mountNode',\n  width: 800,\n  height: 600,\n  defaultEdge: {\n    // ... 其他属性\n    style: {\n      stroke: '#eaff8f',\n      lineWidth: 5,\n      // ... 其他属性\n    },\n  },\n});\n
\n

标签文本 label 及其配置 labelCfg

\n

label String 类型。标签文本的文字内容。
labelCfg Object 类型。配置标签文本。下面是 labelCfg 对象中的常用配置项：

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称是否必须类型备注
refXfalseNumber标签在 x 方向的偏移量
refYfalseNumber标签在 y 方向的偏移量
positionfalseString文本相对于边的位置，目前支持的位置有: start，middle, end。默认为middle。
autoRotatefalseBoolean标签文字是否跟随边旋转，默认 false
stylefalseObject标签的样式属性
\n

上表中的标签的样式属性 style 的常用配置项如下： 

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称是否必须类型备注
fillfalseString文本颜色
strokefalseString文本描边颜色
lineWidthfalseNumber文本描边粗细
opacityfalseNumber文本透明度
fontfalseString文本内容的当前字体属性
fontSizefalseNumber文本字体大小
...
\n

下面代码演示在实例化图时全局配置方法中配置 label 和 labelCfg。

\n
const graph = new G6.Graph({\n  container: 'mountNode',\n  width: 800,\n  height: 600,\n  defaultEdge: {\n    // ... 其他属性\n    label: 'edge-label',\n    labelCfg: {\n      refY: -10,\n      refX: 60,\n    },\n  },\n});\n
\n

边的配置方法

\n

配置边的方式有三种：实例化图时全局配置，在数据中动态配置，使用 graph.edge(edgeFn) 函数配置。这几种配置方法可以同时使用，优先级：

\n

使用 graph.edge(edgeFn) 配置 > 数据中动态配置 > 实例化图时全局配置

\n

即有相同的配置项时，优先级高的方式将会覆盖优先级低的。

\n

实例化图时全局配置

\n

用户在实例化 Graph 时候可以通过 defaultEdge 配置边，这里的配置是全局的配置，将会在所有边上生效。

\n
const graph = new G6.Graph({\n  container: 'mountNode',\n  width: 800,\n  height: 600,\n  defaultEdge: {\n    shape: 'line',\n    // 其他配置\n  },\n});\n
\n

在数据中动态配置

\n

如果需要使不同边有不同的配置，可以将配置写入到边数据中。这种配置方式可以通过下面代码的形式直接写入数据，也可以通过遍历数据的方式写入。

\n
const data = {\n  nodes: [\n    ... // 节点\n  ],\n  edges: [{\n    source: 'node0',\n    target: 'node1'\n    shape: 'polyline',\n    ... // 其他配置\n    style: {\n      ...  // 样式属性，每种边的详细样式属性参见各边文档\n    }\n  },{\n    source: 'node1',\n    target: 'node2'\n    shape: 'cubic',\n    ... // 其他配置\n    style: {\n      ...  // 样式属性，每种边的详细样式属性参见各边文档\n    }\n  },\n    ... // 其他边\n  ]\n}
\n

使用 graph.edge(edgeFn) 配置

\n

该方法可以为不同边进行不同的配置。
提示：

\n\n

graph.data(data);\ngraph.render();

\n
## 实例演示\n```javascript\nconst data = {\n  nodes: [\n    {id: '1', x: 50, y: 50, size: 20},\n    {id: '2', x: 150, y: 50, size: 20},\n    {id: '3', x: 200, y: 50, size: 20},\n    {id: '4', x: 300, y: 130, size: 20},\n    {id: '5', x: 350, y: 50, size: 20},\n    {id: '6', x: 450, y: 50, size: 20},\n    {id: '7', x: 500, y: 50, size: 20},\n    {id: '8', x: 600, y: 50, size: 20},\n    {id: '9', x: 650, y: 50, size: 20},\n    {id: '10', x: 750, y: 50, size: 20},\n    {id: '11', x: 800, y: 50, size: 20},\n    {id: '12', x: 900, y: 150, size: 20},\n    {id: '13', x: 950, y: 50, size: 20},\n    {id: '14', x: 1050, y: 150, size: 20},\n    {id: '15', x: 1100, y: 50, size: 20},\n  ],\n  edges: [\n    {source: '1', target: '2', shape: 'line', label: 'line'},\n    {source: '3', target: '4', shape: 'polyline', label: 'polyline'},\n    {source: '5', target: '6', shape: 'arc', label: 'arc'},\n    {source: '7', target: '8', shape: 'quadratic', label: 'quadratic'},\n    {source: '9', target: '10', shape: 'cubic', label: 'cubic'},\n    {source: '11', target: '12', shape: 'cubic-vertical', label: 'cubic-vertical'},\n    {source: '13', target: '14', shape: 'cubic-horizontal', label: 'cubic-horizontal'},\n    {source: '15', target: '15', shape: 'loop', label: 'loop'}\n  ]\n}\n\nconst graph = new G6.Graph({\n\tcontainer: 'mountNode',\n  width: 1500,\n  height: 300,\n  linkCenter: true      // 使边连入节点的中心\n});\ngraph.data(data);\ngraph.render();
\n

显示结果：
\n

\n

调整边的样式

\n

可以在边上添加文本，修改边的样式。下面演示将配置写入数据的方式配置边。使用下面代码替换上面代码中的 9-10、11-12 两条边数据，修改这两条边的样式和其文本。

\n
// 使 9-10 的 cubic 边文本下移 15 像素\n{\n  source: '9', \n  target: '10', \n  shape: 'cubic',\n  label: 'cubic',\n  labelCfg: {\n    refY: -15 // refY 默认是顺时针方向向下，所以需要设置负值\n  }\n},\n// 设置 11-12 的 cubic-vertical 边的颜色、虚线、粗细，并设置文本样式、随边旋转\n{\n  source: '11', \n  target: '12',\n  shape: 'cubic-vertical',\n  color: '#722ed1',     // 边颜色\n  size: 5,              // 边粗细\n  style: {\n  \tlineDash: [2, 2]    // 虚线边\n  },\n  label: 'cubic-vertical',\n  labelCfg: {\n  \tposition: 'center', // 其实默认就是 center，这里写出来便于理解\n    autoRotate: true,   // 使文本随边旋转\n    style: {\n      stroke: 'white',  // 给文本添加白边和白色背景\n    \tlineWidth: 5,     // 文本白边粗细\n      fill: '#722ed1',  // 文本颜色\n    }\n  }\n}
\n\n

相关阅读

\n","fields":{"slug":"/zh/docs/manual/middle/elements/defaultEdge"},"frontmatter":{"title":"内置的边","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"manual/middle/elements/defaultEdge.zh.md"}}},{"node":{"html":"

Graph 是 G6 图表的载体，所有的 G6 节点实例操作以及事件，行为监听都在 Graph 实例上进行。

\n

Graph 的生命周期为：初始化—>加载数据—>渲染—>更新—>销毁。

\n

初始化

\n

G6.Graph

\n

参数\n| 名称 | 类型 | 默认值 | 描述 |\n| --- | --- | --- | --- |\n| container | String|HTMLElement | 图的 DOM 容器，可以传入该 DOM 的 id 或者直接传入容器的 HTML 节点对象 |\n| width | Number | undefined | 指定画布宽度，单位为 'px' |\n| height | Number | undefined | 指定画布高度，单位为 'px' |\n| renderer | String | canvas | 渲染引擎，支持 canvas 和 SVG。 |\n| fitView | Boolean | false | 是否开启画布自适应。开启后图自动适配画布大小。 |\n| fitViewPadding | Array | Number | fitView 为 true 时生效。图适应画布时，指定四周的留白。
- 可以是一个值, 例如：fitViewPadding: 20
- 也可以是一个数组，例如：fitViewPadding: [ 20, 40, 50, 20 ]
当指定一个值时，四边的边距都相等，当指定数组时，数组内数值依次对应 上，右，下，左四边的边距。 |\n| groupByTypes | Boolean | true | 各种元素是否在一个分组内，决定节点和边的层级问题，默认情况下所有的节点在一个分组中，所有的边在一个分组中，当这个参数为 false 时，节点和边的层级根据生成的顺序确定。 |\n| autoPaint | Boolean | true | 当图中元素更新，或视口变换时，是否自动重绘。建议在批量操作节点时关闭，以提高性能，完成批量操作后再打开，参见后面的 setAutoPaint() 方法。 |\n| modes | Object | | 设置画布的模式。详情可见 G6 中的 Mode 文档。 |\n| nodeStateStyles | Object | {} | 各个状态下节点的样式，例如hover、selected，3.1版本新增。 |\n| edgeStateStyles | Object | {} | 各个状态下边的样式，例如hover、selected，3.1版本新增。 |\n| defaultNode | Object | {} | 默认状态下节点的配置，比如 shape, size, color。会被写入的 data 覆盖。 |\n| defaultEdge | Object | {} | 默认状态下边的配置，比如 shape, size, color。会被写入的 data 覆盖。 |\n| plugins | Array | [] | 向 graph 注册插件。插件机制请见：plugin |\n| animate | Boolean | false | 是否启用全局动画。 |\n| animateCfg | Object | | 动画配置项，仅在 animate 为 true 时有效。 |\n| animateCfg.
onFrame | Function | null | 回调函数，用于自定义节点运动路径，为空时线性运动。 |\n| animateCfg.
duration | Number | 500 | 动画时长，单位为毫秒。 |\n| animateCfg.
easing | String | easeLinear | 动画动效，可参见d3 ease。 |\n| minZoom | Number | 0.2 | 最小缩放比例 |\n| maxZoom | Number | 10 | 最大缩放比例 |\n| pixelRatio | Number | 1.0 | 像素比率 |\n| groupType | String | circle | 节点分组类型，支持 circle 和 rect |\n| groupStyle | Object | | groupStyle 用于指定分组的样式，详情参看文档 |\n| layout | Object | | 布局配置项，使用 type 字段指定使用的布局方式，type可取以下值：random, radial, mds, circular, fruchterman, force, dagre，各布局详细的配置请参考 Layout API文档 |

\n

重点说明: G6 3.1 版本中实例化 Graph 时，新增了 nodeStateStyles及 edgeStateStyles两个配置项，删除了 nodeStyle 和 edgeStyle ，使用 3.1 以下版本的同学，只需要将 nodeStyle 改成 nodeStateStyles ，将 edgeStyle 改成 edgeStateStyles ，配置内容保持不变。

\n

用法\nGraph 的初始化通过 new 进行实例化，实例化时需要传入需要的参数。

\n
const graph = new G6.Graph({\n  container: '',\n  width: 500,\n  height: 500,\n  modes: {\n    default: ['drag-canvas'],\n  },\n  layout: {\n    type: 'radial',\n    unitRadius: 50,\n    center: [500, 300],\n  },\n});\n
\n

加载

\n

data(data)

\n

设置图初始化数据。

\n

参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| data | Object | true | 初始化的图数据，是一个包括 nodes 和 edges 的对象 |

\n

用法

\n
const data = {\n  nodes: [\n    {\n      id: 'node1',\n      label: 'node1',\n    },\n    {\n      id: 'node2',\n      label: 'node2',\n    },\n  ],\n  edges: [\n    {\n      source: 'node1',\n      target: 'node2',\n    },\n  ],\n};\n\n// graph是Graph的实例\ngraph.data(data);\n
\n

渲染

\n

render()

\n

根据提供的数据渲染视图。

\n

用法

\n
graph.render();\n
\n

renderCustomGroup(data, groupType)

\n

根据提供的数据渲染组群。

\n

参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| data | Object | true | 渲染图的数据 |\n| groupType | string | true | group类型，支持circle、rect |

\n

用法

\n
const data = {\n  nodes: [\n    {\n      id: 'node1',\n      groupId: 'group1',\n      label: 'node1',\n    },\n    {\n      id: 'node2',\n      groupId: 'group1',\n      label: 'node2',\n    },\n  ],\n  edges: [\n    {\n      source: 'node1',\n      target: 'node2',\n    },\n  ],\n  groups: [\n    {\n      id: 'group1',\n      title: {\n        text: '我的群组1',\n        stroke: '#444',\n        offsetX: -20,\n        offsetY: 30,\n      },\n    },\n  ],\n};\n\n// graph是Graph的实例\ngraph.renderCustomGroup(data, 'circle');\n
\n

\n

read(data)

\n

接收数据，并进行渲染，read 方法的功能相当于 data 和 render 方法的结合。

\n

参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| data | Object | true | 初始化的图数据，是一个包括 nodes 和 edges 的对象 |

\n

用法

\n
const data = {\n  nodes: [\n    {\n      id: 'node1',\n      label: 'node1',\n    },\n    {\n      id: 'node2',\n      label: 'node2',\n    },\n  ],\n  edges: [\n    {\n      source: 'node1',\n      target: 'node2',\n    },\n  ],\n};\n\n// graph是Graph的实例\ngraph.read(data);\n
\n

changeData(data)

\n

更新数据源，根据新的数据重新渲染视图。

\n

参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| data | Object | true | 初始化的图数据，是一个包括 nodes 和 edges 的对象 |

\n

用法

\n
const data = {\n  nodes: [\n    {\n      id: 'node1',\n      label: 'node1',\n    },\n    {\n      id: 'node2',\n      label: 'node2',\n    },\n  ],\n  edges: [\n    {\n      source: 'node1',\n      target: 'node2',\n    },\n  ],\n};\n\n// graph是Graph的实例\ngraph.changeData(data);\n
\n

collapseGroup(groupId)

\n

收起分组，收起分组后，隐藏分组中的所有节点和边，分组外部与分组内节点有连线的则临时连接到分组上面。

\n

参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| groupId | String | true | 分组ID |

\n

用法

\n
graph.collapseGroup('groupId');\n
\n

expandGroup(groupId)

\n

展开分组，显示分组中的所有节点和边，恢复收起前的连接情况。

\n

参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| groupId | String | true | 分组ID |

\n

用法

\n
graph.expandGroup('groupId');\n
\n

更新

\n

addItem(type, model)

\n

新增元素。

\n

参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| type | String | true | 元素类型，可选值为 node、edge 和group |\n| model | Object | true | 元素的数据模型，type = group 时，参看这里 |

\n

用法

\n
const model = {\n  id: 'node',\n  label: 'node',\n  address: 'cq',\n  x: 200,\n  y: 150,\n  style: {\n    fill: 'blue',\n  },\n};\n\ngraph.addItem('node', model);\n\n// 当type为group时候，model的数据结构如下：\nconst model = {\n  groupId: 'xxx000999',\n  nodes: ['123', '23'],\n  type: 'rect',\n  zIndex: 0,\n  title: {\n    text: '名称',\n  },\n};\n\ngraph.addItem('group', model);\n
\n

add(type, model)

\n

同 addItem(type, model)。

\n

updateItem(item, model)

\n

更新元素，包括更新数据、样式等。

\n

参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| item | String | Object | true | 元素 ID 或元素实例 |\n| cfg | Object | false | 需要更新的数据模型 |

\n

用法

\n
const model = {\n  id: 'node',\n  label: 'node',\n  address: 'cq',\n  x: 200,\n  y: 150,\n  style: {\n    fill: 'blue',\n  },\n};\n\n// 通过ID查询节点实例\nconst item = graph.findById('node');\ngraph.updateItem(item, model);\n
\n

update(item, model)

\n

同updateItem(item, model)。

\n

removeItem(item)

\n

new删除元素，当 item 为 group ID 时候，则删除分组。

\n

参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| item | String | Object | true | 元素ID或元素实例 |

\n

用法

\n
// 通过ID查询节点实例\nconst item = graph.findById('node');\ngraph.removeItem(item);\n
\n

remove(item)

\n

同 removeItem(item)。

\n

refresh()

\n

当源数据发生变更时，根据新数据刷新视图。

\n

该方法无参数。

\n

用法

\n
graph.refresh();\n
\n

refreshItem(item)

\n

刷新指定元素。

\n

参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| item | String | Object | true | 元素ID或元素实例 |

\n

用法

\n
// 通过ID查询节点实例\nconst item = graph.findById('node');\ngraph.refreshItem(item);\n
\n

refreshPositions()

\n

当节点位置发生变化时，刷新所有节点位置，并重计算边的位置。

\n

该方法无参数。

\n

用法

\n
graph.refreshPositions();\n
\n

paint()

\n

仅重新绘制画布。当设置了元素样式或状态后，通过调用 paint() 方法，让修改生效。

\n

该方法无参数。

\n

用法

\n
const item = e.item;\nconst graph = this.graph;\n\nconst autoPaint = graph.get('autoPaint');\ngraph.setAutoPaint(false);\n\ngraph.setItemState(item, 'selected', true);\n\ngraph.paint();\ngraph.setAutoPaint(autoPaint);\n
\n

setAutoPaint(auto)

\n

设置是否在更新/删除后自动重绘，一般搭配 paint() 方法使用。

\n

参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| auto | Boolean | true | 是否自动重绘 |

\n

用法

\n
const item = e.item;\nconst graph = this.graph;\n\nconst autoPaint = graph.get('autoPaint');\ngraph.setAutoPaint(false);\n\ngraph.setItemState(item, 'selected', true);\n\ngraph.paint();\ngraph.setAutoPaint(autoPaint);\n
\n

布局

\n

G6 3.1 内置了丰富的布局。关于如何使用 G6 中内置的布局，请参考 Layout API文档。

\n

layout()

\n

重新以当前配置的属性进行一次布局。

\n

用法

\n
const graph = new G6.Graph({\n  container: 'mountNode',\n  width: 1000,\n  height: 600,\n  layout: {\n    type: 'force',\n  },\n  modes: {\n    default: ['drag-node'],\n  },\n});\n\ngraph.data({\n  nodes: data.nodes,\n  edges: data.edges.map((edge, i) => {\n    edge.id = 'edge' + i;\n    return Object.assign({}, edge);\n  }),\n});\n\ngraph.render();\n\nfunction refreshDragedNodePosition(e) {\n  const model = e.item.get('model');\n  model.fx = e.x;\n  model.fy = e.y;\n}\n\ngraph.on('node:dragstart', e => {\n  // 拖动节点时重新布局\n  graph.layout();\n  refreshDragedNodePosition(e);\n});\n\ngraph.on('node:drag', e => {\n  refreshDragedNodePosition(e);\n});\n\ngraph.on('node:dragend', e => {\n  e.item.get('model').fx = null;\n  e.item.get('model').fy = null;\n});\n
\n

updateLayout(cfg)

\n

更新布局配置项。

\n
    \n
  1. 如果参数 cfg 中含有 type 字段，type 字段类型为 String，且与现有布局方法不同，则更换布局；
    2. \n
  2. 如果参数 cfg 中不包含 type 字段，则保持原有布局，仅更新布局配置项。
    3. \n
\n

参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| cfg | Object | true | 新布局配置项 |

\n

用法

\n
const graph = new G6.Graph({\n  container: 'mountNode',\n  width: 1000,\n  height: 600,\n  modes: {\n    default: ['drag-canvas', 'drag-node'],\n  },\n  layout: {\n    type: 'circular',\n    center: [500, 300],\n  },\n  animate: true,\n});\ngraph.data(data);\ngraph.render();\n\n// 实例化时通过layout指定布局，在合适的时候通过updateLayout更新布局配置\ngraph.updateLayout({\n  radius: 200,\n  startAngle: Math.PI / 4,\n  endAngle: Math.PI,\n  divisions: 5,\n  ordering: 'degree',\n});\n
\n

销毁

\n

clear()

\n

清除画布元素。该方法一般用于清空数据源，重新设置数据源，重新 render 的场景，此时所有的图形都会被清除。

\n

该方法无参数。

\n

用法

\n
graph.clear();\n
\n

destroy()

\n

销毁画布。

\n

该方法无参数。

\n

用法

\n
graph.destroy();\n
\n

状态

\n

showItem(item)

\n

显示指定的元素。

\n

参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| item | String | Object | true | 元素ID或元素实例 |

\n

用法

\n
// 通过ID查询节点实例\nconst item = graph.findById('nodeId');\ngraph.showItem(item);\n\n// 等价于\ngraph.showItem('nodeId');\n
\n

hideItem(item)

\n

隐藏指定元素。

\n

参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| item | String | Object | true | 元素ID或元素实例 |

\n

用法

\n
// 通过ID查询节点实例\nconst item = graph.findById('nodeId');\ngraph.hideItem(item);\n\n// 等价于\ngraph.hideItem('nodeId');\n
\n

setItemState(item, state, enabled)

\n

设置元素状态。

\n

该方法在执行过程中会触发beforitemstatechange，afteritemstatechange事件。

\n

参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| item | String | Object | true | 元素 ID 或元素实例 |\n| state | String | true | 状态值，支持自定义，如 selected、hover、actived等。 |\n| enabled | Boolean | true | 是否启用状态 |

\n

用法

\n
graph.setItemState('node1', 'selected', true);\n
\n

clearItemStates(item, states)

\n

清除元素状态，可以一次性清除多个状态。

\n

参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| item | String | Object | true | 元素 ID 或元素实例 |\n| states | String | Array | null  | false | 取值可以是单个状态值，也可以是状态值数组或 null，当为 null 时，清除该元素的第一个状态。 |

\n

用法

\n
// 清除单个状态\ngraph.clearItemStates(node, 'a');\n\n// 清除多个状态\ngraph.clearItemStates(node, ['a', 'b']);\n\n// 清除所有状态\ngraph.clearItemStates(node);\n
\n

node(nodeFn)

\n

设置各个节点样式，以及在各个状态下节点的 KeyShape 的样式。

\n

提示：该方法必须在 render 之前调用，否则不起作用。

\n

参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| nodeFn | Function | true | 指定每个节点样式 |

\n

用法

\n
graph.node(node => {\n  return {\n    id: node.id,\n    shape: 'rect',\n    style: {\n      fill: 'blue',\n    },\n  };\n});\n\ngraph.data(data);\ngraph.render();\n
\n

edge(edgeFn)

\n

设置各条边的样式。

\n

提示：该方法必须在 render 之前调用，否则不起作用。

\n

参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| edgeFn | Function | true | 指定每条边的样式 |

\n

用法

\n
graph.edge(edge => {\n  return {\n    id: edge.id,\n    shape: 'cubic-horizontal',\n    style: {\n      stroke: 'green',\n    },\n  };\n});\n\ngraph.data(data);\ngraph.render();\n
\n

交互

\n

addBehaviors(behaviors, modes)

\n

新增行为，将单个或多个行为添加到单个或多个模式中。

\n

参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| behaviors | String | Array | true | 添加的行为的名称 |\n| modes | String | Array | true | 模式的名称 |

\n

用法

\n
// 将单个Behavior添加到单个模式（默认的default模式）中\ngraph.addBehaviors('click-select', 'default');\n\n// 将多个Behavior添加到单个模式（默认的default模式）中\ngraph.addBehaviors(['brush-select', 'click-select'], 'default');\n\n// 将单个Behavior添加到多个模式中\ngraph.addBehaviors('brush-select', ['default', 'select']);\n\n// 将多个Behavior添加到多个模式中\ngraph.addBehaviors(['brush-select', 'click-select'], ['default', 'select']);\n
\n

removeBehaviors(behaviors, modes)

\n

移除行为，将单个或多个行为从单个或多个模式中去除。

\n

参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| behaviors | String | Array | true | 删除的行为的名称 |\n| modes | String | Array | true | 模式的名称 |

\n

用法

\n
// 从单个模式中移除单个Behavior\ngraph.removeBehaviors('click-select', 'default');\n\n// 从单个模式中移除多个Behavior\ngraph.removeBehaviors(['brush-select', 'click-select'], 'default');\n\n// 从多个模式中移除单个Behavior\ngraph.removeBehaviors('brush-select', ['default', 'select']);\n\n// 从多个模式中移除多个Behavior\ngraph.removeBehaviors(['brush-select', 'click-select'], ['default', 'select']);\n
\n

setMode(mode)

\n

切换图行为模式。主要用于不同模式下的行为切换，如从编辑模式下切换到只读模式。

\n

参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| mode | String | true | 模式的名称 |

\n

用法

\n
const graph = new G6.Graph({\n    container: div,\n    width: 500,\n    height: 500,\n    pixelRatio: 2,\n    modes: {\n      default: [...],\n      custom: [...]\n    }\n})\n\ngraph.setMode('custom')
\n

getCurrentMode()

\n

获取当前的行为模式。

\n

该方法无参数。

\n

返回值

\n\n

用法

\n
// 返回值mode表示当前的行为模式\nconst mode = graph.getCurrentMode();\n
\n

getZoom()

\n

获取当前视口的缩放比例。

\n

该方法无参数。

\n

返回值

\n\n

用法

\n
// 返回值zoom表示当前视口的缩放比例\nconst zoom = graph.getZoom();\n
\n

zoom(ratio, center)

\n

改变视口的缩放比例，在当前画布比例下缩放，是相对比例。

\n

参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| ratio | Number | true | 缩放比例 |\n| center | Object | false | 以 center 的 x、y 坐标为中心缩放，如果省略了 center 参数，则以元素当前位置为中心缩放 |

\n

用法

\n
// 以(100, 100)为中心点，放大3倍\ngraph.zoom(3, { x: 100, y: 100 });\n\n// 以当前元素位置为中心，缩小到0.5\ngraph.zoom(0.5);\n
\n

zoomTo(toRatio, center)

\n

缩放视窗窗口到一个固定比例。

\n

参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| toRatio | Number | true | 固定比例值 |\n| center | Object | false | 以 center 的 x、y 坐标为中心缩放，如果省略了 center 参数，则以元素当前位置为中心缩放 |

\n

用法

\n
// 以(100, 100)为中心点，放大3倍\ngraph.zoomTo(3, { x: 100, y: 100 });\n\n// 以当前元素位置为中心，缩小到0.5\ngraph.zoomTo(0.5);\n
\n

focusItem(item)

\n

将元素移动到视口中心，该方法可用于做搜索后的缓动动画。

\n

参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| item | String | Object | true | 元素 ID 或元素实例 |

\n

用法

\n
graph.focusItem(item);\n
\n

changeSize(width, height)

\n

改变画布大小。

\n

参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| width | Number | true | 画布宽度 |\n| height | Number | true | 画布高度 |

\n

用法

\n
graph.changeSize(600, 350);\n
\n

translate(dx, dy)

\n

采用相对位移来平移画布。

\n

参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| dx | Number | true | 水平方向位移 |\n| dy | Number | true | 垂直方向位移 |

\n

用法

\n
graph.translate(100, 100);\n
\n

moveTo(x, y)

\n

采用绝对位移将画布移动到指定坐标。

\n

参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| x | Number | true | 水平方向坐标 |\n| y | Number | true | 垂直方向坐标 |

\n

用法

\n
graph.moveTo(200, 300);\n
\n

fitView(padding)

\n

让画布内容适应视口。

\n

参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| padding | Number | Array | false | [top, right, bottom, left] 四个方向上的间距值 |

\n

用法

\n
// padding只设置为一个值，则表示top = right = bottom = left = 20\ngraph.fitView(20);\n\n// 等价于graph.fitView(20)\ngraph.fitView([20]);\n\n// padding设置为数组，只传2个值，则top = bottom = 20, right = left = 10\ngraph.fitView([20, 10]);\n\n// padding设置为数组，四个方向值都指定\ngraph.fitView([20, 10, 20, 15]);\n
\n

查找

\n

find(type, fn)

\n

根据具体规则查找单个元素。

\n

参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| type | String | true | 元素类型，可选值为 node、edge |\n| fn | Function | true | 查找的规则 |

\n

返回值

\n\n

用法

\n
const findNode = graph.find('node', node => {\n  return node.get('model').x === 100;\n});\n
\n

findById(id)

\n

根据 ID，查询对应的元素实例。

\n

参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| id | String | true | 元素 ID |

\n

返回值

\n\n

用法

\n
const node = graph.findById('node');\n
\n

findAll(type, fn)

\n

查询所有满足规则的元素。

\n

参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| type | String | true | 元素类型，可选值为 node、edge |\n| fn | Function | true | 查找的规则 |

\n

返回值

\n\n

用法

\n
const nodes = graph.findAll('node', node => {\n  return node.get('model').x;\n});\n
\n

findAllByState(type, state)

\n

查找所有处于指定状态的元素。

\n

参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| type | String | true | 元素类型，可选值为 node、edge |\n| state | String | true | 状态 |

\n

返回值

\n\n

用法

\n
// 查询所有选中的元素\nconst nodes = graph.findAllByState('node', 'selected');\n
\n

数据

\n

save()

\n

获取图数据。

\n

该方法无参数。

\n

返回值

\n\n

用法

\n
graph.save();\n
\n

getNodes()

\n

获取图中所有节点的实例。

\n

注意：这里返回的是节点的实例，而不是节点的数据项。

\n

返回值

\n\n

用法

\n
const nodes = graph.getNodes();\n
\n

getEdges()

\n

获取图中所有边的实例。

\n

注意：这里返回的是边的实例，而不是边的数据项。

\n

返回值

\n\n

用法

\n
const edges = graph.getEdges();\n
\n

坐标转换

\n

这部分主要是说明视口坐标、Canvas 坐标和页面坐标之前的相互转换。其中视口坐标和 Canvas 坐标的示意图如下所示。
\"image.png\"

\n

getPointByClient(clientX, clientY)

\n

将屏幕/页面坐标转换为视口坐标。

\n

参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| clientX | Number | true | 屏幕 x 坐标 |\n| clientY | Number | true | 屏幕 y 坐标 |

\n

返回值

\n\n

用法

\n
const point = graph.getPointByClient(e.clientX, e.clientY);\nconsole.log('视口x/y坐标分别为:', point.x, point.y);\n
\n

getClientByPoint(x, y)

\n

将视口坐标转换为屏幕/页面坐标。

\n

参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| x | Number | true | 视口 x 坐标 |\n| y | Number | true | 视口 y 坐标 |

\n

返回值

\n\n

用法

\n
const point = graph.getClientByPoint(100, 200);\nconsole.log('屏幕/页面x/y坐标分别为:', point.x, point.y);\n
\n

getPointByCanvas(canvasX, canvasY)

\n

将 Canvas 画布坐标转换为视口坐标。

\n

参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| canvasX | Number | true | 画布x坐标 |\n| canvasY | Number | true | 画布y坐标 |

\n

返回值

\n\n

用法

\n
const point = graph.getPointByCanvas(100, 200);\nconsole.log('视口x/y坐标分别为:', point.x, point.y);\n
\n

getCanvasByPoint(x, y)

\n

将视口坐标转换为 Canvas 画布坐标。

\n

参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| x | Number | true | 视口 x 坐标 |\n| y | Number | true | 视口 y 坐标 |

\n

返回值

\n\n

用法

\n
const point = graph.getCanvasByPoint(100, 200);\nconsole.log('Canvas画布的x/y坐标分别为:', point.x, point.y);\n
\n

动画

\n

positionsAnimate()

\n

根据 Graph 上的 animateCfg 配置项，处理视口中节点的动画。

\n

stopAnimate()

\n

停止画布上的所有动画。

\n

用法

\n
graph.stopAnimate();\n
\n

isAnimating()

\n

判断当前是否有正在执行的动画。

\n

其他

\n

addPlugin(plugin)

\n

添加指定的插件。

\n

参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| plugin | Object | true | 插件实例 |

\n

用法

\n
import miniMap from '@antv/g6/build/minimap';\ngraph.Plugin(miniMap);\n
\n

removePlugin(plugin)

\n

移除指定的插件。

\n

参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| plugin | Object | true | 插件实例 |

\n

用法

\n
import miniMap from '@antv/g6/build/minimap';\ngraph.removePlugin(miniMap);\n
\n

get(key)

\n

根据key获取属性值。

\n

参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| key | String | true | 属性的键 |

\n

用法

\n
// 获取group\nconst group = graph.get('group');\n\n// 获取canvas实例\nconst canvas = graph.get('canvas');\n\n// 获取autoPaint值\nconst autoPaint = graph.get('autoPaint');\n
\n

set(key, val)

\n

设置属性值。

\n

参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| key | String | true | 属性的键 |\n| val | String | Object | Array | true | 属性的值 |

\n

用法

\n
// 设置capture值为false\ngraph.set('capture', false);\n\n// 设置customGroup值为group\ngraph.set('customGroup', group);\n\n// 设置nodeIdList值为数组\ngraph.set('nodeIdList', [1, 3, 5]);\n
\n

downloadImage(name)

\n

将画布上的元素导出为图片。

\n

参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| name | String | true | 图片的名称 |

\n

用法

\n
graph.downloadImage();\n
\n

toDataURL()

\n

将画布上元素生成为图片的 URL。

\n

返回值

\n\n

用法

\n
const dataURL = graph.toDataURL();\n
","fields":{"slug":"/zh/docs/api/Graph"},"frontmatter":{"title":"Graph","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"api/Graph.zh.md"}}},{"node":{"html":"

There are several built-in edges in G6, including line, polyline, bezier curve, arc, loop, and so on.

\n

Usage

\n

The demos below show the usage of polyline、cubic、arc and loop.

\n

Please refer to Built-in Edges in G6 for more information.

","fields":{"slug":"/en/examples/shape/defaultEdges"},"frontmatter":{"title":"Built-in Edges","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"shape/defaultEdges/index.en.md"}}},{"node":{"html":"

G6 共内置了多种不同类型的边，包括直线、折线、曲线、自环等。

\n

何时使用

\n

以下代码演示了：polyline、cubic、arc 和 loop 四种内置边。

\n

更多信息参见G6 的内置边

","fields":{"slug":"/zh/examples/shape/defaultEdges"},"frontmatter":{"title":"内置边","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"shape/defaultEdges/index.zh.md"}}},{"node":{"html":"

API 信息。

\n

API

\n

AnN

\n

ddgg

","fields":{"slug":"/zh/examples/shape/basic/API"},"frontmatter":{"title":"API","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"shape/basic/API.zh.md"}}},{"node":{"html":"

Click the nodes on the tree graph to onload multiple data.

\n

Usage

\n

The following demos show two ways to load data:

\n","fields":{"slug":"/en/examples/interaction/loadData"},"frontmatter":{"title":"Onload Multiple Data","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"interaction/loadData/index.en.md"}}},{"node":{"html":"

点击树图中的节点，动态加载多条数据。

\n

使用指南

\n

共演示了两种动态添加数据的方式：

\n","fields":{"slug":"/zh/examples/interaction/loadData"},"frontmatter":{"title":"动态加载多条数据","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"interaction/loadData/index.zh.md"}}},{"node":{"html":"

使用 Fruchterman 布局实现交互式折叠/扩展聚类。

\n

使用指南

\n

尝试点击节点以折叠/扩展一个聚类。

","fields":{"slug":"/zh/examples/case/simplifyCluster"},"frontmatter":{"title":"聚类的折叠/扩展","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"case/simplifyCluster/index.zh.md"}}},{"node":{"html":"

This demo shows interactively collapse and expand clusters with Fruchterman layout.

\n

Usage

\n

Try to click a node to collapse and expand the corresponding cluster.

","fields":{"slug":"/en/examples/case/simplifyCluster"},"frontmatter":{"title":"Collapse/Expand Cluster","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"case/simplifyCluster/index.en.md"}}},{"node":{"html":"

Dagre Layout is an appropriate layout method for directed flow graph. It will calculate the levels and positions of nodes automatically according to the edge directions in the data.

\n

Usage

\n

As the demo below, you can deploy it in layout while instantiating Graph. it can also be used for Subgraph Layout. By tuning the parameters, you can adjust the layout direction, node alignment, node separation, level separation, and so on.

\n","fields":{"slug":"/en/examples/net/dagreFlow"},"frontmatter":{"title":"Dagre Layout","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"net/dagreFlow/index.en.md"}}},{"node":{"html":"

Dagre 是适合有向流程图的布局算法。其根据图数据中边的方向，自动计算节点的层级及位置。

\n

使用指南

\n

G6 内置的 Dagre 布局可以实现有向图的自动分层布局。如下面代码所示，可在实例化 Graph 时使用该布局。除此之外，还可以如子图布局所示单独使用布局。该布局可以通过配置调整布局方向、节点对齐方式、节点间距、层高等。

\n","fields":{"slug":"/zh/examples/net/dagreFlow"},"frontmatter":{"title":"Dagre 流程图布局","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"net/dagreFlow/index.zh.md"}}},{"node":{"html":"

通过自定义边，可以实现边的动画效果。

\n

使用指南

\n

下面代码演示了三种通过自定义边实现的边动画：

\n\n

G6 中更多关于动画的内容，请参考动画文档。

","fields":{"slug":"/zh/examples/scatter/edge"},"frontmatter":{"title":"边动画","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"scatter/edge/index.zh.md"}}},{"node":{"html":"

Edge animation can be realized by customing an edge.

\n

Usage

\n

The three demos below show the edge animation realized by customing edge:

\n\n

For more information, please refer to document Animation。

","fields":{"slug":"/en/examples/scatter/edge"},"frontmatter":{"title":"Edge Animation","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"scatter/edge/index.en.md"}}},{"node":{"html":"

The leaves will be aligned on the same level. This algorithm does not consider the node size, which means all the nodes will be regarded as unit size with 1px.\n
\ndendrogram

\n

Usage

\n

Dendrogram is an appropriate layout method for tree data structure. Please use it with TreeGraph. As the demo below, you can deploy it in layout while instantiating Graph. it can also be used for Subgraph Layout.

\n

You can set different configurations for different nodes if the parameter is Function type. Please refer to the ducuments for more information.

","fields":{"slug":"/en/examples/tree/dendrogram"},"frontmatter":{"title":"Dendrogram","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tree/dendrogram/index.en.md"}}},{"node":{"html":"

不管数据的深度多少，总是叶节点对齐。不考虑节点大小，布局时将节点视为1个像素点。\n
\ndendrogram

\n

使用指南

\n

生态树适用于展示树结构数据，配合 TreeGraph 使用。如下面代码所示，可在实例化 TreeGraph 时使用该布局。除此之外，还可以如子图布局所示单独使用布局。

","fields":{"slug":"/zh/examples/tree/dendrogram"},"frontmatter":{"title":"生态树","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tree/dendrogram/index.zh.md"}}},{"node":{"html":"

文本属性

\n

文本有以下可用的属性。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
属性名含义备注
fill设置用于填充绘画的颜色、渐变或模式对应canvas属性fillStyle
stroke设置用于笔触的颜色、渐变或模式对应canvas属性strokeStyle
shadowColor设置用于阴影的颜色
shadowBlur设置用于阴影的模糊级别数值越大，越模糊
shadowOffsetX设置阴影距形状的水平距离
shadowOffsetY设置阴影距形状的垂直距离
opacity设置绘图的当前 alpha 或透明值对应canvas属性globalAlpha
font设置文本内容的当前字体属性
textAlign设置文本内容的当前对齐方式支持的属性：center
textBaseline设置在绘制文本时使用的当前文本基线支持的属性:
top
fontStyle字体样式对应 font-style
fontVariant设置为小型大写字母字体对应 font-variant
fontWeight字体粗细对应 font-weight
fontSize字体大小对应 font-size
fontFamily字体系列对应 font-family
autoRotate是否自动旋转
\n

案例

\n
const data = {\n  nodes: [\n    {\n      id: 'node1',\n      x: 100,\n      y: 100,\n      shape: 'rect',\n      label: 'rect',\n    },\n  ],\n};\n\nconst graph = new G6.Graph({\n  container: 'mountNode',\n  width: 500,\n  height: 500,\n});\ngraph.data(data);\ngraph.render();\n\nconst node = graph.findById('node1');\ngraph.update(node, {\n  style: {\n    stroke: 'blue',\n  },\n  labelCfg: {\n    style: {\n      fill: 'red',\n      shadowOffsetX: 10,\n      shadowOffsetY: 10,\n      shadowColor: 'blue',\n      shadowBlur: 10,\n    },\n  },\n});\n
\n

通过以上代码修改node中文本的样式，效果如下图：

\n

\"image.png\"

","fields":{"slug":"/zh/docs/api/properties/TextProperties"},"frontmatter":{"title":"文本属性","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/properties/TextProperties.zh.md"}}},{"node":{"html":"

quadratic

\n

G6 内置了 quadratic 边，其默认样式如下。
\"image.png\"

\n

使用方法

\n

如 内置边 一节所示，配置边的方式有两种：实例化图时全局配置，在数据中动态配置。

\n

1 实例化图时全局配置

\n

用户在实例化 Graph 时候可以通过 defaultEdge 指定 shape 为 'quadratic'，即可使用 quadratic 边。

\n
const graph = new G6.Graph({\n  container: 'mountNode',\n  width: 800,\n  height: 600,\n  defaultEdge: {\n    shape: 'quadratic',\n    // 其他配置\n  },\n});\n
\n

2 在数据中动态配置

\n

如果需要使不同节点有不同的配置，可以将配置写入到节点数据中。这种配置方式可以通过下面代码的形式直接写入数据，也可以通过遍历数据的方式写入。

\n
const data = {\n  nodes: [\n    ... // 节点\n  ],\n  edges: [{\n    source: 'node0',\n    target: 'node1'\n    shape: 'quadratic',\n    ... // 其他配置\n    style: {\n      ...  // 样式属性，每种边的详细样式属性参见各边文档\n    }\n  },\n    ... // 其他边\n  ]\n}
\n

配置项说明

\n

quadratic 边支持以下的配置项，对于 Object 类型的配置项将在后面有详细讲解：

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称含义类型备注
color边的颜色String优先级低于 style 中的 stroke
style边的样式ObjectCanvas支持的属性
label标签文本文字String
labelCfg文件配置项Object
\n

样式属性 style

\n

Object 类型。其配置项与边的通用样式属性相同，见 内置边。下面代码演示在实例化图时全局配置方法中配置 style。
\"image.png\"

\n
const data = {\n  nodes: [\n    {\n      id: 'node0',\n      x: 100,\n      y: 100,\n      size: 20,\n    },\n    {\n      id: 'node1',\n      x: 200,\n      y: 100,\n      size: 20,\n    },\n  ],\n  edges: [\n    {\n      source: 'node0',\n      target: 'node1',\n      shape: 'quadratic',\n      label: 'quadratic',\n    },\n  ],\n};\nconst graph = new G6.Graph({\n  container: 'mountNode',\n  width: 800,\n  height: 600,\n  defaultEdge: {\n    // shape: 'quadratic',  // 在数据中已经指定 shape，这里无需再次指定\n    style: {\n      stroke: '#088',\n      endArrow: true,\n      lineWidth: 3,\n    },\n  },\n});\ngraph.data(data);\ngraph.render();\n
\n

标签文本配置 labelCfg

\n

Object 类型。其配置与边的通用文本配置相同，见 内置边。基于上面 样式属性 style 中的代码，下面代码在 defaultNode 中增加了 labelCfg 配置项进行文本的配置，使之达到如下图效果。
\"image.png\"

\n
const data = {\n  // ... data 内容\n};\nconst graph = new G6.Graph({\n  // ... 图的其他配置\n  defaultEdge: {\n    // ... 其他配置\n    labelCfg: {\n      refY: 10,\n      refX: 40,\n    },\n  },\n});\n// ...\n
","fields":{"slug":"/zh/docs/manual/middle/elements/edges/quaratic"},"frontmatter":{"title":"quadratic","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"manual/middle/elements/edges/quaratic.zh.md"}}},{"node":{"html":"

G6 内置了 ellipse 节点，其默认样式如下。标签文本位于椭圆中央。

\n

\"image.png\"

\n

使用方法

\n

如 内置节点 一节所示，配置节点的方式有两种：实例化图时全局配置，在数据中动态配置。

\n

1 实例化图时全局配置

\n

用户在实例化 Graph 时候可以通过 defaultNode 指定 shape 为 'ellipse'，即可使用 ellipse 节点。

\n
const graph = new G6.Graph({\n  container: 'mountNode',\n  width: 800,\n  height: 600,\n  defaultNode: {\n    shape: 'ellipse',\n    // 其他配置\n  },\n});\n
\n

2 在数据中动态配置

\n

如果需要使不同节点有不同的配置，可以将配置写入到节点数据中。这种配置方式可以通过下面代码的形式直接写入数据，也可以通过遍历数据的方式写入。

\n
const data = {\n  nodes: [{\n\t  id: 'node0',\n    shape: 'ellipse',\n    ... // 其他配置\n    },\n    ... // 其他节点\n  ],\n  edges: [\n    ... // 边\n  ]\n}
\n

配置项说明

\n

ellipse 节点支持以下的配置项，对于 Object 类型的配置项将在后面有详细讲解：

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称含义类型备注
size椭圆的大小NumberArray
style椭圆的默认样式ObjectCanvas支持的属性
labelCfg文件配置项Object
stateStyles各状态下的样式Object只对keyShape起作用
linkPoints椭圆上的链接点Object默认不显示
icon椭圆上icon配置Object默认不显示icon
\n

样式属性 style

\n

Object 类型。通过 style 配置来修改节点的填充色、描边等属性。下面代码演示在实例化图时全局配置方法中配置 style，使之达到如下图效果。
\"image.png\"

\n
const data = {\n  nodes: [\n    {\n      x: 100,\n      y: 100,\n      shape: 'ellipse',\n      label: 'ellipse',\n    },\n  ],\n};\nconst graph = new G6.Graph({\n  container: 'mountNode',\n  width: 800,\n  height: 600,\n  defaultNode: {\n    // shape: 'ellipse',  // 在数据中已经指定 shape，这里可以不用再此指定\n    size: [130, 80],\n    style: {\n      fill: '#bae637',\n      stroke: '#eaff8f',\n      lineWidth: 5,\n    },\n  },\n});\ngraph.data(data);\ngraph.render();\n
\n

标签文本配置 labelCfg

\n

Object 类型。通过 labelCfg 配置标签文本。基于上面 样式属性 style 中的代码，下面代码在 defaultNode 中增加了 labelCfg 配置项进行文本的配置，使之达到如下图效果。
\"image.png\"

\n
const data = {\n  // ... data 内容\n};\nconst graph = new G6.Graph({\n  // ... 图的其他属性\n  defaultNode: {\n    // ... 节点其他属性\n    labelCfg: {\n      offset: 20,\n      style: {\n        fill: '#9254de',\n        fontSize: 18,\n      },\n    },\n  },\n});\n// ...\n
\n

边的连入点 linkPoints

\n

Object 类型。通过配置 linkPoints ，可以指定节点上「上、下、左、右」四个方向上边的连入点。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称含义类型备注
top是否显示上部的连接点Boolean默认为false
bottom是否显示底部的连接点Boolean默认为false
left是否显示左侧的连接点Boolean默认为false
right是否显示右侧的连接点Boolean默认为false
size连接点的大小Number默认为3
fill连接点的填充色String默认为#72CC4A
stroke连接点的边框颜色String默认为#72CC4A
lineWidth连接点边框的宽度Number默认为1
\n

基于上面 样式属性 style 中的代码，下面代码在 defaultNode 中增加了 linkPoints 配置项进行连入点的配置，使之达到如下图效果。
\"image.png\"

\n
const data = {\n  // ... data 内容\n};\nconst graph = new G6.Graph({\n  // ... 图的其他属性\n  defaultNode: {\n    // ... 节点其他属性\n    linkPoints: {\n      top: true,\n      bottom: true,\n      left: true,\n      right: true,\n      size: 5,\n      fill: '#fff',\n    },\n  },\n});\n// ...\n
\n

图标 icon

\n

Object 类型。通过配置 icon，可以在圆上显示小图标。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称含义类型备注
show是否显示iconBoolean默认为false，不显示
widthicon的宽度Number默认为16
heighticon的高度Number默认为16
imgicon的地址String
\n

基于上面 样式属性 style 中的代码，下面代码在 defaultNode 中增加了 icon 配置项进行图标的配置，使之达到如下图效果。
\"image.png\"

\n
const data = {\n  // ... data 内容\n};\nconst graph = new G6.Graph({\n  // ... 图的其他属性\n  defaultNode: {\n    // ... 节点其他属性\n    icon: {\n      show: true,\n    },\n  },\n});\n// ...\n
","fields":{"slug":"/zh/docs/manual/middle/elements/nodes/ellipse"},"frontmatter":{"title":"ellipse","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"manual/middle/elements/nodes/ellipse.zh.md"}}},{"node":{"html":"

TreeGraph是G6专门为树图场景打造的图。TreeGraph继承自Graph。G6.TreeGraph与G6.Graph最大的区别就是数据结构和内置布局计算。主要出于以下考虑：

\n\n

初始化

\n

G6.TreeGraph

\n

参数\n| 名称 | 类型 | 默认值 | 描述 |\n| --- | --- | --- | --- |\n| layout | object | null | 3.0.4 版本开始支持树布局算法配置。3.0.4 版本之前是 function 形式。建议开发者使用配置形式，操作粒度更细。 |\n| animate | boolean | true | 默认打开重布局动画开关。 |

\n

用法

\n
const treeGraph = new G6.TreeGraph({\n  container: 'mountNode',\n  width: 800,\n  height: 600,\n  modes: {\n    default: [\n      {\n        type: 'collapse-expand',\n        onChange(item, collapsed) {\n          const icon = item.get('group').findByClassName('collapse-icon');\n          if (collapsed) {\n            icon.attr('symbol', EXPAND_ICON);\n          } else {\n            icon.attr('symbol', COLLAPSE_ICON);\n          }\n        },\n      },\n      'drag-canvas',\n      'zoom-canvas',\n    ],\n  },\n  layout: {\n    type: 'dendrogram',\n    direction: 'LR', // H / V / LR / RL / TB / BT\n    nodeSep: 50,\n    rankSep: 100,\n    radial: true,\n  },\n});\n
\n

layout配置项

\n

layout目前支持dendrogram、compactBox、mindmap和indeted四种布局方式。

\n

通用配置项

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称类型默认值描述
typestringdendrogram布局类型，支持dendrogram、compactBox、mindmap和indeted。
directionstringLR布局方向，有 LR , RL , TB , BT , H , V 可选。
L: 左； R: 右； T: 上； B：下； H: 垂直； V: 水平。
getChildrenFunction返回当前节点的所有子节点
\n

⚠️注意：当type=indeted时，direction只能取LR、RL和H这三个值。

\n

dendrogram

\n

dendrogram示意图\n使用dendrogram方式布局时，direction取不同值时的效果如下所示。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
LRRLH
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
TBBTV
\n

dendrogram配置项\n| 名称 | 类型 | 默认值 | 描述 |\n| --- | --- | --- | --- |\n| nodeSep | number | 20 | 同层次节点之间的间距 |\n| rankSep | number | 200 | 相邻层级节点之间的间距 |\n| nodeSize | number | 20 | 节点大小 |\n| subTreeSep | number | 10 | 子树之间的间距 |\n| isHorizontal | boolean | true | 是否是水平方向，默认为水平方向 |

\n

compactBox

\n

compactBox示意图\n使用compactBox方式布局时，direction取不同值时的效果如下所示。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
LRRLH
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
TBBTV
\n

compactBox配置项\n| 名称 | 类型 | 默认值 | 描述 |\n| --- | --- | --- | --- |\n| getId | Function | | 指定节点ID |\n| getHeight | Function | 36 | 指定节点高度 |\n| getWidth | Function | 18 | 指定节点宽度 |\n| getVGap | Function | 18 | 指定节点之间的垂直间距 |\n| getHGap | Function | 18 | 指定节点之间的水平间距 |

\n

⚠️注意：使用getWidth、getHeight、getVGap和getHGap指定节点的宽高及间距后，并不会改变节点的大小，具体原理如下所示：

\n
/*\n * Gaps: filling space between nodes\n * (x, y) ----------------------\n * |            vgap            |\n * |    --------------------    h\n * | h |                    |   e\n * | g |                    |   i\n * | a |                    |   g\n * | p |                    |   h\n * |   ---------------------    t\n * |                            |\n *  -----------width------------\n */\n
\n

🦁以上原理同样适用于indented和mindmap布局。

\n

indented

\n

indented示意图\n使用indented方式布局时，direction取不同值时的效果如下所示。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
LRRLH
\n

indented配置项\n| 名称 | 类型 | 默认值 | 描述 |\n| --- | --- | --- | --- |\n| indent | number | 20 | 与直接父节点的缩进值 |\n| getVGap | Function | 18 | 指定节点之间的垂直间距 |\n| getHeight | Function | 36 | 指定节点的高度 |

\n

mindmap

\n

mindmap示意图\n

\n

mindmap配置项\n| 名称 | 类型 | 默认值 | 描述 |\n| --- | --- | --- | --- |\n| getId | Function | | 指定节点ID |\n| getHeight | Function | 36 | 指定节点高度 |\n| getWidth | Function | 18 | 指定节点宽度 |\n| getSide | Function | | 指定当前节点在主题的左边 (left) 还是右边 (right) |\n| getSubTreeSep | Function | 0 | 指定子节点之间的高度间隔 |\n| getVGap | Function | 18 | 指定节点的垂直间距 |\n| getHGap | Function | 18 | 指定节点的水平间距 |

\n

更新

\n

addChild(data, parent)

\n

在指定的父节点下添加子树。

\n

参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| data | object | true | 子树的数据 |\n| parent | Node | string | true | 父节点或父节点ID |

\n

用法

\n
const data = {\n  id: 'sub1',\n  children: [\n    {\n      id: 'subTree1',\n      children: [...]\n    }, \n    {\n      id: 'subTree2',\n      children: [...]           \n    }\n  ]\n};\n\ntreeGraph.addChild(data, 'root')
\n

updateChild(data, parent)

\n

更新数据，差量更新子树。

\n

参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| data | object | true | 子树的数据 |\n| parent | Node | string | false | 父节点或父节点ID |

\n

⚠️注意：当parent参数为空时，则全量更新。

\n

用法

\n
const data = {\n  id: 'sub1',\n  children: [\n    {\n      id: 'subTree1',\n      children: [...]\n    }, \n    {\n      id: 'subTree2',\n      children: [...]           \n    }\n  ]\n};\n\ntreeGraph.updateChild(data, 'root')
\n

removeChild(id)

\n

删除指定的子树。

\n

参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| id | string | true | 要删除的子树的ID |

\n

用法

\n
treeGraph.removeChild('sub');\n
\n

布局

\n

changeLayout(layout)

\n

更改并应用指定的布局。

\n

参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| layout | object | false | 指定的布局配置，如不传，则不做变更 |

\n

用法

\n
const layout = {\n  type: 'mindmap',\n  dirction: 'H',\n  getSubTreeSep: () => 20,\n  getVGap: () => 25,\n  getHeight: () => 30,\n  getWidth: () => 30,\n};\ntreeGraph.changeLayout(layout);\n
\n

refreshLayout(fitView)

\n

数据变更后，重新布局，刷新视图，并更新到画布。

\n

参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| fitView | boolean | false | 更新布局后，是否需要自适应窗口 |

\n

用法

\n
treeGraph.refreshLayout(true);\n
\n

查找

\n

findDataById(id, target)

\n

根据指定的ID获取对应的源数据。

\n

参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| id | string | true | 指定的元素ID |\n| target | object | false | 从指定的节点开始查找，为空时从根节点开始查找 |

\n

返回值

\n\n

用法

\n
const target = {\n\tid: 'sub1',\n  children: [...]\n}\n\n// 从target节点开始查找sub1.1节点\nconst subData = treeGraph.findDataById('sub1.1', target)\n  \n// 从根节点开始查找sub1.1节点\nconst subData = treeGraph.findDataById('sub1.1')
","fields":{"slug":"/zh/docs/api/TreeGraph"},"frontmatter":{"title":"TreeGraph","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"api/TreeGraph.zh.md"}}},{"node":{"html":"

图的元素特指图上的节点Node和边Edge。在上一章节中，我们已经将Tutorial案例的图绘制了出来，但是各个元素及其 label 在视觉上很简陋。本文通过将上一章节中简陋的元素美化成如下效果，介绍元素的属性、配置方法。
\"image.png\"

\n
\n

图 1  元素属性配置后的 Tutorial案例。

\n
\n

基本概念

\n

图的元素

\n

图的元素特指图上的节点Node和边Edge。G6 内置了一系列 内置的节点 和内置的边，供用户自由选择。G6 不同的内置节点或不同的内置边主要区别在于元素的 图形Shape，例如，节点可以是圆形、矩形、图片等。如果 G6 内置的元素不能满足需求，用户也可以 自定义节点 或 自定义边。

\n

元素的属性

\n

不论是节点还是边，它们的属性分为两种：

\n\n

例如，G6 设定 hover 或 click 节点，造成节点状态的改变，只能自动改变节点的样式属性（如 fill、stroke 等），其他属性（如 shape 等）不能被改变。如果需要改变其他属性，要通过 graph.updateItem 手动配置。样式属性是一个名为 style 的对象， style 字段与其他属性并行。

\n

数据结构

\n

以节点元素为例，其属性的数据结构如下：

\n
{\n\tid: 'node0',          // 元素的 id\n  shape: 'circle',      // 元素的图形\n  size: 40,             // 元素的大小\n  label: 'node0'        // 标签文字\n  labelCfg: {           // 标签配置属性\n    positions: 'center',// 标签的属性，标签在元素中的位置\n    style: {            // 包裹标签样式属性的字段 style 与标签其他属性在数据结构上并行\n      fontSize: 12      // 标签的样式属性，文字字体大小\n    }\n  }\n  ...,                  // 其他属性\n  style: {              // 包裹样式属性的字段 style 与其他属性在数据结构上并行\n    fill: '#000',       // 样式属性，元素的填充色\n    stroke: '#888',     // 样式属性，元素的描边色\n    ...                 // 其他样式属性\n  }\n}
\n

边元素的属性数据结构与节点元素相似，只是其他属性中多了 source 和 target 字段，代表起始和终止节点的 id。
细化在图 1 中 Tutorial案例 的视觉需求，我们需要完成：

\n\n

配置属性

\n

在 G6 中，根据不同的场景需求，有 7 种配置元素属性的方式。这里，我们简单介绍其中的两种：

\n
    \n
  1. 实例化图时配置元素的全局属性；
    2. \n
  2. 在数据中配置。
    3. \n
\n

1. 实例化图时全局配置

\n

适用场景：所有节点统一的属性配置，所有边统一的属性配置。
使用方式：使用图的两个配置项：

\n\n

 注意 ：由于是统一的配置，不能根据数据中的属性（如 class、weight）等值的不同进行个性化设置，因此只能满足 R1、R2、R3、R4 需求。达到如下效果：
\"image.png\"

\n
\n

图 2  全局配置元素属性后的 Tutorial案例。

\n
\n


通过如下方式在实例化图时 defaultNode 和 defaultEdge ，可以完成上图效果：

\n
const graph = new G6.Graph({\n  // ...                   // 图的其他配置\n  // 节点在默认状态下的样式配置（style）和其他配置\n  defaultNode: {\n    size: 30, // 节点大小\n    // ...                 // 节点的其他配置\n    // 节点样式配置\n    style: {\n      fill: 'steelblue', // 节点填充色\n      stroke: '#666', // 节点描边色\n      lineWidth: 1, // 节点描边粗细\n    },\n    // 节点上的标签文本配置\n    labelCfg: {\n      // 节点上的标签文本样式配置\n      style: {\n        fill: '#fff', // 节点标签文字颜色\n      },\n    },\n  },\n  // 边在默认状态下的样式配置（style）和其他配置\n  defaultEdge: {\n    // ...                 // 边的其他配置\n    // 边样式配置\n    style: {\n      opacity: 0.6, // 边透明度\n      stroke: 'grey', // 边描边颜色\n    },\n    // 边上的标签文本配置\n    labelCfg: {\n      autoRotate: true, // 边上的标签文本根据边的方向旋转\n    },\n  },\n});\n
\n

2. 在数据中配置

\n

适用场景：不同节点/边可以有不同的个性化配置。
因此，这种配置方式可以满足 R5、R6 需求。
使用方式：可以直接将配置写入数据文件；也可以在读入数据后，通过遍历的方式写入配置。这里展示读入数据后，通过遍历的方式写入配置。下面代码展示了如何遍历数据进行属性的配置：

\n
const nodes = remoteData.nodes;\nnodes.forEach(node => {\n  if (!node.style) {\n    node.style = {};\n  }\n  switch (\n    node.class // 根据节点数据中的 class 属性配置图形\n  ) {\n    case 'c0': {\n      node.shape = 'circle'; // class = 'c0' 时节点图形为 circle\n      break;\n    }\n    case 'c1': {\n      node.shape = 'rect'; // class = 'c1' 时节点图形为 rect\n      node.size = [35, 20]; // class = 'c1' 时节点大小\n      break;\n    }\n    case 'c2': {\n      node.shape = 'ellipse'; // class = 'c1' 时节点图形为 ellipse\n      node.size = [35, 20]; // class = 'c2' 时节点大小\n      break;\n    }\n  }\n});\n\ngraph.data(remoteData);\n
\n

运行结果如下：
\"image.png\"

\n
\n

图 3

\n
\n

可以看到，图中有一些节点被渲染成了矩形，还有一些被渲染成了椭圆形。除了设置 shape 属性之外，我们还覆盖了上文全局配置的节点的 size 属性，在矩形和椭圆的情况下，size 是一个数组；而在默认圆形的情况下，G6 仍然会去读全局配置的 size 属性为数字 30。也就是说，动态配置属性让我们既可以根据数据的不同配置不同的属性值，也可以有能力覆盖全局静态的属性值。

\n

进一步地，我们尝试根据数据的比重不同，配置不一样边的粗细：

\n
// const nodes = ...\n\n// 遍历边数据\nconst edges = remoteData.edges;\nedges.forEach(edge => {\n  if (!edge.style) {\n    edge.style = {};\n  }\n  edge.style.lineWidth = edge.weight; // 边的粗细映射边数据中的 weight 属性数值\n});\n\ngraph.data(remoteData);\n
\n

结果如下：
\"image.png\"
如图所示，边的粗细已经按照数据的比重成功渲染了出来，但是边原有的样式（透明度、颜色）却丢失了。这是因为我们提到过动态配置属性会覆盖全局配置属性，这里配置了 style.lineWidth，导致覆盖了全局的 style 对象。解决办法是将被覆盖的边的样式都移到动态配置里面来：

\n
const graph = new G6.Graph({\n  // ...\n  defaultEdge: {\n    // 去掉全局配置的 style\n    labelCfg: {\n      // 边上的标签文本配置\n      autoRotate: true, // 边上的标签文本根据边的方向旋转\n    },\n  },\n});\n\n// 遍历点数据\n// const nodes = ...\n// nodes.forEach ...\n\n// 遍历边数据\nconst edges = remoteData.edges;\nedges.forEach(edge => {\n  if (!edge.style) {\n    edge.style = {};\n  }\n  edge.style.lineWidth = edge.weight; // 边的粗细映射边数据中的 weight 属性数值\n  // 移到此处\n  opt.style.opacity = 0.6;\n  opt.style.stroke = 'grey';\n});\n\ngraph.data(remoteData);\ngraph.render();\n
\n


再次渲染，结果如下：
\"image.png\"
\n
如图所示，边的透明度和颜色均渲染正确。

\n

完整代码

\n

至此，完整代码如下：

\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Tutorial Demo</title>\n</head>\n<body>\n  <div id=\"mountNode\"></div>\n  <script src=\"https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.0/build/g6.js\"></script>\n  <script>\n    const graph = new G6.Graph({\n      container: 'mountNode',\n      width: 800,\n      height: 600,\n      fitView: true,\n      fitViewPadding: [ 20, 40, 50, 20 ],\n      defaultNode: {\n        size: 30,\n        labelCfg: {\n          style: {\n            fill: '#fff'\n          }\n        }\n      },\n      defaultEdge: {\n        labelCfg: {\n          autoRotate: true\n        }\n      },\n    });\n\t\tconst main = async () => {\n      const response = await fetch(\n        'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json'\n      );\n      const remoteData = await response.json();\n      const nodes = remoteData.nodes;\n      const edges = remoteData.edges;\n      nodes.forEach(node => {\n        if (!node.style) {\n          node.style = {};\n        }\n        node.style.lineWidth = 1;\n        node.style.stroke = '#666';\n        node.style.fill = 'steelblue';\n        switch (node.class) {\n          case 'c0': {\n            node.shape = 'circle';\n            break;\n          }\n          case 'c1': {\n            node.shape = 'rect';\n            node.size = [ 35, 20 ];\n            break;\n          }\n          case 'c2': {\n            node.shape = 'ellipse';\n            node.size = [ 35, 20 ];\n            break;\n          }\n        }\n      });\n      edges.forEach(edge => {\n        if (!edge.style) {\n          edge.style = {};\n        }\n        edge.style.lineWidth = edge.weight;\n        edge.style.opacity = 0.6;\n        edge.style.stroke = 'grey';\n      });\n\n      graph.data(remoteData);\n      graph.render();\n    };\n    main();\n  </script>\n</body>\n</html>
\n

 注意 
若需更换数据，请替换 'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json' 为新的数据文件地址。

","fields":{"slug":"/zh/docs/manual/tutorial/elements"},"frontmatter":{"title":"元素及其配置","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/elements.md"}}},{"node":{"html":"

G6 提供了一系列内置节点，包括 circle、rect、ellipse、diamond、triangle、star、image、modelRect。若内置节点无法满足需求，用户还可以通过 G6.registerNode('nodeName', options) 进行自定义节点，方便用户开发更加定制化的节点，包括含有复杂图形的节点、复杂交互的节点、带有动画的节点等。

\n

在本章中我们会通过四个案例，从简单到复杂讲解节点的自定义。这四个案例是：\n
\n1. 从无到有的定义节点：绘制图形；优化性能。\n
\n2. 扩展现有的节点：附加图形；增加动画。\n
\n3. 调整节点的锚点；\n
\n4. 调整节点的鼠标选中/悬浮样式。样式变化响应；动画响应。

\n

通过 图形 Shape 章节的学习，我们应该已经知道了自定义节点时需要满足以下两点：

\n\n

G6 中自定义节点的 API 如下：

\n
G6.registerNode(\n  'nodeName',\n  {\n    options: {\n      style: {},\n      stateStyles: {\n        hover: {},\n        selected: {},\n      },\n    },\n    /**\n     * 绘制节点/边，包含文本\n     * @param  {Object} cfg 节点的配置项\n     * @param  {G.Group} group 节点的容器\n     * @return {G.Shape} 绘制的图形，通过node.get('keyShape') 可以获取到\n     */\n    draw(cfg, group) {},\n    /**\n     * 绘制后的附加操作，默认没有任何操作\n     * @param  {Object} cfg 节点的配置项\n     * @param  {G.Group} group 节点的容器\n     */\n    afterDraw(cfg, group) {},\n    /**\n     * 更新节点，包含文本\n     * @override\n     * @param  {Object} cfg 节点的配置项\n     * @param  {Node} node 节点\n     */\n    update(cfg, node) {},\n    /**\n     * 更新节点后的操作，一般同 afterDraw 配合使用\n     * @override\n     * @param  {Object} cfg 节点的配置项\n     * @param  {Node} node 节点\n     */\n    afterUpdate(cfg, node) {},\n    /**\n     * 设置节点的状态，主要是交互状态，业务状态请在 draw 方法中实现\n     * 单图形的节点仅考虑 selected、active 状态，有其他状态需求的用户自己复写这个方法\n     * @param  {String} name 状态名称\n     * @param  {Object} value 状态值\n     * @param  {Node} node 节点\n     */\n    setState(name, value, node) {},\n    /**\n     * 获取控制点\n     * @param  {Object} cfg 节点、边的配置项\n     * @return {Array|null} 控制点的数组,如果为 null，则没有控制点\n     */\n    getAnchorPoints(cfg) {},\n  },\n  extendNodeName,\n);\n
\n

  注意：

\n\n

1. 从无到有定义节点

\n

绘制图形

\n

我们自己来实现一个菱形的节点，如下图所示。

\n
\n

G6 有内置的菱形节点 diamond。为了演示，这里实现了一个自定义的菱形，相当于复写了内置的 diamond。

\n
\nimg\n
G6.registerNode('diamond', {\n  draw(cfg, group) {\n    // 如果 cfg 中定义了 style 需要同这里的属性进行融合\n    const shape = group.addShape('path', {\n      attrs: {\n        path: this.getPath(cfg), // 根据配置获取路径\n        stroke: cfg.color, // 颜色应用到边上，如果应用到填充，则使用 fill: cfg.color\n      },\n    });\n    if (cfg.label) {\n      // 如果有文本\n      // 如果需要复杂的文本配置项，可以通过 labeCfg 传入\n      // const style = (cfg.labelCfg && cfg.labelCfg.style) || {};\n      // style.text = cfg.label;\n      group.addShape('text', {\n        // attrs: style\n        attrs: {\n          x: 0, // 居中\n          y: 0,\n          textAlign: 'center',\n          textBaseline: 'middle',\n          text: cfg.label,\n          fill: '#666',\n        },\n      });\n    }\n    return shape;\n  },\n  // 返回菱形的路径\n  getPath(cfg) {\n    const size = cfg.size || [40, 40]; // 如果没有 size 时的默认大小\n    const width = size[0];\n    const height = size[1];\n    //  / 1 \\\n    // 4     2\n    //  \\ 3 /\n    const path = [\n      ['M', 0, 0 - height / 2], // 上部顶点\n      ['L', width / 2, 0], // 右侧顶点\n      ['L', 0, height / 2], // 下部顶点\n      ['L', -width / 2, 0], // 左侧顶点\n      ['Z'], // 封闭\n    ];\n    return path;\n  },\n});\n
\n

上面的代码自定义了一个菱形节点，然后我们使用下面的数据输入就会绘制出 diamond 这个节点。

\n
const data = {\n  nodes: [\n    { x: 50, y: 100, shape: 'diamond' }, // 最简单的\n    { x: 150, y: 100, shape: 'diamond', size: [50, 100] }, // 添加宽高\n    { x: 250, y: 100, color: 'red', shape: 'diamond' }, // 添加颜色\n    { x: 350, y: 100, label: '菱形', shape: 'diamond' }, // 附加文本\n  ],\n};\nconst graph = new G6.Graph({\n  container: 'mountNode',\n  width: 500,\n  height: 500,\n});\ngraph.data(data);\ngraph.render();\n
\nimg\n

优化性能

\n

当图中节点或边通过 graph.update(item, cfg) 重绘时，默认情况下会调用节点的 draw 方法进行重新绘制。在数据量大或节点上图形数量非常多（特别是文本多）的情况下，draw 方法中对所有图形、赋予样式将会非常消耗性能。

\n

在自定义节点时，重写 update 方法，在更新时将会调用该方法替代 draw。我们可以在该方法中指定需要更新的图形，从而避免频繁调用 draw 、全量更新节点上的所有图形。当然，update 方法是可选的，如果没有性能优化的需求可以不重写该方法。

\n

在实现 diamond 的过程中，重写 update 方法，找到需要更新的 shape 进行更新，从而优化性能。寻找需要更新的图形可以通过：

\n\n

下面代码仅更新了 diamond 的关键图形的路径和颜色。

\n
G6.registerNode('diamond', {\n  draw(cfg, group) {\n    // ... // 见前面代码\n  },\n  getPath(cfg) {\n    // ... // 见前面代码\n  },\n  update(cfg, node) {\n    const group = node.getContainer(); // 获取容器\n    const shape = group.get('children')[0]; // 按照添加的顺序\n    const style = {\n      path: this.getPath(cfg),\n      stroke: cfg.color,\n    };\n    shape.attr(style); // 更新属性\n    // 更新文本的逻辑类似，但是需要考虑 cfg.label 是否存在的问题\n    // 通过 label.attr() 更新文本属性即可\n  },\n});\n
\n
\n

2. 扩展现有节点

\n

扩展 Shape

\n

G6 中已经内置了一些节点，如果用户仅仅想对现有节点进行调整，复用原有的代码，则可以基于现有的节点进行扩展。同样实现 diamond ，可以基于 circle、ellipse、rect 等内置节点的进行扩展。simple-shape 是这些内置节点图形的基类，也可以基于它进行扩展。

\n

下面以基于 single-shape 为例进行扩展。draw，update，setState 方法在 simple-shape 中都有实现，这里仅需要复写 getShapeStyle 方法即可。返回的对象中包含自定义图形的路径和其他样式。

\n
G6.registerNode(\n  'diamond',\n  {\n    shapeType: 'path', // group.addShape 时需要指定的类型\n    getShapeStyle(cfg) {\n      const size = this.getSize(cfg); // 转换成 [width, height] 的模式\n      const color = cfg.color;\n      const width = size[0];\n      const height = size[1];\n      //  / 1 \\\n      // 4     2\n      //  \\ 3 /\n      const path = [\n        ['M', 0, 0 - height / 2], // 上部顶点\n        ['L', width / 2, 0], // 右侧顶点\n        ['L', 0, height / 2], // 下部顶点\n        ['L', -width / 2, 0], // 左侧顶点\n        ['Z'], // 封闭\n      ];\n      const style = Util.mix(\n        {},\n        {\n          path: path,\n          stroke: color,\n        },\n        cfg.style,\n      );\n      return style;\n    },\n  },\n  // 注意这里继承了 'single-shape'\n  'single-shape',\n);\n
\n

添加动画

\n

通过 afterDraw 同样可以实现扩展，下面我们来看一个节点的动画场景，如下图所示。
\nimg

\n

上面的动画效果，可以通过以下方式实现：

\n\n

更多关于动画的实现，请参考基础动画章节。

\n
\n

3. 调整锚点 anchorPoint

\n

节点上的锚点 anchorPoint 作用是确定节点与边的相交的位置，看下面的场景：

\nimg\nimg\n
\n

（左）没有设置锚点时。（右）diamond 设置了锚点后。

\n
\n

有两种方式来调整节点上的锚点：

\n\n

      适用场景：可以为不同节点配置不同的锚点，更定制化。

\n\n

      适用场景：全局配置锚点，所有该自定义节点类型的节点都相同。

\n

数据中指定锚点

\n
const data = {\n  nodes: [\n    {\n      id: 'node1',\n      x: 100,\n      y: 100,\n      anchorPoints: [\n        [0, 0.5], // 左侧中间\n        [1, 0.5], // 右侧中间\n      ],\n    },\n    //...       // 其他节点\n  ],\n  edges: [\n    //... // 边\n  ],\n};\n
\n

自定义时指定锚点

\n
G6.registerNode(\n  'diamond',\n  {\n    //... // 其他方法\n    getAnchorPoints() {\n      return [\n        [0, 0.5], // 左侧中间\n        [1, 0.5], // 右侧中间\n      ];\n    },\n  },\n  'rect',\n);\n
\n
\n

4. 调整状态样式

\n

常见的交互都需要节点和边通过样式变化做出反馈，例如鼠标移动到节点上、点击选中节点/边、通过交互激活边上的交互等，都需要改变节点和边的样式，有两种方式来实现这种效果：

\n
    \n
  1. 在数据上添加标志字段，在自定义 shape 过程中根据约定进行渲染；
    2. \n
  2. 将交互状态同原始数据和绘制节点的逻辑分开，仅更新节点。
    3. \n
\n

我们推荐用户使用第二种方式来实现节点的状态调整，可以通过以下方式来实现：

\n\n

基于 rect 扩展出一个 custom 图形，默认填充色为白色，当鼠标点击时变成红色，实现这一效果的示例代码如下：

\n
// 基于 rect 扩展出新的图形\nG6.registerNode(\n  'custom',\n  {\n    // 设置状态\n    setState(name, value, item) {\n      const group = item.getContainer();\n      const shape = group.get('children')[0]; // 顺序根据 draw 时确定\n      if (name === 'selected') {\n        if (value) {\n          shape.attr('fill', 'red');\n        } else {\n          shape.attr('fill', 'white');\n        }\n      }\n    },\n  },\n  'rect',\n);\n\n// 点击时选中，再点击时取消\ngraph.on('node:click', ev => {\n  const node = ev.item;\n  graph.setItemState(node, 'selected', !node.hasState('selected')); // 切换选中\n});\n
\n

G6 并未限定节点的状态，只要你在 setState 方法中进行处理你可以实现任何交互，如实现鼠标放到节点上后节点逐渐变大的效果。
\nimg

\n
G6.registerNode(\n  'custom',\n  {\n    // 设置状态\n    setState(name, value, item) {\n      const group = item.getContainer();\n      const shape = group.get('children')[0]; // 顺序根据 draw 时确定\n      if (name === 'running') {\n        if (value) {\n          shape.animate(\n            {\n              r: 20,\n              repeat: true,\n            },\n            1000,\n          );\n        } else {\n          shape.stopAnimate();\n          shape.attr('r', 10);\n        }\n      }\n    },\n  },\n  'circle',\n);\n\n// 鼠标移动到上面 running，移出结束\ngraph.on('node:mouseenter', ev => {\n  const node = ev.item;\n  graph.setItemState(node, 'running', true);\n});\n\ngraph.on('node:mouseleave', ev => {\n  const node = ev.item;\n  graph.setItemState(node, 'running', false);\n});\n
","fields":{"slug":"/zh/docs/manual/advanced/custom-node"},"frontmatter":{"title":"自定义节点","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"manual/advanced/custom-node.zh.md"}}},{"node":{"html":"

The custom node mechanism in G6 allows users to design their own node when there are no appropriate built-in nodes for their scenario.

\n

Usage

\n

For more information, please refer to Custom Node。

","fields":{"slug":"/en/examples/shape/customNode"},"frontmatter":{"title":"Custom Node","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"shape/customNode/index.en.md"}}},{"node":{"html":"

当 G6 的内置节点不能满足需求时，G6 的自定义节点机制允许用户设计和定制新的边类型。

\n

使用指南

\n

更多信息参见自定义节点。

","fields":{"slug":"/zh/examples/shape/customNode"},"frontmatter":{"title":"自定义节点","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"shape/customNode/index.zh.md"}}},{"node":{"html":"

State of G6 includes interaction states and bussiness states.

\n

Usage

\n

Animation is an important part of visualization. Users can realized complex animation by onFrame.\nThe Demo below shows how to realized edge animation with interaction by states.

\n

For more information, please refer to document Animation。

","fields":{"slug":"/en/examples/scatter/stateChange"},"frontmatter":{"title":"State Switch","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"scatter/stateChange/index.en.md"}}},{"node":{"html":"

G6 中的 state，指的是状态，包括交互状态和业务状态两种。

\n

使用指南

\n

动画是可视化中非常重要的内容。对于一些复杂的动画效果，可以通过 onFrame 来实现。\n下面代码演示展示通过结合状态，实现在交互过程中，展示单条边或多条边的动画。

\n

G6 中更多关于动画的内容，请参考动画文档。

","fields":{"slug":"/zh/examples/scatter/stateChange"},"frontmatter":{"title":"状态切换","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"scatter/stateChange/index.zh.md"}}},{"node":{"html":"

Update the label or background of items with interaction.

\n

Usage

\n

In some scenario, labels and background need to be updated by interaction. The following demos show the implementation.

\n

For more information about properties of label, please refre to Text API。

","fields":{"slug":"/en/examples/interaction/label"},"frontmatter":{"title":"Label and Background Updating","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"interaction/label/index.en.md"}}},{"node":{"html":"

交互过程中动态改变节点或边上的文本。

\n

使用指南

\n

在有些业务场景中，需要通过交互来修改节点或边上的文本，也有可能会通过点击来切换节点的背景图片，对于这类需求，可以使用演示案例中的方式来实现。

\n

G6 中支持的所有文本属性可以参考 API文档。

","fields":{"slug":"/zh/examples/interaction/label"},"frontmatter":{"title":"改变标签或背景","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"interaction/label/index.zh.md"}}},{"node":{"html":"

Custom flow graph.

\n

Usage

\n

As the demo below, to satisfy such a highly customized requirments, users can custom nodes and edges by themself.

","fields":{"slug":"/en/examples/case/customFlow"},"frontmatter":{"title":"Custom Fow Graph","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"case/customFlow/index.en.md"}}},{"node":{"html":"

自定义流向图。

\n

使用指南

\n

对于一些定制化比较强的需求，使用 G6 内置的节点和边很难实现。下面的资金流向图是通过自定义节点和边的方式实现的。

","fields":{"slug":"/zh/examples/case/customFlow"},"frontmatter":{"title":"自定义流向图","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"case/customFlow/index.zh.md"}}},{"node":{"html":"

Fruchterman Reingold Layout is a kind of force-directed layout in theory. The differences are the definitions of attracitve force and repulsive force.

\n

Usage

\n

As the demo below, you can deploy it in layout while instantiating Graph. it can also be used for Subgraph Layout. By tuning the parameters, you can adjust the iteration number, layout compactness, layout by clusters, and so on.

\n","fields":{"slug":"/en/examples/net/furchtermanLayout"},"frontmatter":{"title":"Fruchterman Layout","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"net/furchtermanLayout/index.en.md"}}},{"node":{"html":"

Fruchterman Reingold 布局算法在原理上而言属于力导向布局算法。其引力与斥力的定义方式与经典的 Force Diected 力导向图布局有少许不同。

\n

使用指南

\n

G6 内置的 Fruchterman 布局可在实例化 Graph 时使用该布局。除此之外，还可以如子图布局所示单独使用布局。该布局可以通过配置调整迭代次数、紧凑程度、是否按照聚类布局等。

\n","fields":{"slug":"/zh/examples/net/furchtermanLayout"},"frontmatter":{"title":"Fruchterman 图布局","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"net/furchtermanLayout/index.zh.md"}}},{"node":{"html":"

The nodes with same depth will be placed on the same level. Difference from compactBox, Mindmap will not consider the node size.\n
\nmindmap

\n

Usage

\n

Mindmap is an appropriate layout method for tree data structure. Please use it with TreeGraph. As the demo below, you can deploy it in layout while instantiating Graph. it can also be used for Subgraph Layout.

\n

You can set different configurations for different nodes if the parameter is Function type. Please refer to the ducuments for more information.

","fields":{"slug":"/en/examples/tree/mindmap"},"frontmatter":{"title":"Mindmap","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"tree/mindmap/index.en.md"}}},{"node":{"html":"

深度相同的节点将会被放置在同一层，与 compactBox 不同的是，布局不会考虑节点的大小。\n
\nmindmap

\n

使用指南

\n

脑图树适用于展示树结构数据，配合 TreeGraph 使用。如下面代码所示，可在实例化 TreeGraph 时使用该布局。除此之外，还可以如子图布局所示单独使用布局。

\n

该布局有以下配置项，Function 类型的配置项可以为不同的元素配置不同的值。具体描述请查看相关教程。

\n","fields":{"slug":"/zh/examples/tree/mindmap"},"frontmatter":{"title":"脑图树","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"tree/mindmap/index.zh.md"}}},{"node":{"html":"

Item是G6中绘图元素实例，目前包含节点和边的实例。对于实例的变更建议在graph上进行。

\n

更新

\n

update(model)

\n

根据元素数据项，更新元素。

\n

参数

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称类型是否必选描述
modelobjecttrue元素描述项，包括数据和样式
\n

提示 其中参数model可包括以下属性：

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称类型是否必选描述
idstringtrue元素ID，必须唯一
styleobjectfalse元素样式
shapestringfalse元素的形状，不传则使用默认值
labelstringfalse元素label，有该字段时默认会渲染label
\n

用法

\n
const model = {\n  id: 'node',\n  shape: 'rect',\n  label: 'node',\n  style: {\n    fill: 'red',\n  },\n};\n\nitem.update(model);\n
\n

refresh()

\n

刷新元素，包括更新元素位置，更新元素样式，清除之前的缓存。

\n

一般在以下情况时，会刷新元素：

\n\n

用法

\n
item.refresh();\n
\n

updatePosition(cfg)

\n

更新元素位置，避免整体重新绘制。

\n

参数

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称类型是否必选描述
cfgobjecttrue元素配置项，包括x、y属性，如果参数中无x、y属性，则更新时使用数据项中的值。
\n

用法

\n
const cfg = {\n  x: 100,\n  y: 200,\n};\n// 此时更新时，使用参数中的x、y坐标\nitem.updatePosition(cfg);\n\nconst cfg1 = {\n  name: 'abc',\n  dept: 'antv',\n};\n// 此时更新时，使用item.getModel()中的x、y坐标值\nitem.updatePosition(cfg1);\n
\n

销毁

\n

destroy()

\n

销毁元素，主要包括停止动画、删除group中的所有元素、清空配置项、设置destroyed为true等操作。

\n

用法

\n
item.destroy();\n
\n

通用

\n

getBBox()

\n

获取元素的包围盒。

\n

返回值

\n\n

返回值对象包括以下属性：

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称类型描述
xnumber视口x坐标
ynumber视口y坐标
widthnumberbbox宽度
heightnumberbbox高度
centerXnumber中心点x坐标
centerYnumber中心点y坐标
\n

用法

\n
item.getBBox();\n
\n

getContainer()

\n

获取元素的容器。

\n

返回值

\n\n

用法

\n
// 获取元素的容器\nconst group = item.getContainer();\n\n// 等价于\nconst group = item.get('group');\n
\n

getKeyShape()

\n

获取元素的关键形状，用于计算节点大小、连线截距等。

\n

返回值

\n\n

用法

\n
// 获取元素的容器\nconst keyShape = item.getKeyShape();\n\n// 等价于\nconst keyShape = item.get('keyShape');\n
\n

getModel()

\n

获取元素的数据模型。

\n

返回值

\n\n

用法

\n
// 获取元素的容器\nconst model = item.getModel();\n\n// 等价于\nconst model = item.get('model');\n
\n

getType()

\n

获取元素的类型。

\n

返回值

\n\n

用法

\n
// 获取元素的容器\nconst type = item.getType();\n\n// 等价于\nconst type = item.get('type');\n
\n

enableCapture(enable)

\n

是否拾取及触发该元素的交互事件。

\n

参数

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称类型是否必选描述
enablebooleantrue是否允许该元素响应事件的标识，如果为true，则允许，否则不允许
\n

用法

\n
// 不允许元素响应事件\nitem.enableCapture(false);\n\n// 允许元素响应事件\nitem.enableCapture(true);\n
\n

clearCache()

\n

更新或刷新等操作后，清除缓存。

\n

用法

\n
// 清除缓存\nitem.clearCache();\n
\n

状态

\n

show()

\n

显示元素。

\n

用法

\n
item.show();\n
\n

hide()

\n

隐藏元素。

\n

用法

\n
item.hide();\n
\n

changeVisibility(visible)

\n

更改元素是否显示。

\n

参数

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称类型是否必选描述
visiblebooleantrue是否显示元素，true为显示，false为隐藏
\n

用法

\n
// 显示元素\nitem.changeVisibility(true);\n\n// 隐藏元素\nitem.changeVisibility(false);\n
\n

isVisible()

\n

查询元素显示状态。

\n

返回值

\n\n

用法

\n
const visible = item.isVisible();\n
\n

toFront()

\n

将元素的层级设置到最上层，即当有元素重叠时，将元素置于顶层。。

\n

用法

\n
item.toFront();\n
\n

toBack()

\n

将元素的层级设置到最下层，即当有元素重叠时，将元素置于底层。

\n

用法

\n
item.toBack();\n
\n

setState(state, enable)

\n

更新元素的状态。

\n

参数

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称类型是否必选描述
statestringtrue元素的状态，如selected、hover
enablebooleantrue是否启用状态的标识，为true表示启用该状态，否则不启用。
\n

用法

\n
item.setState('selected', true);\nitem.setState('actived', false);\n
\n

clearStates(states)

\n

清除指定的状态，如果不传states，则默认清除第一个状态。

\n

参数

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称类型是否必选描述
statesstringarraytrue
\n

用法

\n
// 清除selected状态\nitem.clearStates('selected');\n\n// 清除active的、hover状态\nitem.clearStates(['actived', 'hover']);\n
\n

getStates()

\n

获取当前元素的所有状态。

\n

返回值

\n\n

用法

\n
// 获取元素的所有状态\nconst states = item.getStates();\n
\n

hasState(state)

\n

判断元素是否具有某种指定的状态。

\n

参数

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称类型是否必选描述
statestringtrue元素的状态
\n

返回值

\n\n

用法

\n
// 获取元素的所有状态\nconst state = item.hasState('hover');\n
\n

样式

\n

getStateStyle(state)

\n

获取元素指定状态的样式，返回的样式会将全局样式、默认样式和元素自定义样式合并。

\n

参数

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称类型是否必选描述
statestringtrue元素的状态
\n

返回值

\n\n

用法

\n
// 获取元素的指定状态的样式\nconst style = item.getStateStyle('selected');\n
\n

getOriginStyle()

\n

获取元素keyShape的样式。

\n

返回值

\n\n

用法

\n
const style = item.getKeyShapeStyle();\n
\n

getCurrentStatesStyle()

\n

获取当前元素的所有状态的样式。

\n

返回值

\n\n

用法

\n
const styles = item.getCurrentStatesStyle();\n
","fields":{"slug":"/zh/docs/api/Item"},"frontmatter":{"title":"Item","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"api/Item.zh.md"}}},{"node":{"html":"

当数据中没有节点位置信息，或者数据中的位置信息不满足需求时，需要借助一些布局算法对图进行布局。G6 提供了 7 种一般图的布局和 4 种树图的布局：
一般图：

\n\n

树图布局：

\n\n

各种布局方法的具体介绍及其配置参见 Layout API。本教程中，我们使用的是力导向布局 (Force Layout)。
\"image.png\"

\n

取消自动适配画布

\n

我们在之前的教程里面，为了能够将超出画布的图适配到视野中，在实例化图时使用了 fitView 配置项。这节开始我们将会去掉这个特性。因为复杂的布局系统会打破适配的规则，反而会造成更多的困扰。让我们将相关的适配代码变为注释：

\n
const graph = new G6.Graph({\n  // ...\n  // fitView: true,\n  // fitViewPadding: [ 20, 40, 50, 20 ]\n});\n
\n

默认布局

\n

当实例化图时没有配置布局时：

\n\n

配置布局

\n

G6 使用布局的方式非常简单，在图实例化的时候，加上 layout 配置即可。下面代码在实例化图时设置了布局方法为 type: 'force'，即经典力导向图布局。并设置了参数 preventOverlap: true ，表示希望节点不重叠。力导向布局的更多配置项参见：Layout API。

\n
const graph = new G6.Graph({\n  ...                      // 其他配置项\n  layout: {                // Object，可选，布局的方法及其配置项，默认为 random 布局。\n    type: 'force',         // 指定为力导向布局\n    preventOverlap: true,  // 防止节点重叠\n    // nodeSize: 30        // 节点大小，用于算法中防止节点重叠时的碰撞检测。由于已经在上一节的元素配置中设置了每个节点的 size 属性，则不需要在此设置 nodeSize。\n  }\n});
\n

结果如下：
\"image.png\"

\n

如图所示，节点按照力导向布局自动平衡。但是图中的节点过于拥挤，边上的文字信息被挤占，无法看清。我们希望布局计算边的距离可以更长一些。G6 的力导向布局提供了 linkDistance 属性用来指定布局的时候边的距离长度：

\n
const graph = new G6.Graph({\n  // ...\n  layout: {\n    type: 'force',\n    preventOverlap: true,\n    linkDistance: 100, // 指定边距离为100\n  },\n});\n
\n

结果如下：
\"image.png\"

\n
\n

不同布局之间、相同布局不同参数允许动态切换和过渡，具体参见：布局切换。

\n
\n

 提示 
布局将在调用 graph.render() 时执行计算。

\n

完整代码

\n

至此，完整代码如下：

\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Tutorial Demo</title>\n</head>\n<body>\n<div id=\"mountNode\"></div>\n<script src=\"https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.0/build/g6.js\"></script>\n<script>\n  const graph = new G6.Graph({\n    container: 'mountNode',\n    width: 800,\n    height: 600,\n    defaultNode: {\n      size: 30,\n      labelCfg: {\n        style: {\n          fill: '#fff'\n        }\n      }\n    },\n    defaultEdge: {\n      labelCfg: {\n        autoRotate: true\n      }\n    },\n    layout: {\n      type: 'force',            // 设置布局算法为 force\n      linkDistance: 100,        // 设置边长为 100\n      preventOverlap: true,     // 设置防止重叠\n    }\n  });\n  const main = async () => {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json'\n    );\n    const remoteData = await response.json();\n    \n    const nodes = remoteData.nodes;\n    const edges = remoteData.edges;\n    nodes.forEach(node => {\n      if (!node.style) {\n        node.style = {};\n      }\n      node.style.lineWidth = 1;\n      node.style.stroke = '#666';\n      node.style.fill = 'steelblue';\n      switch (node.class) {\n        case 'c0': {\n          node.shape = 'circle';\n          break;\n        }\n        case 'c1': {\n          node.shape = 'rect';\n          node.size = [ 35, 20 ];\n          break;\n        }\n        case 'c2': {\n          node.shape = 'ellipse';\n          node.size = [ 35, 20 ];\n          break;\n        }\n      }\n    });\n    edges.forEach(edge => {\n      if (!edge.style) {\n        edge.style = {};\n      }\n      edge.style.lineWidth = edge.weight;\n      edge.style.opacity = 0.6;\n      edge.style.stroke = 'grey';\n    });\n\n    graph.data(remoteData);\n    graph.render();\n  };\n  main();\n</script>\n</body>\n</html>
\n

 注意 
若需更换数据，请替换 'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json' 为新的数据文件地址。

","fields":{"slug":"/zh/docs/manual/tutorial/layout"},"frontmatter":{"title":"使用图布局 Layout","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/layout.md"}}},{"node":{"html":"

G6 除了提供丰富的 自定义边 外，还提供了自定义边的机制，方便用户开发更加定制化的边，包括含有复杂图形的边、复杂交互的边、带有动画的边等。

\n

在本章中我们会通过四个案例，从简单到复杂讲解边的自定义：
1. 从无到有的定义边；
2. 扩展现有边：
3. 边的交互样式；
4. 自定义带箭头的边。

\n

1. 从无到有定义边

\n

我们来实现垂直的折线：

\nimg\nimg\nimg\n
\n

（左）直线边。（中）默认的折线边。（右）调整了节点的控制点后的折线边。

\n
\n

自定义边

\n
G6.registerEdge('hvh', {\n  draw(cfg, group) {\n    const startPoint = cfg.startPoint;\n    const endPoint = cfg.endPoint;\n    const shape = group.addShape('path', {\n      attrs: {\n        stroke: '#333',\n        path: [\n          ['M', startPoint.x, startPoint.y],\n          ['L', endPoint.x / 3 + (2 / 3) * startPoint.x, startPoint.y], // 三分之一处\n          ['L', endPoint.x / 3 + (2 / 3) * startPoint.x, endPoint.y], // 三分之二处\n          ['L', endPoint.x, endPoint.y],\n        ],\n      },\n    });\n    return shape;\n  },\n});\n
\n\n

示例数据

\n

通过以下的数据，使用自定义的 hvh 边，就可以实现上图最右边的效果。

\n
const data = {\n  nodes: [\n    {\n      id: 'node1',\n      x: 100,\n      y: 200,\n      anchorPoints: [\n        [0, 0.5],\n        [1, 0.5],\n      ],\n    },\n    {\n      id: 'node2',\n      x: 200,\n      y: 100,\n      anchorPoints: [\n        [0, 0.5],\n        [1, 0.5],\n      ],\n    },\n    {\n      id: 'node3',\n      x: 200,\n      y: 300,\n      anchorPoints: [\n        [0, 0.5],\n        [1, 0.5],\n      ],\n    },\n  ],\n  edges: [\n    {\n      id: 'edge1',\n      target: 'node2',\n      source: 'node1',\n      shape: 'hvh',\n    },\n    {\n      id: 'edge2',\n      target: 'node3',\n      source: 'node1',\n      shape: 'hvh',\n    },\n  ],\n};\n
\n
\n

2. 扩展现有边

\n

通过 afterDraw 接口给现有的曲线增加动画。

\nimg\n
G6.registerEdge(\n  'line-growth',\n  {\n    afterDraw(cfg, group) {\n      const shape = group.get('children')[0];\n      const length = shape.getTotalLength();\n      shape.animate(\n        {\n          onFrame(ratio) {\n            const startLen = ratio * length;\n            const cfg = {\n              lineDash: [startLen, length - startLen],\n            };\n            return cfg;\n          },\n          repeat: true,\n        },\n        2000,\n      );\n    },\n  },\n  'cubic',\n);\n
\n
\n

3. 边的交互样式

\n

以点击选中、鼠标 hover 到边为示例，实现如下需求：

\n\n

效果如下图所示。

\nimg\n
提示：边如果过细点击时很难击中，可以设置 `**lineAppendWidth**` 来提升击中范围。\n
// 基于 line 扩展出新的图形\nG6.registerEdge(\n  'custom-edge',\n  {\n    // 设置状态\n    setState(name, value, item) {\n      const group = item.getContainer();\n      const shape = group.get('children')[0]; // 顺序根据 draw 时确定\n      if (name === 'active') {\n        if (value) {\n          shape.attr('stroke', 'red');\n        } else {\n          shape.attr('stroke', '#333');\n        }\n      }\n      if (name === 'selected') {\n        if (value) {\n          shape.attr('lineWidth', 3);\n        } else {\n          shape.attr('lineWidth', 2);\n        }\n      }\n    },\n  },\n  'line',\n);\n\n// 点击时选中，再点击时取消\ngraph.on('edge:click', ev => {\n  const edge = ev.item;\n  graph.setItemState(edge, 'selected', !edge.hasState('selected')); // 切换选中\n});\n\ngraph.on('edge:mouseenter', ev => {\n  const edge = ev.item;\n  graph.setItemState(edge, 'active', true);\n});\n\ngraph.on('edge:mouseleave', ev => {\n  const edge = ev.item;\n  graph.setItemState(edge, 'active', false);\n});\n
\n
\n

4. 自定义带箭头的边

\n

很多时候，G6 默认提供的箭头并不能满足业务上的需求，这个时候，就需要我们自定义箭头。当然了，G6 也支持箭头样式的自定义。

\nimg\n
\n

（左）G6 内置箭头。（右）自定义边带有自定义箭头。

\n
\n
G6.registerEdge('line-arrow', {\n  draw(cfg, group) {\n    const { startPoint, endPoint } = cfg;\n    const keyShape = group.addShape('path', {\n      attrs: {\n        path: [\n          ['M', startPoint.x, startPoint.y],\n          ['L', endPoint.x, endPoint.y],\n        ],\n        stroke: 'steelblue',\n        lineWidth: 3,\n        startArrow: {\n          path: 'M 10,0 L -10,-10 L -10,10 Z',\n          d: 10,\n        },\n        endArrow: {\n          path: 'M 10,0 L -10,-10 L -10,10 Z',\n          d: 10,\n        },\n      },\n    });\n    return keyShape;\n  },\n});\n
","fields":{"slug":"/zh/docs/manual/advanced/custom-edge"},"frontmatter":{"title":"自定义边","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"manual/advanced/custom-edge.zh.md"}}},{"node":{"html":"

最近答疑群里面有同学反馈说 G6 不支持 IE，官网上的 Demo 在 IE 上完全打不开，对于这样对问题，我们有考虑过怎么处理，最终没有选择内部处理，具体原因自行脑补。

\n

下面针对@vue/cli、umi、create-react-app搭建的项目给出一些解决方案，务必确保在没有引入 G6 时你的项目可以正常运行在IE上， **我相信如果项目框架是你自己搭建的，那么 IE 兼容性问题对你来说完全不是问题，更确切的说应该是依赖的兼容性问题怎么解决**。

\n

类似如下错误。
\"9B7EDCB4-D317-4FB5-814D-68F58817ADD4.png\"

\n

vue/cli

\n

本案例是基于@vue/cli(V: 4.0.5)，如果你的版本是3.x的话可能写法上会有出入，@vue/cli怎么解决依赖兼容性问题呢？
遇到问题首先想到的是官网，没错，先看看官网上有没有类似的教程，从官网上我们定位到浏览器兼容性，如下

\n

\"7AEAC95F-6626-476E-8C63-830852883FC6.png\"

\n

从文章中我们貌似已经找到了问题的答案，我们需要新建vue.config.js文件（和package.json同一目录），在里面添加transpileDependencies选项，

\n

\"6CDAA5DF-2206-4749-B5BD-C8EB3D13527D.png\"

\n

该选项默认值是[]，说明会忽略掉所有掉nodemodules文件，不会对nodemodules里面对文件做Babel，我们需要做的就是把我们希望Babel的文件加入即可，代码如下，需要注意的是我们加入的依赖不需要包含node_modules，用包名（@antv/g6）即可，因为@vue/cli会自动添加前缀nodemodules。 还需要注意 @antv/g6必须和package.json里面的一致，安装依赖的时候首选npm，如果你用yarn、cnpm等安装，需要确保nodemodules里面的包名没有被更改。

\n
module.exports = {\n  transpileDependencies: ['@antv/g6'],\n};\n
\n

好了，我们打开IE11看看结果吧。
\"DF84211F-8B5E-4100-9048-86BB445DF28E.png\"

\n

最开始的那个报错解决了，但咋出现了新问题呢，别急，先用chrome浏览器看看，发现问题是一样的，添加完transpileDependencies兼容性问题是没有了，但出了个新错误。再次查看官网，并没有相关文章，那就直接移步issue吧，经过一番查找，我们找到如下解决方案，在babel.config.js里面添加上sourceType: \"unambiguous\"，具体含有可以官网查阅。

\n
module.exports = {\n  sourceType: 'unambiguous',\n  presets: ['@vue/cli-plugin-babel/preset'],\n};\n
\n

再次编译，

\n

\"F4680A19-5EB7-43DE-97C0-E86CAB824973.png\"

\n

到此，完美解决问题。

\n

create-react-app

\n

如果你使用create-react-app(V: 3.0.0)初始化项目，那么恭喜你，create-react-app已经内置了依赖兼容性的处理方案，你只需要配置项目自身的兼容性问题即可，配置有多种方式，可参考。
eg:
\"448C42C7-C55A-452E-847D-DC1C1F9955B1.png\"

\n

当然，也许你想看看内部是怎么处理的，那就执行npm run eject 或 yarn run eject吧，这样就能暴露create-react-app的内置配置了，这个操作是不可逆的。 内置配置如下
\"EA6D3C17-BD59-45CA-9B86-F581CCF278A3.png\"

\n

umi

\n

如果你使用的是umi，再次恭喜你，umi不仅内置了依赖兼容性方案，而且配置简单，如果有任何问题，你可以在答疑群里面@云谦大佬。

\n
export default {\n  browserslist: ['> 1%', 'last 2 versions'],\n};\n
","fields":{"slug":"/zh/docs/manual/FAQ/supportIE"},"frontmatter":{"title":"如何让 IE 支持 G6","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"manual/FAQ/supportIE.zh.md"}}},{"node":{"html":"

G6 内置了 cubic 边，其默认样式如下。
\"image.png\"

\n

使用方法

\n

如 内置边 一节所示，配置边的方式有两种：实例化图时全局配置，在数据中动态配置。

\n

1 实例化图时全局配置

\n

用户在实例化 Graph 时候可以通过 defaultEdge 指定 shape 为 'cubic'，即可使用 cubic 边。

\n
const graph = new G6.Graph({\n  container: 'mountNode',\n  width: 800,\n  height: 600,\n  defaultEdge: {\n    shape: 'cubic',\n    // 其他配置\n  },\n});\n
\n

2 在数据中动态配置

\n

如果需要使不同节点有不同的配置，可以将配置写入到节点数据中。这种配置方式可以通过下面代码的形式直接写入数据，也可以通过遍历数据的方式写入。

\n
const data = {\n  nodes: [\n    ... // 节点\n  ],\n  edges: [{\n    source: 'node0',\n    target: 'node1'\n    shape: 'cubic',\n    ... // 其他配置\n    style: {\n      ...  // 样式属性，每种边的详细样式属性参见各边文档\n    }\n  },\n    ... // 其他边\n  ]\n}
\n

配置项说明

\n

quadratic 边支持以下的配置项，对于 Object 类型的配置项将在后面有详细讲解：

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称含义类型备注
color边的颜色String优先级低于 style 中的 stroke
style边的样式ObjectCanvas支持的属性
label标签文本文字String
labelCfg文件配置项Object
\n

样式属性 style

\n

Object 类型。配置项与边的通用样式属性相同，见 内置边。下面代码演示在实例化图时全局配置方法中配置 style，以达到下图效果。
\"image.png\"

\n
const data = {\n  nodes: [\n    {\n      id: 'node0',\n      x: 100,\n      y: 100,\n      size: 20,\n    },\n    {\n      id: 'node1',\n      x: 200,\n      y: 200,\n      size: 20,\n    },\n  ],\n  edges: [\n    {\n      source: 'node0',\n      target: 'node1',\n      shape: 'cubic',\n      label: 'cubic',\n    },\n  ],\n};\nconst graph = new G6.Graph({\n  container: 'mountNode',\n  width: 800,\n  height: 600,\n  defaultEdge: {\n    // shape: 'cubic',  // 在数据中已经指定 shape，这里无需再次指定\n    style: {\n      endArrow: true,\n      stroke: '#088',\n      lineWidth: 3,\n    },\n  },\n});\ngraph.data(data);\ngraph.render();\n
\n

标签文本配置 labelCfg

\n

Object 类型。其配置与边的通用文本配置相同，见 内置边。基于上面 样式属性 style 中的代码，下面代码在 defaultNode 中增加了 labelCfg 配置项进行文本的配置，使之达到如下图效果。
\"image.png\"

\n
const data = {\n  // ... data 内容\n};\nconst graph = new G6.Graph({\n  // ... 图的其他配置\n  defaultEdge: {\n    // ... 其他配置\n    labelCfg: {\n      autoRotate: true,\n      refY: 10,\n      refX: 40,\n    },\n  },\n});\n// ...\n
","fields":{"slug":"/zh/docs/manual/middle/elements/edges/cubic"},"frontmatter":{"title":"cubic","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"manual/middle/elements/edges/cubic.zh.md"}}},{"node":{"html":"

Diamond

\n

G6 内置了菱形 diamond 节点，其默认样式如下。标签文本位于菱形中央。
\"image.png\"

\n

使用方法

\n

如 内置节点 一节所示，配置节点的方式有两种：实例化图时全局配置，在数据中动态配置。

\n

1 实例化图时全局配置

\n

用户在实例化 Graph 时候可以通过 defaultNode 指定 shape 为 'diamond'，即可使用 diamond 节点。

\n
const graph = new G6.Graph({\n  container: 'mountNode',\n  width: 800,\n  height: 600,\n  defaultNode: {\n    shape: 'diamond',\n    // 其他配置\n  },\n});\n
\n

2 在数据中动态配置

\n

如果需要使不同节点有不同的配置，可以将配置写入到节点数据中。这种配置方式可以通过下面代码的形式直接写入数据，也可以通过遍历数据的方式写入。

\n
const data = {\n  nodes: [{\n\t  id: 'node0',\n    shape: 'diamond',\n    ... // 其他配置\n    },\n    ... // 其他节点\n  ],\n  edges: [\n    ... // 边\n  ]\n}
\n

配置项说明

\n

circle 节点支持以下的配置项，对于 Object 类型的配置项将在后面有详细讲解：

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称含义类型备注
size菱形的宽高NumberArray
stylediamond默认样式ObjectCanvas支持的属性
labelCfg文件配置项Object
stateStyles各状态下的样式Object只对keyShape起作用
linkPoints菱形上的链接点Object默认不显示
icon菱形上icon配置Object默认不显示icon
\n

样式属性 style

\n

Object 类型。通过 style 配置来修改节点的填充色、描边等属性。下面代码演示在实例化图时全局配置方法中配置 style，使之达到如下图效果。
\"image.png\"

\n
const data = {\n  nodes: [\n    {\n      x: 100,\n      y: 100,\n      shape: 'diamond',\n      label: 'diamond',\n    },\n  ],\n};\nconst graph = new G6.Graph({\n  container: 'mountNode',\n  width: 800,\n  height: 600,\n  defaultNode: {\n    // shape: 'diamond', // 数据中已指定 shape，这里无需再次指定\n    size: [200, 80],\n    style: {\n      fill: '#bae637',\n      stroke: '#eaff8f',\n      lineWidth: 5,\n    },\n  },\n});\ngraph.data(data);\ngraph.render();\n
\n

标签文本配置 labelCfg

\n

Object 类型。通过 labelCfg 配置标签文本。基于上面 样式属性 style 中的代码，下面代码在 defaultNode 中增加了 labelCfg 配置项进行文本的配置，使之达到如下图效果。
\"image.png\"

\n
const data = {\n  // ... data 内容\n};\nconst graph = new G6.Graph({\n  // ... 图的其他属性\n  defaultNode: {\n    // ... 节点其他属性\n    labelCfg: {\n      style: {\n        fill: '#9254de',\n        fontSize: 18,\n      },\n      position: 'bottom',\n    },\n  },\n});\n// ...\n
\n

边的连入点 linkPoints

\n

Object 类型。通过配置 linkPoints ，可以指定菱形周围「上、下、左、右」四个方向上边的连入点。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称含义类型备注
top是否显示上部的连接点Boolean默认为false
bottom是否显示底部的连接点Boolean默认为false
left是否显示左侧的连接点Boolean默认为false
right是否显示右侧的连接点Boolean默认为false
size连接点的大小Number默认为3
fill连接点的填充色String默认为#72CC4A
stroke连接点的边框颜色String默认为#72CC4A
lineWidth连接点边框的宽度Number默认为1
\n

基于上面 样式属性 style 中的代码，下面代码在 defaultNode 中增加了 linkPoints 配置项进行连入点的配置，使之达到如下图效果。
\"image.png\"

\n
const data = {\n  // ... data 内容\n};\nconst graph = new G6.Graph({\n  // ... 图的其他属性\n  defaultNode: {\n    // ... 节点其他属性\n    linkPoints: {\n      top: true,\n      bottom: true,\n      left: true,\n      right: true,\n      size: 5,\n      fill: '#fff',\n    },\n  },\n});\n// ...\n
\n

图标 icon

\n

Object 类型。通过配置 icon，可以在圆上显示小图标。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称含义类型备注
show是否显示iconBoolean默认为false，不显示
widthicon的宽度Number默认为16
heighticon的高度Number默认为16
imgicon的地址String
\n

下面代码演示在实例化图时全局配置方法中配置 icon。
\"image.png\"

\n
const data = {\n  // ... data 内容\n};\nconst graph = new G6.Graph({\n  // ... 图的其他属性\n  defaultNode: {\n    // ... 节点其他属性\n    icon: {\n      show: true,\n      width: 25,\n      height: 25,\n    },\n  },\n});\n// ...\n
","fields":{"slug":"/zh/docs/manual/middle/elements/nodes/diamond"},"frontmatter":{"title":"diamond","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"manual/middle/elements/nodes/diamond.zh.md"}}},{"node":{"html":"

当 G6 的内置边不能满足需求时，G6 的自定义边机制允许用户设计和定制新的边类型。

\n

使用指南

\n

下面代码演示了自定义折线 polyline 边。自定义边可以通过两种方式实现：

\n
    \n
  1. 继承 line，复写 getPath 和 getShapeStyle 方法；
    2. \n
  2. 复写 draw 方法。
    3. \n
\n

拖动边的两个端点时，常常需要动态更新折线的控制点位置。建议使用 G6 内置的 polyline 满足这一需求。

\n

更多信息参见自定义边。

","fields":{"slug":"/zh/examples/shape/customEdge"},"frontmatter":{"title":"自定义边","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"shape/customEdge/index.zh.md"}}},{"node":{"html":"

The custom edge mechanism in G6 allows users to design their own edge when there are no appropriate built-in edges for their scenario.

\n

Usage

\n

The demos below show how to custom polyline edge. There are two ways to custom an edge:

\n
    \n
  1. Extend the line edge, rewrite getPath and getShapeStyle;
    2. \n
  2. Rewrite draw.
    3. \n
\n

Updating the control points of polyline while dragging the end nodes is an important problem of polyline edge. For this situation, we recommend users to use built-in polyline edge.

\n

For more information, please refer to the document Custom Edge.

","fields":{"slug":"/en/examples/shape/customEdge"},"frontmatter":{"title":"Custom Edge","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"shape/customEdge/index.en.md"}}},{"node":{"html":"

Radial Layout will place the nodes to the concentric circles around the focusNode according to the shortest path length to focusNode.

\n

Usage

\n

As the demo below, you can deploy it in layout while instantiating Graph. it can also be used for Subgraph Layout. By tuning the parameters, you can adjust the iteration number, compact degree, layout buy cluster, and so on. By tuning the parameters, you can adjust the radial radius, preven node overlappings, relaxed radial, and so on.

\n","fields":{"slug":"/en/examples/net/radialLayout"},"frontmatter":{"title":"Radial Layout","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"net/radialLayout/index.en.md"}}},{"node":{"html":"

Radial 辐射布局根据参数中指定的 focusNode 为中心点，根据其他节点与中心点的拓扑距离（最短路径长度）将其余节点放置在以中心点为圆心的同心圆上。

\n

使用指南

\n

G6 内置的 Radial 布局可在实例化 Graph 时使用该布局。除此之外，还可以如子图布局所示单独使用布局。该布局可以通过配置调整辐射半径、节点不重叠、不严格的辐射布局等。

\n","fields":{"slug":"/zh/examples/net/radialLayout"},"frontmatter":{"title":"Radial 辐射布局","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"net/radialLayout/index.zh.md"}}},{"node":{"html":"

G6 supports node group.

\n

Usage

\n

G6 supports two kinds of node group: circle and rect. They can be applied to group navigation and clustering analysis.

","fields":{"slug":"/en/examples/interaction/nodeGroup"},"frontmatter":{"title":"Node Group","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"interaction/nodeGroup/index.en.md"}}},{"node":{"html":"

G6 支持节点分组。

\n

使用指南

\n

G6 默认支持 circle 和 rect 两种类型的节点分组，可用于团伙导航或聚类分析。

","fields":{"slug":"/zh/examples/interaction/nodeGroup"},"frontmatter":{"title":"节点分组","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"interaction/nodeGroup/index.zh.md"}}},{"node":{"html":"

缩进树布局。每个元素会占一行/一列。\n
\nintended

\n

使用指南

\n

缩进树适用于展示树结构数据，配合 TreeGraph 使用。如下面代码所示，可在实例化 TreeGraph 时使用该布局。除此之外，还可以如子图布局所示单独使用布局。

\n

该布局有以下配置项，Function 类型的配置项可以为不同的元素配置不同的值。具体描述请查看相关教程。

","fields":{"slug":"/zh/examples/tree/indented"},"frontmatter":{"title":"缩进树","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"tree/indented/index.zh.md"}}},{"node":{"html":"

In indented tree layout, each node takes a row or a column.\n
\nintended

\n

Usage

\n

Indented is an appropriate layout method for tree data structure. Please use it with TreeGraph. As the demo below, you can deploy it in layout while instantiating Graph. it can also be used for Subgraph Layout.

\n

You can set different configurations for different nodes if the parameter is Function type. Please refer to the ducuments for more information.

","fields":{"slug":"/en/examples/tree/indented"},"frontmatter":{"title":"Indented","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"tree/indented/index.en.md"}}},{"node":{"html":"

属性

\n

文本有以下可用的属性。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
属性名含义备注
fill设置用于填充绘画的颜色、渐变或模式对应 canvas 属性 fillStyle
stroke设置用于笔触的颜色、渐变或模式对应 canvas 属性 strokeStyle
shadowColor设置用于阴影的颜色
shadowBlur设置用于阴影的模糊级别数值越大，越模糊
shadowOffsetX设置阴影距形状的水平距离
shadowOffsetY设置阴影距形状的垂直距离
opacity设置绘图的当前 alpha 或透明值对应 canvas 属性 globalAlpha
font设置文本内容的当前字体属性
textAlign设置文本内容的当前对齐方式支持的属性：center
textBaseline设置在绘制文本时使用的当前文本基线支持的属性:
top
fontStyle字体样式对应 font-style
fontVariant设置为小型大写字母字体对应 font-variant
fontWeight字体粗细对应 font-weight
fontSize字体大小对应 font-size
fontFamily字体系列对应 font-family
autoRotate是否自动旋转
\n

案例

\n
const data = {\n  nodes: [\n    {\n      id: 'node1',\n      x: 100,\n      y: 100,\n      shape: 'rect',\n      label: 'rect',\n    },\n  ],\n};\n\nconst graph = new G6.Graph({\n  container: 'mountNode',\n  width: 500,\n  height: 500,\n});\ngraph.data(data);\ngraph.render();\n\nconst node = graph.findById('node1');\ngraph.update(node, {\n  style: {\n    stroke: 'blue',\n  },\n  labelCfg: {\n    style: {\n      fill: 'red',\n      shadowOffsetX: 10,\n      shadowOffsetY: 10,\n      shadowColor: 'blue',\n      shadowBlur: 10,\n    },\n  },\n});\n
\n

通过以上代码修改node中文本的样式，效果如下图：

\ndownload","fields":{"slug":"/zh/docs/manual/advanced/label-properties"},"frontmatter":{"title":"文本属性","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"manual/advanced/label-properties.zh.md"}}},{"node":{"html":"

节点与边在视觉上的层级涉及到了它们相对应的图形分组 Group。本文提到的所有分组 Group 都为 G6 的 图形分组 Group，而非 G6 的 节点分组 Group，请注意区分这两种 Group，其区别在 图形分组 Group 中说明。

\n

在 图形分组 Group 中我们提到：在 G6 中，Graph 的一个实例中的所有节点属于同一个变量名为 nodeGroup 的 group，所有的边属于同一个变量名为 edgeGroup 的 group。节点 group 在视觉上的层级（zIndex）高于边 group，即所有节点会绘制在所有边的上层。

\n

但有时，我们需要让边在视觉上在节点上层。例如，高亮节点及其相关边和邻居、高亮一条边等。可以通过配合图实例的配置项 groupByTypes 以及节点和边的 toFront() 与 toBack() 函数实现。为实现如下效果：鼠标进入节点时，提升相关边以及邻居节点的层级；离开节点时恢复；鼠标进入边时，提升边及其两端点的层级；离开边时恢复。Demo 完整代码。
\"highlight-edge-node.gif\"

\n

要实现上图效果，需要以下步骤：

\n\n

\n

前提代码

\n

下面代码完成了引入 G6、数据设置、实例化图、渲染图的命令等。后文将修改下面这份代码中以达到上图高亮效果。

\n
// 数据源\nconst data = {\n  nodes: [\n    {\n      id: 'node0',\n      x: 100,\n      y: 100,\n      size: 20,\n    },\n    {\n      id: 'node1',\n      x: 200,\n      y: 200,\n      size: 20,\n    },\n    {\n      id: 'node2',\n      x: 150,\n      y: 150,\n      size: 20,\n    },\n    {\n      id: 'node3',\n      x: 150,\n      y: 250,\n      size: 20,\n    },\n    {\n      id: 'node4',\n      x: 150,\n      y: 200,\n      size: 20,\n    },\n  ],\n  edges: [\n    {\n      id: 'edge0',\n      source: 'node0',\n      target: 'node1',\n    },\n    {\n      id: 'edge1',\n      source: 'node2',\n      target: 'node3',\n    },\n  ],\n};\n\n// 实例化图\nconst graph = new G6.Graph({\n  container: 'mountNode',\n  width: 800,\n  height: 600,\n  // 为方便演示，加粗边\n  defaultEdge: {\n    style: {\n      lineWidth: 2,\n    },\n  },\n});\n\n// 读取数据\ngraph.data(data);\n// 渲染图\ngraph.render();\n
\n

\n

Step 1 实例化图时的配置

\n

groupByTypes 是图的一个配置项，当其为默认值 true 时，所有节点在一个名为 nodeGroup 的分组，所有边在另一个名为 edgeGroup 的分组，且 nodeGroup 在 edgeGroup 上层。将其设置为 false 后，将不存在 nodeGroup 和 edgeGroup，所有节点和边在同一个分组，它们的层级根据生成的顺序决定。

\n

\n

参数描述

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称类型默认值描述
groupByTypesBooleantrue各种元素是否在一个分组内，决定节点和边的层级问题，默认情况下所有的节点在一个分组中，所有的边在一个分组中，当这个参数为 false 时，节点和边的层级根据生成的顺序确定。
\n

\n

使用方式

\n

更改 前提代码 中实例化图部分代码，添加 groupByTypes 配置项，并设置为 false：

\n
const graph = new G6.Graph({\n  // ...  // 其他配置\n  groupByTypes: false,\n});\n
\n

此时，将会得到如下效果：
\"image.png\"

\n

\n

Step 2 将节点放置在边上层

\n

上一步结果中节点在边的下层不符合常规，是由于 groupByTypes 为 false 时，节点和边的层级根据生成的顺序确定，而边的生成顺序在节点之后，因此所有边被绘制到了节点上方。为了使图符合常规——节点在上层，边在下层，可以在 graph.render() 之后将所有的节点通过 toFront() 函数提前。

\n

\n

函数描述

\n
// 将节点实例 nodeItem 提前到其父级 group 的最前面\nnodeItem.toFront();\n// 将节点实例 nodeItem 放置到其父级 group 的最后面\nnodeItem.toBack();\n// 将边实例 edgeItem 提前到其父级 group 的最前面\nedgeItem.toFront();\n// 将边实例 edgeItem 放置到其父级 group 的最后面\nedgeItem.toBack();\n
\n

\n

书用方法

\n
// const graph = ...\ngraph.data(data);\ngraph.render();\n// 获取图上的所有边实例\nconst nodes = graph.getNodes();\n// 遍历边实例，将所有边提前。\nnodes.forEach(node => {\n  node.toFront();\n});\n// 更改层级后需要重新绘制图\ngraph.paint();\n
\n

 
这样，所有节点被绘制在边上层：
\"image.png\"

\n

\n

Step 3 监听鼠标事件并改变目标元素层级

\n

在效果图中，鼠标进入节点时，相关边和节点的层级被提升到最上层，鼠标离开节点使恢复。边同理。这一步将实现这一交互效果。

\n

\n

函数描述

\n

使用下面四个函数监听鼠标的进入、离开元素的事件：

\n
// 鼠标进入节点事件\ngraph.on('node:mouseenter', ev => {\n  // ...\n});\n\n// 鼠标离开节点事件\ngraph.on('node:mouseleave', ev => {\n  // ...\n});\n\n// 鼠标进入边事件\ngraph.on('edge:mouseenter', ev => {\n  // ...\n});\n\n// 鼠标离开边事件\ngraph.on('edge:mouseleave', ev => {\n  // ...\n});\n
\n

\n

使用方法

\n
// 鼠标进入节点事件\ngraph.on('edge:mouseenter', ev => {\n  // 获得鼠标当前目标边\n  const edge = ev.item;\n  // 该边的起始点\n  const source = edge.getSource();\n  // 该边的结束点\n  const target = edge.getTarget();\n  // 先将边提前，再将端点提前。这样该边两个端点还是在该边上层，较符合常规。\n  edge.toFront();\n  source.toFront();\n  target.toFront();\n  // 注意：必须调用以根据新的层级顺序重绘\n  graph.paint();\n});\n\ngraph.on('edge:mouseleave', ev => {\n  // 获得图上所有边实例\n  const edges = graph.getEdges();\n  // 遍历边，将所有边的层级放置在后方，以恢复原样\n  edges.forEach(edge => {\n    edge.toBack();\n  });\n  // 注意：必须调用以根据新的层级顺序重绘\n  graph.paint();\n});\n\ngraph.on('node:mouseenter', ev => {\n  // 获得鼠标当前目标节点\n  const node = ev.item;\n  // 获取该节点的所有相关边\n  const edges = node.getEdges();\n  // 遍历相关边，将所有相关边提前，再将相关边的两个端点提前，以保证相关边的端点在边的上方常规效果\n  edges.forEach(edge => {\n    edge.toFront();\n    edge.getSource().toFront();\n    edge.getTarget().toFront();\n  });\n  // 注意：必须调用以根据新的层级顺序重绘\n  graph.paint();\n});\n\ngraph.on('node:mouseleave', ev => {\n  // 获得图上所有边实例\n  const edges = graph.getEdges();\n  // 遍历边，将所有边的层级放置在后方，以恢复原样\n  edges.forEach(edge => {\n    edge.toBack();\n  });\n  // 注意：必须调用以根据新的层级顺序重绘\n  graph.paint();\n});\n
","fields":{"slug":"/zh/docs/manual/middle/elements/elementIndex"},"frontmatter":{"title":"节点与边的层级","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"manual/middle/elements/elementIndex.zh.md"}}},{"node":{"html":"

G6 内置了圆弧 arc 边，其默认样式如下。
\"image.png\"

\n

使用方法

\n

如 内置边 一节所示，配置边的方式有两种：实例化图时全局配置，在数据中动态配置。

\n

1 实例化图时全局配置

\n

用户在实例化 Graph 时候可以通过 defaultEdge 指定 shape 为 'arc'，即可使用 arc 边。

\n
const graph = new G6.Graph({\n  container: 'mountNode',\n  width: 800,\n  height: 600,\n  defaultEdge: {\n    shape: 'arc',\n    // 其他配置\n  },\n});\n
\n

2 在数据中动态配置

\n

如果需要使不同节点有不同的配置，可以将配置写入到节点数据中。这种配置方式可以通过下面代码的形式直接写入数据，也可以通过遍历数据的方式写入。

\n
const data = {\n  nodes: [\n    ... // 节点\n  ],\n  edges: [{\n    source: 'node0',\n    target: 'node1'\n    shape: 'arc',\n    ... // 其他配置\n    style: {\n      ...  // 样式属性，每种边的详细样式属性参见各边文档\n    }\n  },\n    ... // 其他边\n  ]\n}
\n

配置项说明

\n

arc 边支持以下的配置项，其中 curveOffset 属性是 arc 特有的属性，它控制了圆弧的大小以及弯曲的方向。

\n
color: '#87e8de',\ncurveOffset: 20,  // 圆弧顶端距离两线中心位置的距离\nstyle: {\n  lineWidth: 2,\n  stroke: '#87e8de'\n},\nlabel: '边的标签文字',\nlabelCfg: {\n  refX: 10,  // 文本在 x 方向偏移量\n  refY: 10,  // 文本在 y 方向偏移量\n  style: {\n    fill: '#595959'\n  }\n}
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称含义类型备注
color边的颜色String优先级低于 style 中的 stroke
curveOffset圆弧顶端距离两线中心位置的距离Number数值绝对值大小控制圆弧的大小，正负控制圆弧弯曲的方向，默认为 20。arc 边特有
style边的样式ObjectCanvas支持的属性
label标签文本文字String
labelCfg文件配置项Object
\n

特殊属性：弧度 curveOffset

\n

curveOffset 属性是 arc 特有的属性，它控制了圆弧的大小以及弯曲的方向。下面代码演示在实例化图时全局配置方法中配置 curveOffset。
\"image.png\"

\n
const data = {\n  nodes: [\n    {\n      id: 'node0',\n      x: 100,\n      y: 100,\n      size: 20,\n    },\n    {\n      id: 'node1',\n      x: 200,\n      y: 200,\n      size: 20,\n    },\n  ],\n  edges: [\n    {\n      source: 'node0',\n      target: 'node1',\n      shape: 'arc',\n      label: 'arc',\n    },\n  ],\n};\nconst graph = new G6.Graph({\n  container: 'mountNode',\n  width: 800,\n  height: 600,\n  linkCenter: true,\n  defaultEdge: {\n    // shape: 'arc',  // 在数据中已经指定 shape，这里无需再次指定\n    curveOffset: -80,\n  },\n});\ngraph.data(data);\ngraph.render();\n
\n

注意：
上面代码使用了 graph 的配置项 linkCenter: true 以设置 arc 边连入节点的中心，保证美观性。

\n

样式属性 style

\n

Object 类型。配置项与边的通用样式属性相同，见 内置边。基于上面 弧度 curveOffset 中的代码，下面代码在 defaultNode 中增加了 style 配置项进行边的样式的配置，使之达到如下图效果。
\"image.png\"

\n
const data = {\n  // ... data 内容\n};\nconst graph = new G6.Graph({\n  // ... 图的其他配置\n  defaultEdge: {\n    // ... 其他配置\n    style: {\n      stroke: '#088',\n      lineWidth: 3,\n    },\n  },\n});\n// ...\n
\n

标签文本配置 labelCfg

\n

Object 类型。其配置与边的通用文本配置相同，见 内置边。基于上面 弧度 curveOffset 中的代码，下面代码在 defaultNode 中增加了 labelCfg 配置项进行文本的配置，使之达到如下图效果。
\"image.png\"

\n
const data = {\n  // ... data 内容\n};\nconst graph = new G6.Graph({\n  // ... 图的其他配置\n  defaultEdge: {\n    // ... 其他配置\n    labelCfg: {\n      autoRotate: true,\n      refY: -30,\n      refX: 30,\n    },\n  },\n});\n// ...\n
","fields":{"slug":"/zh/docs/manual/middle/elements/edges/arc"},"frontmatter":{"title":"arc","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"manual/middle/elements/edges/arc.zh.md"}}},{"node":{"html":"

Triangle

\n

G6 内置了三角形 Triangle 节点，其默认样式如下。标签文本位于三角形下方。
\"image.png\"

\n

使用方法

\n

如 内置节点 一节所示，配置节点的方式有两种：实例化图时全局配置，在数据中动态配置。

\n

1 实例化图时全局配置

\n

用户在实例化 Graph 时候可以通过 defaultNode 指定 shape 为 'triangle'，即可使用 triangle 节点。

\n
const graph = new G6.Graph({\n  container: 'mountNode',\n  width: 800,\n  height: 600,\n  defaultNode: {\n    shape: 'triangle',\n    // 其他配置\n  },\n});\n
\n

2 在数据中动态配置

\n

如果需要使不同节点有不同的配置，可以将配置写入到节点数据中。这种配置方式可以通过下面代码的形式直接写入数据，也可以通过遍历数据的方式写入。

\n
const data = {\n  nodes: [{\n\t  id: 'node0',\n    shape: 'triangle',\n    ... // 其他配置\n    },\n    ... // 其他节点\n  ],\n  edges: [\n    ... // 边\n  ]\n}
\n

配置项说明

\n

triangle 节点支持以下的配置项：

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称含义类型备注
size三角形的边长NumberArray
direction三角形的方向String可取值：up、down、left、right，默认为up。
style三角形默认样式ObjectCanvas支持的属性
labelCfg文件配置项Object
stateStyles各状态下的样式Object只对keyShape起作用
linkPoints三角形上的链接点Object默认不显示
icon三角形上icon配置Object默认不显示icon
\n

三角形方向 direction

\n

String 类型。可取值有：'``up'、'down'、'left'、'right'。默认为 '``up'。通过设置 direction，可以修改三角形的方向。下面代码演示在实例化图时全局配置方法中配置 direction。

\n
const graph = new G6.Graph({\n  container: 'mountNode',\n  width: 800,\n  height: 600,\n  defaultNode: {\n    shape: 'triangle',\n    direction: 'down',\n  },\n});\n
\n

\"image.png\"\"image.png\"\"image.png\"\"image.png\"

\n
\n

上图分别是将 direction 配置为 'up'，'down'，'left'，'right' 的结果

\n
\n

样式属性 style

\n

Object 类型。通过 style 配置来修改节点的填充色、描边等属性。下面代码演示在实例化图时全局配置方法中配置 style，使之达到如下图效果。
\"image.png\"

\n
const data = {\n  nodes: [\n    {\n      x: 100,\n      y: 100,\n      shape: 'triangle',\n      label: 'triangle',\n    },\n  ],\n};\nconst graph = new G6.Graph({\n  container: 'mountNode',\n  width: 800,\n  height: 600,\n  defaultNode: {\n    // shape: 'triangle',// 在数据中已经指定 shape，这里无需再次指定\n    direction: 'up',\n    size: 100,\n    style: {\n      fill: '#bae637',\n      stroke: '#eaff8f',\n      lineWidth: 5,\n    },\n  },\n});\ngraph.data(data);\ngraph.render();\n
\n

标签文本配置 labelCfg

\n

Object 类型。通过 labelCfg 配置标签文本。基于上面 样式属性 style 中的代码，下面代码在 defaultNode 中增加了 labelCfg 配置项进行文本的配置，使之达到如下图效果。
\"image.png\"

\n
const data = {\n  // ... data 内容\n};\nconst graph = new G6.Graph({\n  // ... 图的其他属性\n  defaultNode: {\n    // ... 节点其他属性\n    labelCfg: {\n      position: 'center',\n      style: {\n        fill: '#9254de',\n        fontSize: 18,\n      },\n    },\n  },\n});\n// ...\n
\n

边的连入点 linkPoints

\n

Object 类型。通过配置 linkPoints ，可以指定圆周围「上、下、左、右」四个方向上边的连入点。
说明 虽然每个三角形只有三个顶点，但不同方向的三角形顶点位置不同。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称含义类型备注
top是否显示上部的连接点Boolean默认为false
bottom是否显示底部的连接点Boolean默认为false
left是否显示左侧的连接点Boolean默认为false
right是否显示右侧的连接点Boolean默认为false
size连接点的大小Number默认为3
fill连接点的填充色String默认为#72CC4A
stroke连接点的边框颜色String默认为#72CC4A
lineWidth连接点边框的宽度Number默认为1
\n

基于上面 样式属性 style 中的代码，下面代码在 defaultNode 中增加了 linkPoints 配置项进行连入点的配置，使之达到如下图效果。
\"image.png\"

\n
const data = {\n  // ... data 内容\n};\nconst graph = new G6.Graph({\n  // ... 图的其他属性\n  defaultNode: {\n    // ... 其他属性\n    linkPoints: {\n      top: true,\n      bottom: true,\n      left: true,\n      right: true,\n      fill: '#fff',\n      size: 5,\n    },\n  },\n});\n// ...\n
\n

图标 icon

\n

Object 类型。通过配置 icon，可以在圆上显示小图标。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称含义类型备注
show是否显示 iconBoolean默认为 false，不显示
widthicon 的宽度Number默认为 16
heighticon 的高度Number默认为 16
imgicon 的图片地址String默认有一个如下图中的图片
offseticon 的偏移量Number默认为 0，triangle 节点的 icon 特有的配置
\n

基于上面 样式属性 style 中的代码，下面代码在 defaultNode 中增加了 icon 配置项进行图标的配置，使之达到如下图效果。
\"image.png\"

\n
const data = {\n  // ... data 内容\n};\nconst graph = new G6.Graph({\n  // ... 图的其他属性\n  defaultNode: {\n    // ... 其他属性\n    icon: {\n      show: true,\n      width: 30,\n      height: 30,\n      offset: 20,\n    },\n  },\n});\n// ...\n
","fields":{"slug":"/zh/docs/manual/middle/elements/nodes/traingle"},"frontmatter":{"title":"triangle","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"manual/middle/elements/nodes/traingle.zh.md"}}},{"node":{"html":"

G6 封装了一系列交互方法，方便用户直接使用。本文将为 Tutorial案例 增加简单的交互：hover 节点、点击节点、点击边、放缩画布、拖拽画布。本节目标效果如下：
\"tutorial-demo-interact.gif\"

\n
图1 Tutorial案例的交互效果。
\n

基本概念

\n

交互行为 Behavior

\n

G6 中的交互行为。G6 内置了一系列交互行为，用户可以直接使用。简单地理解，就是可以一键开启这些交互行为：

\n\n

如果内置行为不满足需求，G6 还允许用户进行自定义交互行为。由于自定义交互较为复杂，入门教程中不再赘述，如有需求请参见：自定义交互行为 Behavior

\n

交互管理 mode

\n

mode 是 G6 交互行为的管理机制，一个 mode 是多种行为 Behavior 的组合，允许用户通过切换不同的模式进行交互行为的管理。由于该概念较为复杂，在本入门教程中，读者不需要对该机制深入理解。如有需求，参见 G6 中的 mode。

\n

交互状态 State

\n

状态 State 是 G6 中的状态机制。用户可以为图中的元素（节点/边）设置不同的状态及不同状态下的样式。在状态发生变化时，G6 自动更新元素的样式。例如，可以为节点设置状态 'click' 为 true 或 false，并为节点设置 'click' 的样式为加粗节点边框。当 'click' 状态被切换为 true 时，节点的边框将会被加粗，'click' 状态被切换为 false 时，节点的样式恢复到默认。在下面的使用方法中，将会有具体例子。

\n

使用方法

\n

拖拽、缩放——内置的交互行为

\n

在 G6 中使用内置 behavior 的方式非常简单，只需要在图实例化时配置 modes。拖拽和缩放属于 G6 内置交互行为，修改代码如下：

\n
const graph = new G6.Graph({\n  ...                                          // 其他配置项\n  modes: {\n    default: [ 'drag-canvas', 'zoom-canvas', 'drag-node' ]  // 允许拖拽画布、放缩画布、拖拽节点\n  }\n});
\n

除了直接使用内置交互名称外，也可以为 behavior 配置参数，例如放缩画布的敏感度、最大/最小放缩程度等。高阶用法参见 内置的交互 Behavior。

\n

上面代码中的 modes 定义了 G6 的模式，default 是默认的模式，还可以允许有其他的模式，比如：编辑模式 edit 等。不同的模式，用户能进行的行为可以不同，比如默认模式能拖拽画布，编辑模式不允许拖拽画布：

\n
// 举例解释不同模式\nmodes: {\n  default: ['drag-canvas'],\n  edit: []\n}
\n
\n

更多关于模式、行为可以参考: [TODO: 链接]

\n
\n

Hover、Click 改变样式——状态式交互

\n

有时我们希望通过交互可以将元素样式变成特定样式，如我们看到的图 1 中，鼠标 hover 节点、点击节点、点击边时，样式发生了变化。这里涉及到了 G6 中 状态 State 的概念。简单地说，是否 hover 、click 、任何操作（可以是自己起的状态名），都可以称为一种状态（state）。用户可以自由设置不同状态下的元素样式。要达到交互更改元素样式，需要两步：

\n\n

设置各状态下的元素样式

\n

在实例化图时，通过 nodeStateStyles 和 edgeStateStyles 两个配置项可以配置元素在不同状态下的样式。
为达到 Tutorial案例 中的效果：

\n\n

下面代码设置了节点分别在 hover 和 click 状态为 true 时的样式，边在 click 状态为 true 时的样式：

\n
const graph = new G6.Graph({\n  // ...                           // 其他配置项\n  // 节点不同状态下的样式集合\n  nodeStateStyles: {\n    // 鼠标 hover 上节点，即 hover 状态为 true 时的样式\n    hover: {\n      fill: 'lightsteelblue',\n    },\n    // 鼠标点击节点，即 click 状态为 true 时的样式\n    click: {\n      stroke: '#000',\n      lineWidth: 3,\n    },\n  },\n  // 节点不同状态下的样式集合\n  edgeStateStyles: {\n    // 鼠标点击边，即 click 状态为 true 时的样式\n    click: {\n      stroke: 'steelblue',\n    },\n  },\n});\n
\n

监听事件并切换元素状态

\n

G6 中所有元素监听都挂载在图实例上，如下代码中的 graph 对象是 G6.Graph 的实例，graph.on() 函数监听了某元素类型（node / edge）的某种事件（click / mouseenter / mouseleave / ... 所有事件参见：Event API）。

\n
// 在图实例 graph 上监听\ngraph.on('元素类型:事件名', e => {\n  // do something\n});\n
\n

现在，我们通过下面代码，为 Tutorial案例 增加点和边上的监听事件，并在监听函数里使用 graph.setItemState() 改变元素的状态：

\n
// 鼠标进入节点\ngraph.on('node:mouseenter', e => {\n  const nodeItem = e.item;  // 获取鼠标进入的节点元素对象\n  graph.setItemState(nodeItem, 'hover', true);  // 设置当前节点的 hover 状态为 true\n});\n\n// 鼠标离开节点\ngraph.on('node:mouseleave', e => {\n  const nodeItem = e.item;  // 获取鼠标离开的节点元素对象\n  graph.setItemState(nodeItem, 'hover', false); // 设置当前节点的 hover 状态为 false\n});\n\n// 点击节点\ngraph.on('node:click', e => {\n  // 先将所有当前是 click 状态的节点置为非 click 状态\n  const clickNodes = graph.findAllByState('node', 'click');\n  clickNodes.forEach(cn => {\n    graph.setItemState(cn, 'click', false);\n  });\n  const nodeItem = e.item;  // 获取被点击的节点元素对象\n  graph.setItemState(nodeItem, 'click', true); // 设置当前节点的 click 状态为 true\n});\n\n// 点击边\ngraph.on('edge:click', e => {\n  // 先将所有当前是 click 状态的边置为非 click 状态\n  const clickEdges = graph.findAllByState('edge', 'click');\n    clickEdges.forEach(ce => {\n      graph.setItemState(ce, 'click', false);\n    });\n    const edgeItem = e.item;  // 获取被点击的边元素对象\n    graph.setItemState(edgeItem, 'click', true); // 设置当前边的 click 状态为 true\n  });\n});
\n

完整代码

\n

至此，完整代码如下：

\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Tutorial Demo</title>\n</head>\n<body>\n<div id=\"mountNode\"></div>\n  <script src=\"https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.0/build/g6.js\"></script>\n  <script>\n    const graph = new G6.Graph({\n      container: 'mountNode',\n      width: 800,\n      height: 600,\n      // 节点默认配置\n      defaultNode: {\n        labelCfg: {\n          style: {\n            fill: '#fff'\n          }\n        }\n      },\n      // 边默认配置\n      defaultEdge: {\n        labelCfg: {\n          autoRotate: true\n        }\n      },\n      // 节点在各状态下的样式\n      nodeStateStyles: {\n        // hover 状态为 true 时的样式\n        hover: {\n          fill: 'lightsteelblue'\n        },\n        // click 状态为 true 时的样式\n        click: {\n          stroke: '#000',\n          lineWidth: 3\n        }\n      },\n      // 边在各状态下的样式\n      edgeStateStyles: {\n        // click 状态为 true 时的样式\n        click: {\n          stroke: 'steelblue'\n        }\n      },\n      // 布局\n      layout: {\n        type: 'force',\n        linkDistance: 100,\n        preventOverlap: true,\n        nodeStrength: -30,\n        edgeStrength: 0.1\n      },\n      // 内置交互\n      modes: {\n        default: [ 'drag-canvas', 'zoom-canvas', 'drag-node' ]\n      },\n    });\n\n    const main = async () => {\n      const response = await fetch(\n        'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json'\n      );\n      const remoteData = await response.json();\n      \n      const nodes = remoteData.nodes;\n      const edges = remoteData.edges;\n      nodes.forEach(node => {\n        if (!node.style) {\n          node.style = {};\n        }\n        node.style.lineWidth = 1;\n        node.style.stroke = '#666';\n        node.style.fill = 'steelblue';\n        switch (node.class) {\n          case 'c0': {\n            node.shape = 'circle';\n            node.size = 30;\n            break;\n          }\n          case 'c1': {\n            node.shape = 'rect';\n            node.size = [ 35, 20 ];\n            break;\n          }\n          case 'c2': {\n            node.shape = 'ellipse';\n            node.size = [ 35, 20 ];\n            break;\n          }\n        }\n      });\n      edges.forEach(edge => {\n        if (!edge.style) {\n          edge.style = {};\n        }\n        edge.style.lineWidth = edge.weight;\n        edge.style.opacity = 0.6;\n        edge.style.stroke = 'grey';\n      });\n\n      graph.data(remoteData);\n      graph.render();\n\n      // 监听鼠标进入节点\n      graph.on('node:mouseenter', e => {\n        const nodeItem = e.item;\n        // 设置目标节点的 hover 状态 为 true\n        graph.setItemState(nodeItem, 'hover', true);\n      });\n      // 监听鼠标离开节点\n      graph.on('node:mouseleave', e => {\n        const nodeItem = e.item;\n        // 设置目标节点的 hover 状态 false\n        graph.setItemState(nodeItem, 'hover', false);\n      });\n      // 监听鼠标点击节点\n      graph.on('node:click', e => {\n        // 先将所有当前有 click 状态的节点的 click 状态置为 false\n        const clickNodes = graph.findAllByState('node', 'click');\n        clickNodes.forEach(cn => {\n          graph.setItemState(cn, 'click', false);\n        });\n        const nodeItem = e.item;\n        // 设置目标节点的 click 状态 为 true\n        graph.setItemState(nodeItem, 'click', true);\n      });\n      // 监听鼠标点击节点\n      graph.on('edge:click', e => {\n        // 先将所有当前有 click 状态的边的 click 状态置为 false\n        const clickEdges = graph.findAllByState('edge', 'click');\n        clickEdges.forEach(ce => {\n          graph.setItemState(ce, 'click', false);\n        });\n        const edgeItem = e.item;\n        // 设置目标边的 click 状态 为 true\n        graph.setItemState(edgeItem, 'click', true);\n      });\n    };\n    main();\n  </script>\n</body>\n</html>
\n

 注意 
若需更换数据，请替换 'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json' 为新的数据文件地址。

","fields":{"slug":"/zh/docs/manual/tutorial/behavior"},"frontmatter":{"title":"图的交互 Behavior","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/behavior.md"}}},{"node":{"html":"

G6 提供了一般图和树图的一些常用布局，使用方式参见：中级教程 使用布局 Layout，Layout API。当这些内置布局无法满足需求时，G6 还提供了一般图的自定义布局的机制，方便用户进行更定制化的扩展。

\n

  注意：\n树图暂时不支持自定义布局。

\n

本文将会通过自定义 Bigraph 布局的例子讲解自定义布局。

\n

自定义布局 API

\n

G6 中自定义布局的 API 如下：

\n
/**\n * 注册布局的方法\n * @param {string} type 布局类型，外部引用指定必须，不要与已有布局类型重名\n * @param {object} layout 布局方法\n */\nLayout.registerLayout = function(type, {\n  /**\n   * 定义自定义行为的默认参数，会与用户传入的参数进行合并\n   */\n  getDefaultCfg() {\n    return {};\n  },\n  /**\n   * 初始化\n   * @param {object} data 数据\n   */\n  init(data) {},\n  /**\n   * 执行布局\n   */\n  execute() {},\n  /**\n   * 根据传入的数据进行布局\n   * @param {object} data 数据\n   */\n  layout(data) {},\n  /**\n   * 更新布局配置，但不执行布局\n   * @param {object} cfg 需要更新的配置项\n   */\n  updateCfg(cfg) {},\n  /**\n   * 销毁\n   */\n  destroy() {},\n});
\n

自定义布局

\n

下面，我们将讲解如何自定义布局如下图的二分图 Bigraph。二分图只存在两部分节点之间的边，同属于一个部分的节点之间没有边。我们希望布局能够对两部分节点分别进行排序，减少边的交叉。

\nimg\n

该二分图数据如下，节点根据 cluster 字段分为 了 'part1' 和 'part2'，代表二分图的两部分。

\n
const data = {\n  nodes: [\n    { id: '0', label: 'A', cluster: 'part1' },\n    { id: '1', label: 'B', cluster: 'part1' },\n    { id: '2', label: 'C', cluster: 'part1' },\n    { id: '3', label: 'D', cluster: 'part1' },\n    { id: '4', label: 'E', cluster: 'part1' },\n    { id: '5', label: 'F', cluster: 'part1' },\n    { id: '6', label: 'a', cluster: 'part2' },\n    { id: '7', label: 'b', cluster: 'part2' },\n    { id: '8', label: 'c', cluster: 'part2' },\n    { id: '9', label: 'd', cluster: 'part2' },\n  ],\n  edges: [\n    { source: '0', target: '6' },\n    { source: '0', target: '7' },\n    { source: '0', target: '9' },\n    { source: '1', target: '6' },\n    { source: '1', target: '9' },\n    { source: '1', target: '7' },\n    { source: '2', target: '8' },\n    { source: '2', target: '9' },\n    { source: '2', target: '6' },\n    { source: '3', target: '8' },\n    { source: '4', target: '6' },\n    { source: '4', target: '7' },\n    { source: '5', target: '9' },\n  ],\n};\n
\n

需求分析

\n

为了减少边的交叉，可以通过排序，将 'part1' 的节点 A 对齐到所有与 A 相连的 'part2' 中的节点的平均中心；同样将 'part2' 中的节点 a 对齐到所有与 a 相连的 'part1' 中的节点的平均中心。可以描述成如下过程：

\n\n

实现

\n

下面代码展示了自定义名为 'bigraph-layout' 的二分图布局，完整代码参见：自定义布局-二分图。使用该布局的方式与使用内置布局方式相同，都是在实例化图时将其配置到 layout 配置项中，详见：使用布局 Layout。

\n
G6.registerLayout('bigraph-layout', {\n  // 默认参数\n  getDefaultCfg: function getDefaultCfg() {\n    return {\n      center: [0, 0], // 布局的中心\n      biSep: 100, // 两部分的间距\n      nodeSep: 20, // 同一部分的节点艰巨\n      direction: 'horizontal', // 两部分的分布方向\n      nodeSize: 20, // 节点大小\n    };\n  },\n  // 执行布局\n  execute: function execute() {\n    var self = this;\n    var center = self.center;\n    var biSep = self.biSep;\n    var nodeSep = self.nodeSep;\n    var nodeSize = self.nodeSize;\n    var part1Pos = 0,\n      part2Pos = 0;\n    // 若指定为横向分布\n    if (self.direction === 'horizontal') {\n      part1Pos = center[0] - biSep / 2;\n      part2Pos = center[0] + biSep / 2;\n    }\n    var nodes = self.nodes;\n    var edges = self.edges;\n    var part1Nodes = [];\n    var part2Nodes = [];\n    var part1NodeMap = new Map();\n    var part2NodeMap = new Map();\n    // separate the nodes and init the positions\n    nodes.forEach(function(node, i) {\n      if (node.cluster === 'part1') {\n        part1Nodes.push(node);\n        part1NodeMap.set(node.id, i);\n      } else {\n        part2Nodes.push(node);\n        part2NodeMap.set(node.id, i);\n      }\n    });\n\n    // 对 part1 的节点进行排序\n    part1Nodes.forEach(function(p1n) {\n      var index = 0;\n      var adjCount = 0;\n      edges.forEach(function(edge) {\n        var sourceId = edge.source;\n        var targetId = edge.target;\n        if (sourceId === p1n.id) {\n          index += part2NodeMap.get(targetId);\n          adjCount++;\n        } else if (targetId === p1n.id) {\n          index += part2NodeMap.get(sourceId);\n          adjCount++;\n        }\n      });\n      index /= adjCount;\n      p1n.index = index;\n    });\n    part1Nodes.sort(function(a, b) {\n      return a.index - b.index;\n    });\n\n    // 对 part2 的节点进行排序\n    part2Nodes.forEach(function(p2n) {\n      var index = 0;\n      var adjCount = 0;\n      edges.forEach(function(edge) {\n        var sourceId = edge.source;\n        var targetId = edge.target;\n        if (sourceId === p2n.id) {\n          index += part1NodeMap.get(targetId);\n          adjCount++;\n        } else if (targetId === p2n.id) {\n          index += part1NodeMap.get(sourceId);\n          adjCount++;\n        }\n      });\n      index /= adjCount;\n      p2n.index = index;\n    });\n    part2Nodes.sort(function(a, b) {\n      return a.index - b.index;\n    });\n\n    // 放置节点\n    var hLength =\n      part1Nodes.length > part2Nodes.length\n        ? part1Nodes.length\n        : part2Nodes.length;\n    var height = hLength * (nodeSep + nodeSize);\n    var begin = center[1] - height / 2;\n    if (self.direction === 'vertical') {\n      begin = center[0] - height / 2;\n    }\n    part1Nodes.forEach(function(p1n, i) {\n      if (self.direction === 'horizontal') {\n        p1n.x = part1Pos;\n        p1n.y = begin + i * (nodeSep + nodeSize);\n      } else {\n        p1n.x = begin + i * (nodeSep + nodeSize);\n        p1n.y = part1Pos;\n      }\n    });\n    part2Nodes.forEach(function(p2n, i) {\n      if (self.direction === 'horizontal') {\n        p2n.x = part2Pos;\n        p2n.y = begin + i * (nodeSep + nodeSize);\n      } else {\n        p2n.x = begin + i * (nodeSep + nodeSize);\n        p2n.y = part2Pos;\n      }\n    });\n  },\n});\n
","fields":{"slug":"/zh/docs/manual/advanced/custom-layout"},"frontmatter":{"title":"自定义布局 Layout","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"manual/advanced/custom-layout.zh.md"}}},{"node":{"html":"

什么是 Behavior

\n

Behavior 是 G6 提供的定义图上交互事件的机制。它与交互模式 Mode 搭配使用，如何将下文所述各种 Behavior 配置到图上，见 交互模式。

\n

内置 Behavior

\n

理论上说 G6 上的所有基础图形、Item（节点/边）都能通过事件来进行操作，考虑到通用性， G6目前共提供了以下9个内置的 Behavior。

\n

drag-canvas

\n\n

默认配置

\n
const graph = new G6.Graph({\n  modes: {\n    default: ['drag-canvas'],\n  },\n});\n
\n

默认配置下，可以在 x 和 y 两个方向上拖动画布。

\n

配置参数

\n
const graph = new G6.Graph({\n  modes: {\n    default: [\n      {\n        type: 'drag-canvas',\n        direction: 'x',\n      },\n    ],\n  },\n});\n
\n

此时只能在 x 方向上面拖动，y 方向上不允许拖动。
\"3.gif\"

\n

zoom-canvas

\n\n

提示：若要限定缩放尺寸，请在 graph 上设置 **`minZoom` 和 `maxZoom`。**

\n

drag-node

\n\n

默认配置

\n
const graph = new G6.Graph({\n  modes: {\n    default: ['drag-node'],\n  },\n});\n
\n

\"3.gif\"

\n

启用 delegate

\n
const graph = new G6.Graph({\n  modes: {\n    default: [\n      {\n        type: 'drag-node',\n        enableDelegate: true,\n      },\n    ],\n  },\n});\n
\n

\"3.gif\"

\n

click-select

\n\n

默认配置
**

\n
const graph = new G6.Graph({\n  modes: {\n    default: ['click-select'],\n  },\n});\n
\n

按住 Shift 键可多选。
\"3.gif\"

\n

配置参数

\n
const graph = new G6.Graph({\n  modes: {\n    default: [\n      {\n        type: 'click-select',\n        trigger: 'ctrl',\n      },\n    ],\n  },\n});\n
\n

以上配置中，用户可按住 Ctrl 键进行多选，也可以配置 Alt 键。当配置了 multiple 参数为 false，则表示不允许多谢，此时 trigger 参数无效。

\n

tooltip

\n\n

提示：由于 G6 没有内置任何 tooltip 的样式，用户需要自己定义样式，例如：

\n
.g6-tooltip {\n  padding: 10px 6px;\n  color: #444;\n  background-color: rgba(255, 255, 255, 0.9);\n  border: 1px solid #e2e2e2;\n  border-radius: 4px;\n}\n
\n

edge-tooltip

\n

使用方式基本与 tooltip 相同，但是移到边时触发。主要是为了将两个交互区分开，以满足用户边与节点的提示样式或 HTML 结构不同，以及不需要在事件中去区分是节点事件还是边事件等。

\n\n

activate-relations

\n\n


默认配置

\n
const graph = new G6.Graph({\n  modes: {\n    default: ['activate-relations'],\n  },\n});\n
\n

默认情况下，选中的节点状态，在操作完以后仍然会保持选中状态。
\"3.gif\"

\n

配置参数

\n
const graph = new G6.Graph({\n  modes: {\n    default: [\n      {\n        type: 'activate-relations',\n        resetSelected: true,\n      },\n    ],\n  },\n});\n
\n

配置 resetSelected 参数为 true 后，交互后会重置节点的选择状态。

\n

\"3.gif\"

\n

brush-select

\n\n

默认配置

\n
const graph = new G6.Graph({\n  modes: {\n    default: ['brush-select'],\n  },\n});\n
\n

默认情况下，按住 Shift 键进行框选，选中节点的同时，也会选中边。
\"3.gif\"

\n

配置参数

\n
const graph = new G6.Graph({\n  modes: {\n    default: [\n      {\n        type: 'brush-select',\n        trigger: 'ctrl',\n        includeEdges: false,\n      },\n    ],\n  },\n});\n
\n

上面的配置，按住 Ctrl 键，进行框选，框选过程中不会选中边。
\"3.gif\"

\n

配置冲突

\n
const graph = new G6.Graph({\n  modes: {\n    default: [\n      'drag-canvas',\n      {\n        type: 'brush-select',\n        trigger: 'drag',\n      },\n    ],\n  },\n});\n
\n

当用户配置 brush-select 的 trigger 为 drag，同时又配置了 drag-canvas 时，在交互上面会出现冲突的情况。
\"3.gif\"

\n

可以看到，在拖动过程中也出现了框选的情况，这种情况很显然不是我们期望的效果，除过使用 brush-select的 trigger 参数避免这种冲突外，我们还可以通过下面的方式来实现：

\n
const graph = new G6.Graph({\n  modes: {\n    default: ['drag-canvas'],\n    brush: [\n      {\n        type: 'brush-select',\n        trigger: 'drag',\n      },\n    ],\n  },\n});\n
\n

上面这种方式是使用不同的 mode 来区分，mode 可以达到使用相同交互动作而产生不同的效果，更多关于 mode 的内容请参数 G6 中的 Mode 文档。

\n

使用 mode 区分，默认情况下使用的是 drag-canvas，但用户需要切换到框选时，通过 graph.setModel('brush') 即可实现，此时同样的交互产生的就是框选的效果。

\n

collapse-expand

\n\n

用法

\n
const graph = new G6.TreeGraph({\n  modes: {\n    default: [\n      {\n        type: 'collapse-expand',\n        trigger: 'click',\n        onChange(item, collapsed) {\n          const data = item.get('model').data;\n          data.collapsed = collapsed;\n          return true;\n        },\n      },\n      'drag-canvas',\n      'zoom-canvas',\n    ],\n  },\n});\n
\n

collapse-expand-group

\n\n

默认配置

\n
const graph = new G6.Graph({\n  modes: {\n    default: ['collapse-expand-group'],\n  },\n});\n
\n

配置参数
配置 trigger 参数为 click 后，单击节点分组即可收起或展开分组。

\n
const graph = new G6.Graph({\n  modes: {\n    default: [\n      {\n        type: 'collapse-expand-group',\n        trigger: 'click',\n      },\n    ],\n  },\n});\n
\n

\"3.gif\"

\n

drag-group

\n\n

默认配置

\n
const graph = new G6.Graph({\n  modes: {\n    default: ['drag-group'],\n  },\n});\n
\n

drag-node-with-group

\n\n

默认配置

\n
const graph = new G6.Graph({\n  modes: {\n    default: ['drag-node-with-group'],\n  },\n});\n
","fields":{"slug":"/zh/docs/manual/middle/states/defaultBehavior"},"frontmatter":{"title":"内置的 Behavior","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"manual/middle/states/defaultBehavior.zh.md"}}},{"node":{"html":"

G6 中文本的处理。

\n

使用指南

\n

节点或边上的文本超长时，可以通过使用 JS 来计算文本长度，也可以通过使用 \\n 来进行换行。

","fields":{"slug":"/zh/examples/shape/label"},"frontmatter":{"title":"超长文本","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"shape/label/index.zh.md"}}},{"node":{"html":"

Proccess the long label in G6.

\n

Usage

\n

When the label of node or edge has long text, we recommend to calculate the length by JS, and use \\n to wrap the worlds.

","fields":{"slug":"/zh copy/examples/shape/label"},"frontmatter":{"title":"Long Label","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"shape/label/index.zh copy.md"}}},{"node":{"html":"

Region response on a node or edge.

\n

Usage

\n

The following demo shows region(e.g. an small icon of a node) response on a node or edge.

","fields":{"slug":"/en/examples/interaction/partialResponse"},"frontmatter":{"title":"Region Response","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"interaction/partialResponse/index.en.md"}}},{"node":{"html":"

区域响应。

\n

使用指南

\n

G6 的图元素中，可能只想响应部分元素的事件，如节点中的某个 icon、树图中的展开收起 icon 等。

","fields":{"slug":"/zh/examples/interaction/partialResponse"},"frontmatter":{"title":"响应区域事件","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"interaction/partialResponse/index.zh.md"}}},{"node":{"html":"

Circular layout orders the nodes according to the configuration, and then places the nodes on a circle.

\n

Usage

\n

As the demo below, you can deploy it in layout while instantiating Graph. it can also be used for Subgraph Layout. By tuning the configurations, you can adjust the radius, start angle, end angle, nodes' order method, divisions, spiral style, and so on.

\n","fields":{"slug":"/en/examples/net/circular"},"frontmatter":{"title":"Circular Layout","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"net/circular/index.en.md"}}},{"node":{"html":"

Circular 环形布局根据参数指定的排序方式对节点进行排序后，将节点排列在圆环上。

\n

使用指南

\n

G6 内置的 Circular 环形布局可在实例化 Graph 时使用该布局。除此之外，还可以如子图布局所示单独使用布局。该布局可以通过配置调整半径、起始和结束角度、节点排序方式、节点分组、螺旋线布局等。

\n","fields":{"slug":"/zh/examples/net/circular"},"frontmatter":{"title":"Circular 环形布局","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"net/circular/index.zh.md"}}},{"node":{"html":"

Change the node positions by changeData method is a simple way to realize the node animation.

\n

Usage

\n

For simple animation, change positions by changeData is a straightforward way. But it is not a good solution for complex scenario. Please refer to the document Animation.

","fields":{"slug":"/en/examples/scatter/changePosition"},"frontmatter":{"title":"Change Node Positions","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"scatter/changePosition/index.en.md"}}},{"node":{"html":"

通过 changeData 方法不断地改变节点位置，以达到动画的效果。

\n

使用指南

\n

对于一些简单的动画场景，可以通过这种方式来实现。稍复杂的场景，不建议使用这种方式。

\n

G6 中更多关于动画的内容，请参考文档 动画。

","fields":{"slug":"/zh/examples/scatter/changePosition"},"frontmatter":{"title":"改变节点位置","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"scatter/changePosition/index.zh.md"}}},{"node":{"html":"

生态树、紧凑树两种布局方法可以通过配置项变换为辐射型树布局。跟节点位于辐射树中心，其他分支辐射式展开。\n
\nradialtree

\n

使用指南

\n

辐射树是通过生态树、紧凑树布局的变形。适用于展示树结构数据，配合 TreeGraph 使用。如下面代码所示，可在实例化 TreeGraph 时使用该布局。除此之外，还可以如子图布局所示单独使用布局。

\n

使用方式与对应的生态树、紧凑树相同，配置 radial 为 true 时，将会以辐射形式展示树。在使用辐射树时建议将布局的 direction 配置为 LR 或 RL。

","fields":{"slug":"/zh/examples/tree/radialtree"},"frontmatter":{"title":"辐射树","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"tree/radialtree/index.zh.md"}}},{"node":{"html":"

In radial tree layout, root node will be placed on the center. the branches will be placed in radial around the root. Dendrogram and CompactBox can be transformed into radial tree by configuration.\n
\nradialtree

\n

Usage

\n

Radial tree layout is a deformation of Dendrogram and CompactBox. It is an appropriate layout method for tree data structure. Please use it with TreeGraph. As the demo below, you can deploy it in layout while instantiating Graph. it can also be used for Subgraph Layout.

\n

Same as Dendrogram and CompactBox, only set the radial to true. We recommend to set direction to LR or RL while using radial tree layout.

","fields":{"slug":"/en/examples/tree/radialtree"},"frontmatter":{"title":"Radial Tree","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"tree/radialtree/index.en.md"}}},{"node":{"html":"

Behavior指G6中的复合交互，一般Behavior包含一个或多个事件的监听与处理以及一系列对图中元素的操作。

\n

Behavior默认包含shouldBegin，shouldUpdate，shouldEnd三个回调，代表是否开始行为，是否更新元素，是否进行结束行为，当返回值为false时阻止默认行为。

\n

用法

\n
G6.registerBehavior('behaviorName', {\n  getEvents() {\n    return {\n      'node:click': 'onNodeClick',\n      'edge:click': 'onEdgeClick',\n      'mousemove': 'onMouseMove'\n    }\n  },\n  onNodeClick(evt) {\n  \t// TODO\n  },\n  onEdgeClick(evt) {\n  \t// TODO\n  },\n  onMouseMove(evt) {\n  \t// TODO\n  }\n}
\n

getEvents()

\n

自定义Behavior时，定义事件及处理事件的方法。

\n

getEvents()方法中可以使用的事件请参考Event文档。

\n

用法

\n
G6.registerBehavior('behaviorName', {\n  getEvents() {\n    return {\n      'node:click': 'onNodeClick',\n      'edge:click': 'onEdgeClick',\n      'mousemove': 'onMouseMove'\n    }\n  }\n}
\n

onNodeClick(evt)

\n

onNodeClick、onEdgeClick和onMouseMove都属于自定义方法，用于处理node:click、edge:click、mousemove等事件。

\n

参数

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称类型是否必选描述
evtEvent否包含事件句柄、当前操作对象及各坐标值等
\n

参数evt包括以下属性：

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称类型描述
xnumber元素视口x坐标
ynumber元素视口y坐标
canvasXnumber元素Canvas x坐标
canvasYnumber元素Canvas y坐标
clientXnumber屏幕/页面x坐标
clientYnumber屏幕/页面y坐标
eventMouseEvent事件句柄
targetShape当前对象
typestring操作类型
currentTargetobject
itemShape操作的目标元素
removedboolean是否删除/销毁
timeStampnumber时间戳
bubblesboolean是否支持事件冒泡
defaultPreventedboolean是否阻止默认事件
cancelableboolean是否取消
\n

用法

\n
G6.registerBehavior('behaviorName', {\n  getEvents() {\n    return {\n      'node:click': 'onNodeClick',\n      'edge:click': 'onEdgeClick',\n      'mousemove': 'onMouseMove'\n    }\n  },\n  onNodeClick(evt) {\n  \t// TODO\n  },\n  onEdgeClick(evt) {\n  \t// TODO\n  },\n  onMouseMove(evt) {\n  \t// TODO\n  }\n}
\n

getDefaultCfg()

\n

定义自定义Behavior时的默认参数，会与用户传入的参数进行合并。

\n

提示：该方法是可选的。

\n

用法

\n
G6.registerBehavior('behaviorName', {\n  getDefaultCfg() {\n    return {\n      trigger: 'click' // mouseneter or click\n    }\n  }\n}
\n

shouldBegin(evt)

\n

是否阻止行为发生，默认返回true，不阻止行为，需要在处理逻辑中自行调用。

\n

用法

\n
G6.registerBehavior('behaviorName', {\n  shouldBegin() {\n    // 这里可以根据业务自定义\n    return true\n  }\n}
\n

shouldUpdate(evt)

\n

是否更新数据及更改视图，默认返回true，允许更新，如果返回false，则不更新数据和视图。

\n

用法

\n
const graph = new G6.Graph({\n  container: 'mountNode',\n  width: 500,\n  height: 500,\n  pixelRatio: 2,\n  modes: {\n    default: [\n      'drag-canvas',\n      {\n        type: 'self-behavior',\n        shouldUpdate: e => {\n          if (e.target.type !== 'text') {\n            return false;\n          }\n          return true;\n        },\n      },\n    ],\n  },\n});\n
\n

shouldEnd(evt)

\n

是否结束行为，默认返回true。

","fields":{"slug":"/zh/docs/api/Behavior"},"frontmatter":{"title":"Behavior","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"api/Behavior.zh.md"}}},{"node":{"html":"

为辅助用户在图上探索，G6 提供了一些辅助工具，其中一部分是插件工具，另一部分是交互工具。

\n

本文将为 Tutorial案例 添加缩略图插件、网格插件、节点提示框、边提示框。

\n

插件

\n

使用插件时，有三个步骤：
  Step 1: 引入插件；
  Step 2: 实例化插件；
  Step 3: 在实例化图时将插件的实例配置到图上。

\n

Minimap

\n

缩略图 (Minimap) 是一种常见的用于快速预览和探索图的工具，可作为导航辅助用户探索大规模图。
\"tree-minimap.gif\"

\n

现在，我们为 Tutorial案例 配置一个 Minimap：

\n

预期效果

\n

\"tutorial-demo-minimap.gif\"

\n

使用方法

\n

Minimap 是 G6 的插件之一，G6 的插件是一个个独立的包，需要单独引入：

\n
<body>\n  <!-- 引入 G6 -->\n  <script src=\"https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.1/build/g6.js\"></script>\n  \n  <!-- 引入 Minimap -->\n  <script src=\"https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.1/build/minimap.js\"></script>\n  \n  <script>\n    // ...\n  </script>\n</body>
\n

使用起来非常简单，实例化 Minimap 对象，并将其配置到图实例的插件列表里即可：

\n
// 实例化 minimap 插件\nconst minimap = new Minimap({\n  size: [100, 100],\n  className: 'minimap',\n  type: 'delegate',\n});\n\n// 实例化图\nconst graph = new G6.Graph({\n  // ...                           // 其他配置项\n  plugins: [minimap], // 将 minimap 实例配置到图上\n});\n
\n

Grid 网格

\n

网格可用于辅助用户在拖拽节点时对齐到网格。

\n

期待效果

\n

\"tutorial-demo-grid.gif\"

\n

使用方法首先引入插件：

\n
<body>\n  <!-- 引入 G6 -->\n  <script src=\"https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.1/build/g6.js\"></script>\n  \n  <!-- 引入 Minimap -->\n  <script src=\"https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.1/build/minimap.js\"></script>\n  \n  <!-- 引入 Grid -->\n  <script src=\"https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.0/build/grid.js\"></script>\n  \n  <script>\n    // ...\n  </script>\n</body>
\n

实例化插件和配置插件到图上：

\n
// const minimap = ...\n\n// 实例化 grid 插件\nconst grid = new Grid();\n\n// 实例化图\nconst graph = new G6.Graph({\n  // ...                        // 其他配置项\n  plugins: [minimap, grid], // 将 grid 实例配置到图上\n});\n
\n

交互工具

\n

交互工具是指配置到图上交互模式中的工具。使用交互工具时，有两个步骤：
  Step 1: 在实例化图时配置 modes；
  Step 2: 为交互工具定义样式。

\n

tooltip 节点提示框

\n

节点提示框可以用在节点的详细信息的展示。当鼠标滑过节点时，显示一个浮层告知节点的详细信息。

\n

预期效果

\n

\"tutorial-demo-nodetooltip.gif\"

\n

使用方法

\n

实例化图时配置 'tooltip' 到 modes 中：

\n
const graph = new G6.Graph({\n  modes: {\n    default: [\n      // ...\n      {\n        type: 'tooltip', // 提示框\n        formatText(model) {\n          // 提示框文本内容\n          const text = 'label: ' + model.label + '<br/> class: ' + model.class;\n          return text;\n        },\n      },\n    ],\n  },\n});\n
\n

由于 tooltip 实际上是一个悬浮的 <div> 标签，因此可在 HTML 的 <style> 标签或 CSS 中设置样式。下面展示在 HTML 中设置样式：

\n
<head>\n  <meta charset=\"UTF-8\" />\n  <title>Tutorial Demo</title>\n\n  <style>\n    /* 提示框的样式 */\n    .g6-tooltip {\n      border: 1px solid #e2e2e2;\n      border-radius: 4px;\n      font-size: 12px;\n      color: #545454;\n      background-color: rgba(255, 255, 255, 0.9);\n      padding: 10px 8px;\n      box-shadow: rgb(174, 174, 174) 0px 0px 10px;\n    }\n  </style>\n</head>
\n

edge-tooltip 边提示框

\n

节点提示框可以用在节点的详细信息的展示。当鼠标滑过边时，显示一个浮层告知边的详细信息。

\n

预期效果

\n

\"tutorial-demo-edgetooltip.gif\"

\n

使用方法

\n
const graph = new G6.Graph({\n  modes: {\n    default: [\n      // ...\n      {\n        type: 'tooltip', // 节点提示框\n        // ...\n      },\n      {\n        type: 'edge-tooltip', // 边提示框\n        formatText(model) {\n          // 边提示框文本内容\n          const text =\n            'source: ' +\n            model.source +\n            '<br/> target: ' +\n            model.target +\n            '<br/> weight: ' +\n            model.weight;\n          return text;\n        },\n      },\n    ],\n  },\n});\n
\n

与 tooltip 相同，edge-tooltip 是一个悬浮的 <div> 标签，可以使用与 tooltip 相同的方法设置其悬浮框的样式。

\n

完整代码

\n

至此，Tutorial-案例 完成，完整代码见：Tutorial案例代码。

\n

 注意 
若需更换数据，请替换 'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json' 为新的数据文件地址。

","fields":{"slug":"/zh/docs/manual/tutorial/plugins"},"frontmatter":{"title":"插件与工具","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/plugins.md"}}},{"node":{"html":"

G6 除了提供丰富的 内置交互行为 Behavior 外，还提供了自定义交互行为的机制，方便用户开发更加定制化的交互行为。

\n

在交互行为上， G6 主要考虑了三个场景：

\n\n

在这些场景中只要用户可能无法一眼看清楚所有需要的信息，都需要进行交互，例如：

\n\n

我们无法将所有常用的交互全部内置到 G6 中。由于场景不一样，业务不一样，同样的目的需要的交互都不一样：

\n\n

我们可以看到在图上的交互是繁杂多变的。各种冲突、各种配置项会让用户和开发者疲于应对。出于这些考虑， G6 提供了一套非常简单而灵活的机制来实现交互。

\n

Behavior 的生命周期

\n

为实现交互，首先需要了解交互的生命周期。交互起源于用户在系统上的所有事件，是否允许交互发生同事件密切相关。所以我们看到交互的生命周期，即操作事件的过程如下：

\n\n

自定义交互 registerBehavior

\n

通过 G6.registerBehavior 自定义 Behavior。下面代码实现了名为 'activate-node'的交互行为，在终端用户点击节点时，置该节点的 active 状态为 true；再次点击或点击画布时，置该节点的 active 状态为 false。

\n

  注意：

\n\n

使用自定义的 Behavior

\n

有了上面代码定义的名为 'activate-node' 的 Behavior 以后，在实例化 Graph 时，在 modes 中将其配置到默认或其他行为模式中。下面代码将其配置到了默认行为模式中，在默认模式下，该行为将会生效。

\n
const graph = new G6.Graph({\n  container: 'mountNode',\n  width: 500,\n  height: 500,\n  modes: {\n    // 定义的 behavior 指定到这里，就可以支持Behavior中定义的交互\n    default: ['activate-node'],\n  },\n});\n
","fields":{"slug":"/zh/docs/manual/advanced/custom-behavior"},"frontmatter":{"title":"自定义交互 Behavior","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"manual/advanced/custom-behavior.zh.md"}}},{"node":{"html":"

什么是 Mode

\n

用户在交互一张图时，可能由于意图不同而存在不同的交互模式，例如在编辑模式下点击节点需要弹出窗口让用户编辑，在查看模式下点击节点需要选中节点。

\n

为了解决上述问题，G6 提供了交互模式 Mode，它是图上交互行为 Behavior 的管理机制。一个图上可以有存在多种交互模式，每个交互模式包含多种交互行为 Behavior。

\n

例如，存在 default 和 edit 两种 mode（交互模式）:

\n\n

默认情况下，该图对 default 模式中的行为见效，即点击节点时节点被选中而不是弹出编辑框。用户可以通过简单的命令切换该图的行为模式到 edit 模式，则 default 模式中的行为失效，edit 交互模式中的行为起效，即点击节点将弹出编辑框。

\n

配置 Mode

\n

在实例化图时配置 modes 属性：

\n
const graph = new G6.Graph({\n  container: 'mountNode',\n  width: 500,\n  height: 500,\n  modes: {\n    // 支持的 behavior\n    default: ['drag-canvas', 'zoom-canvas'],\n    edit: ['click-select'],\n  },\n});\n
\n

以上是模式定义的一个例子。在图上定义了两个模式，分别是 default， edit 。其中 default 包含两个 Behavior：'drag-canvas' 和 '``zoom-canvas'，都使用行为的默认参数。

\n

切换 Mode

\n

默认时 Graph 会使用 default 的 Mode ，可以拖动和缩放画布，当需要点击选中节点时，可以通过 graph.``setMode('edit') 来切换到 edit 的 Mode 。

\n
graph.setMode('edit');\n
\n

此时 Graph 就支持了拖拽节点，default 模式下的拖拽画布 'drag-canvas'、放缩画布行为 'zoom-canvas' 失效。

\n

在调用了 setMode 方法后，G6 内部进行了以下操作：

\n\n

编辑已有的 Mode

\n

如果有已经定义好的 Behavior （内置 Behavior 或 自定义 Behavior），需要把它添加到某个模式下，可以通过 graph.addBehaviors 方法；需要从某个模式中移除一些 Behavior，可以使用 graph.removeBehaviors 方法。如下示例：

\n
// 向 default 模式中添加名为 drag-canvas 的行为，并使用行为的默认配置\ngraph.addBehaviors('drag-canvas', 'default');\n\n// 从 default 模式中移除名为 drag-canvas 的行为\ngraph.removeBehaviors('drag-canvas', 'default');\n\n// 向 edit 模式中添加名为 drag-canvas 的行为，并定义个性化配置\ngraph.addBehaviors(\n  {\n    type: 'drag-canvas',\n    direction: 'x',\n  },\n  'edit',\n);\n\n// 从 edit 模式中移除名为 drag-canvas 的行为\ngraph.removeBehaviors('drag-canvas', 'edit');\n\n// 一次向 default 模式中添加多个行为\ngraph.addBehaviors(['drag-canvas', 'zoom-canvas'], 'default');\n\n// 一次从 default 模式中移除多个行为\ngraph.removeBehaviors(['drag-canvas', 'zoom-canvas'], 'default');\n
\n

相关阅读

\n","fields":{"slug":"/zh/docs/manual/middle/states/mode"},"frontmatter":{"title":"交互模式 Mode","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"manual/middle/states/mode.zh.md"}}},{"node":{"html":"

节点与边的显示/隐藏

\n

使用下面四个函数可以实现节点与边的显示/隐藏：

\n
// 显示节点实例 nodeItem，该节点的 visible 属性值在该方法调用后被置为 true\nnodeItem.show();\n\n// 隐藏节点实例 nodeItem，该边的 visible 属性值在该方法调用后被置为 false\nnodeItem.hide();\n\n// 显示边实例 nodeItem，该边的 visible 属性值在该方法调用后被置为 true\nedgeItem.show();\n\n// 隐藏边实例 nodeItem，该边的 visible 属性值在该方法调用后被置为 false\nedgeItem.hide();\n
\n

示例

\n

\"node-edge-show-hide.gif\"
下面代码从 完整 Demo 代码 中摘取了元素显示/隐藏的相关操作部分，通过鼠标监听对节点、边、画布的点击事件，显示和隐藏元素：

\n
// 鼠标点击节点，隐藏该节点\ngraph.on('node:click', ev => {\n  const node = ev.item;\n  console.log('before hide(), the nodevisible = ', node.get('visible'));\n  node.hide();\n  graph.paint();\n  console.log('after hide(), the node visible = ', node.get('visible'));\n});\n\n// 鼠标点击边，隐藏该边\ngraph.on('edge:click', ev => {\n  const edge = ev.item;\n  console.log('before hide(), the edge visible = ', edge.get('visible'));\n  edge.hide();\n  graph.paint();\n  console.log('after hide(), the edge visible = ', edge.get('visible'));\n});\n\n// 鼠标点击画布，显示所有节点和边\ngraph.on('canvas:click', ev => {\n  const nodes = graph.getNodes();\n  const edges = graph.getEdges();\n  nodes.forEach(node => {\n    node.show();\n  });\n  edges.forEach(edge => {\n    edge.show();\n  });\n  graph.paint();\n});\n
","fields":{"slug":"/zh/docs/manual/middle/elements/edgeVisible"},"frontmatter":{"title":"边的显示与隐藏","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"manual/middle/elements/edgeVisible.zh.md"}}},{"node":{"html":"

G6 内置了折线 loop 边，其默认样式如下。
\n\"image.png\"

\n

 注意 
loop 边适用于自环边，即起始点与结束点为相同节点的边，在不同端点的边上适用 loop 边将会出现异常效果。\n
\n

\n

使用方法

\n

如 内置边 一节所示，配置边的方式有两种：实例化图时全局配置，在数据中动态配置。

\n

1 实例化图时全局配置

\n

用户在实例化 Graph 时候可以通过 defaultEdge 指定 shape 为 'loop'，即可使用 loop 边。需要注意的是，如果图上存在非自环边，loop 将会表现异常。因此不建议在存在非自环边的图上使用此全局配置方法。

\n
const graph = new G6.Graph({\n  container: 'mountNode',\n  width: 800,\n  height: 600,\n  defaultEdge: {\n    shape: 'loop',\n    // 其他配置\n  },\n});\n
\n

2 在数据中动态配置

\n

如果需要使不同节点有不同的配置，可以将配置写入到节点数据中。这种配置方式可以通过下面代码的形式直接写入数据，也可以通过遍历数据的方式写入。

\n
const data = {\n  nodes: [\n    ... // 节点\n  ],\n  edges: [{\n    source: 'node0',\n    target: 'node0'\n    shape: 'loop',\n    ... // 其他配置\n    style: {\n      ...  // 样式属性，每种边的详细样式属性参见各边文档\n    }\n  },\n    ... // 其他边\n  ]\n}
\n

配置项说明

\n

自环是指连接单个节点自身的边，是一种边的特殊情况，因此，在通用属性基础上，支持了特殊的配置 loopCfg。

\n

loop 边支持以下的配置项，对于 Object 类型的配置项将在后面有详细讲解：

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称含义类型备注
color边的颜色String优先级低于 style 中的 stroke
style边的样式ObjectCanvas支持的属性
style.endArrow边结束端是否有箭头Boolean默认为 false
label标签文本文字String
labelCfg文件配置项Object
loopCfg自环特殊配置Object
\n

样式属性 style

\n

Object 类型。配置项与边的通用样式属性相同，见 内置边。下面代码演示在实例化图时全局配置方法中配置 style，以达到下图效果。
\"image.png\"

\n
const data = {\n  nodes: [\n    {\n      id: 'node0',\n      x: 100,\n      y: 100,\n      size: 20,\n    },\n  ],\n  edges: [\n    {\n      source: 'node0',\n      target: 'node0',\n      shape: 'loop',\n      label: 'loop',\n    },\n  ],\n};\nconst graph = new G6.Graph({\n  container: 'mountNode',\n  width: 800,\n  height: 600,\n  defaultEdge: {\n    // shape: 'loop',  // 在数据中已经指定 shape，这里无需再次指定\n    style: {\n      endArrow: true,\n      stroke: '#088',\n      lineWidth: 3,\n    },\n  },\n});\ngraph.data(data);\ngraph.render();\n
\n

标签文本配置 labelCfg

\n

Object 类型。其配置与边的通用文本配置相同，见 内置边。基于上面 样式属性 style 中的代码，下面代码在 defaultNode 中增加了 labelCfg 配置项进行文本的配置，使之达到如下图效果。
\"image.png\"

\n
const data = {\n  // ... data 内容\n};\nconst graph = new G6.Graph({\n  // ... 图的其他配置\n  defaultEdge: {\n    // ... 其他配置\n    labelCfg: {\n      refY: -5,\n      refX: 30,\n    },\n  },\n});\n// ...\n
\n

自环特殊配置 loopCfg

\n

Object 类型。通过 loopCfg 配置自环的方位、高度、顺逆时针。

\n\n

基于上面 样式属性 style 中的代码，下面代码在 defaultNode 中增加了 loopCfg 配置项进行文本的配置，使之达到如下图效果。
\"image.png\"

\n
const data = {\n  // ... data 内容\n};\nconst graph = new G6.Graph({\n  // ... 图的其他配置\n  defaultEdge: {\n    // ... 其他配置\n    loopCfg: {\n      position: 'left',\n      dist: 100,\n      clockwise: false,\n    },\n  },\n});\n// ...\n
","fields":{"slug":"/zh/docs/manual/middle/elements/edges/loop"},"frontmatter":{"title":"loop","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"manual/middle/elements/edges/loop.zh.md"}}},{"node":{"html":"

G6 内置了星形 star 节点，其默认样式如下。标签文本位于星形中央。
\"image.png\"

\n

使用方法

\n

如 内置节点 一节所示，配置节点的方式有两种：实例化图时全局配置，在数据中动态配置。

\n

1 实例化图时全局配置

\n

用户在实例化 Graph 时候可以通过 defaultNode 指定 shape 为 'star'，即可使用 star 节点。

\n
const graph = new G6.Graph({\n  container: 'mountNode',\n  width: 800,\n  height: 600,\n  defaultNode: {\n    shape: 'star',\n    // 其他配置\n  },\n});\n
\n

2 在数据中动态配置

\n

如果需要使不同节点有不同的配置，可以将配置写入到节点数据中。这种配置方式可以通过下面代码的形式直接写入数据，也可以通过遍历数据的方式写入。

\n
const data = {\n  nodes: [{\n\t  id: 'node0',\n    shape: 'star',\n    ... // 其他配置\n    },\n    ... // 其他节点\n  ],\n  edges: [\n    ... // 边\n  ]\n}
\n

配置项说明

\n

star 节点支持以下的配置项：

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称含义类型备注
size五角星的大小numberArray
innerR五角星内环大小Number默认为 size * 3 / 8
style五角星的默认样式ObjectCanvas 支持的属性
labelCfg文件配置项Object
stateStyles各状态下的样式Object只对 keyShape 起作用
linkPoints五角星上的链接点Object默认不显示
icon五角星上icon配置Object默认不显示 icon
\n

样式属性 style

\n

Object 类型。通过 style 配置来修改节点的填充色、描边等属性。下面代码演示在实例化图时全局配置方法中配置 style，使之达到如下图效果。
\"image.png\"

\n
const data = {\n  nodes: [\n    {\n      x: 100,\n      y: 100,\n      shape: 'star',\n      label: 'star',\n    },\n  ],\n};\nconst graph = new G6.Graph({\n  container: 'mountNode',\n  width: 800,\n  height: 600,\n  defaultNode: {\n    // shape: 'star',   // 在数据中已经指定 shape，这里无需再次指定\n    size: 80,\n    style: {\n      fill: '#bae637',\n      stroke: '#eaff8f',\n      lineWidth: 5,\n    },\n  },\n});\ngraph.data(data);\ngraph.render();\n
\n

标签文本配置 labelCfg

\n

Object 类型。通过 labelCfg 配置标签文本。基于上面 样式属性 style 中的代码，下面代码在 defaultNode 中增加了 labelCfg 配置项进行文本的配置，使之达到如下图效果。
\"image.png\"

\n
const data = {\n  // ... data 内容\n};\nconst graph = new G6.Graph({\n  // ... 图的其他属性\n  defaultNode: {\n    // ... 节点其他属性\n    labelCfg: {\n      style: {\n        fill: '#9254de',\n        fontSize: 18,\n      },\n    },\n  },\n});\n// ...\n
\n

边的连入点 linkPoints

\n

Object 类型。通过配置 linkPoints ，可以指定圆周围「上、下、左、右」四个方向上边的连入点。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称含义类型备注
top是否显示上部的连接点Boolean默认为 false
leftBottom是否显示左底部的连接点Boolean默认为 false，star 特有
rightBottom是否显示右底部的连接点Boolean默认为 false，star 特有
left是否显示左侧的连接点Boolean默认为 false
right是否显示右侧的连接点Boolean默认为 false
size连接点的大小Number默认为 3
fill连接点的填充色String默认为 '#72CC4A'
stroke连接点的边框颜色String默认为 '#72CC4A'
lineWidth连接点边框的宽度Number默认为 1
\n

基于上面 样式属性 style 中的代码，下面代码在 defaultNode 中增加了 linkPoints 配置项进行连入点的配置，使之达到如下图效果。
\"image.png\"

\n
const data = {\n  // ... data 内容\n};\nconst graph = new G6.Graph({\n  // ... 图的其他属性\n  defaultNode: {\n    // ... 节点其他属性\n    linkPoints: {\n      top: true,\n      left: true,\n      right: true,\n      leftBottom: true,\n      rightBottom: true,\n      size: 5,\n      fill: '#fff',\n    },\n  },\n});\n// ...\n
\n

图标 icon

\n

Object 类型。通过配置 icon，可以在圆上显示小图标。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称含义类型备注
show是否显示iconBoolean默认为false，不显示
widthicon的宽度Number默认为16
heighticon的高度Number默认为16
imgicon的地址String
\n

基于上面 样式属性 style 中的代码，下面代码在 defaultNode 中增加了 icon 配置项进行图标的配置，使之达到如下图效果。
\"image.png\"

\n
const data = {\n  // ... data 内容\n};\nconst graph = new G6.Graph({\n  // ... 图的其他属性\n  defaultNode: {\n    // ... 节点其他属性\n    icon: {\n      show: true,\n      width: 25,\n      height: 25,\n    },\n  },\n});\n// ...\n
","fields":{"slug":"/zh/docs/manual/middle/elements/nodes/star"},"frontmatter":{"title":"star","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"manual/middle/elements/nodes/star.zh.md"}}},{"node":{"html":"

G6 自定义节点与边机制允许用户对树图视觉样式进行定制。

\n

使用指南

\n

通过结合自定义元素，可以实现较为复杂的树可视化。

\n","fields":{"slug":"/zh/examples/tree/customItemTree"},"frontmatter":{"title":"定制树图元素样式","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"tree/customItemTree/index.zh.md"}}},{"node":{"html":"

Thanks to the item's custom mechanism of G6, users can design their own tree with freedom.

\n

Usage

\n

Combining with custom items, the complex tree visualization can be realized.

\n","fields":{"slug":"/en/examples/tree/customItemTree"},"frontmatter":{"title":"Custom Tree Items","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"tree/customItemTree/index.en.md"}}},{"node":{"html":"

Move the graph by interaction.

\n

Usage

\n

Move the graph to focus on the clicked node, which means pan the canvas to center at the clicked node.

","fields":{"slug":"/en/examples/interaction/position"},"frontmatter":{"title":"Move Nodes","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"interaction/position/index.en.md"}}},{"node":{"html":"

通过交互改变节点的位置。

\n

使用指南

\n

点击某个节点，让其移动到画布中心。

","fields":{"slug":"/zh/examples/interaction/position"},"frontmatter":{"title":"移动位置","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"interaction/position/index.zh.md"}}},{"node":{"html":"

Grid Layout will order the nodes according to the parameters, and then place the nodes on the grids.

\n

Usage

\n

As the demo below, you can deploy it in layout while instantiating Graph. it can also be used for Subgraph Layout. By tuning the parameters, you can adjust the iteration number, compact degree, layout buy cluster, and so on. By tuning the parameters, you can adjust the ordering method, rows, cols, prevent node overlappings, and so on.

\n","fields":{"slug":"/en/examples/net/gridLayout"},"frontmatter":{"title":"Grid","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"net/gridLayout/index.en.md"}}},{"node":{"html":"

Grid 网格布局根据参数指定的排序方式对节点进行排序后，将节点排列在网格上。

\n

使用指南

\n

G6 内置的 Grid 网格布局可在实例化 Graph 时使用该布局。除此之外，还可以如子图布局所示单独使用布局。该布局可以通过配置调整节点排序方式、行数、列数、节点不重叠等。

\n","fields":{"slug":"/zh/examples/net/gridLayout"},"frontmatter":{"title":"Grid 网格布局","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"net/gridLayout/index.zh.md"}}},{"node":{"html":"

Configuration animateCfg of Graph is designed for global animation.

\n

Usage

\n

The demo shows how to set a global uniform animation.

\n

For more information, please refer to document Animation。

","fields":{"slug":"/en/examples/scatter/customAnimate"},"frontmatter":{"title":"Custom Animation","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"scatter/customAnimate/index.en.md"}}},{"node":{"html":"

在实例化 Graph 时，可以通过 animateCfg 配置项设置全局动画。

\n

使用指南

\n

当需要对已有的节点，做统一的自定义动画效果时，可以使用这种方式来实现。

\n

G6 中更多关于动画的内容，请参考动画文档。

","fields":{"slug":"/zh/examples/scatter/customAnimate"},"frontmatter":{"title":"自定义动画","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"scatter/customAnimate/index.zh.md"}}},{"node":{"html":"

由于动画机制较为复杂，我们未在 Tutorial-案例 中增加动画。本文简单描述了 G6 中的动画，希望快速上手的用户可以跳过本文，希望深入了解的用户可参见：基础动画。

\n

G6 的动画分为两个层次：

\n\n

全局动画

\n

G6 的全局动画指通过图实例进行操作时，产生的动画效果。例如：

\n\n

通过实例化图时配置 animate: true，可以达到每次进行上述操作时，动画效果变化的目的。

\n

例子

\n
const graph = new G6.Graph({\n  ...                      // 其他配置项\n  animate: true            // Boolean，可选，切换布局时是否使用动画过度\n});
\n

元素动画

\n

G6 允许用户通过自定义节点/边的方式，给元素增加动画效果，如下：

\n

\"node-animation.gif\"

\n

\"edge-animation.gif\"

\n

\"hover-animation.gif\"

","fields":{"slug":"/zh/docs/manual/tutorial/animation"},"frontmatter":{"title":"动画（选读）","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/animation.md"}}},{"node":{"html":"

什么是 state

\n

G6 中的 state，指的是状态，包括交互状态和业务状态两种。

\n

交互状态

\n

交互状态是与具体的交互动作密切相关的，如用户使用鼠标选中某个节点，hover 到某条边。

\n

G6 中默认处理的是交互状态。

\n

业务状态

\n

指根据用户业务需求自定义的状态。业务状态是与交互动作无关的，与具体业务逻辑强相关的，也可理解为是强数据驱动的。如某个任务的执行状态、某条申请的审批状态等，不同的数据值代表不同的业务状态。业务状态与用户交互动作无关，但在 G6 中的处理方式同交互状态一致。

\n

何时使用 state

\n

判断是否该使用 state 的原则很简单，从交互和业务两个层面来看：

\n\n

满足上述条件其一，则应该使用 state。

\n

配置不同 state 的样式

\n

在 G6 中，配置交互状态和业务状态的方式是相同的。对于部分只使用 G6 来完成某个需求的开发，而不想深入理解G6的用户，其实不用区分交互状态和业务状态的区别，使用相同的方式定义状态，使用相同的方式使用状态，完全没有理解成本。

\n

在 G6 中，定义 state 时，我们有两种选择：

\n\n

实例化 Graph 时定义 state 样式

\n
const graph = new G6.Graph({\n  container: 'mountNode',\n  width: 800,\n  height: 600,\n  defaultNode: {\n    shape: 'diamond',\n    style: {\n      // 默认状态样式\n      fill: 'blue',\n    },\n  },\n  nodeStateStyles: {\n    hover: {\n      // hover 状态为 true 时的样式\n      fill: '#d3adf7',\n    },\n    running: {\n      // running 状态为 true 时的样式\n      stroke: 'steelblue',\n    },\n  },\n});\n
\n

上面的实例代码中，我们在实例化 Graph 时候，通过 nodeStateStyles 定义了交互状态 hover 和业务状态running，当用户操作过程中，鼠标 hover 到某个节点上时，节点的填充色就会变为指定的颜色，当某个任务状态变为正在执行时，节点的边框就会变为 running 状态定义的颜色。
\"3.gif\"

\n

同理，defaultEdge 中的 style 属性定义了默认状态下边的样式，使用 edgeStateStyles 可以定义不同状态下边的样式。

\n

自定义节点和边时定义 state 样式

\n

下面代码是在自定义节点时候通过 stateStyles 定义的交互状态 hover 和 selected。用户在操作过程中，如果hover到某个节点，则节点的透明度会变为 0.8，如果选中某个节点，选中节点的边框宽度变为 3。

\n
G6.registerNode('customShape', {\n  // 自定义节点时的配置\n  options: {\n    size: 60,\n    style: {\n      lineWidth: 1\n    },\n    stateStyles: {\n      // 鼠标hover状态下的配置\n      hover: {\n        fillOpacity: 0.8\n      },\n      // 选中节点状态下的配置\n      selected: {\n        lineWidth: 3\n      }\n    }\n  }\n}
\n

\"3.gif\"

\n

使用 state

\n

不管使用哪种方式，当我们定义好了 state 以后，使用 graph.setItemState 来使定义的状态生效。

\n

那么，我们该在什么地方使用 graph.setItemState 来使 state 生效呢？一种是直接使用 graph.on 监听事件，在回调中使 state 生效，另一种是在自定义 Behavior 中使 state 生效。

\n

graph.on

\n

在回调函数中使定义的交互状态 hover 生效。

\n
graph.on('node:mouseenter', evt => {\n  const { item } = evt;\n  graph.setItemState(item, 'hover', true);\n});\n\ngraph.on('node:mouseleave', evt => {\n  const { item } = evt;\n  graph.setItemState(item, 'hover', false);\n});\n
\n

Behavior

\n

在自定义 Behavior 中使定义的交互状态 selected 生效。

\n
G6.registerBehavior('nodeClick', {\n  getEvents() {\n    return {\n      'node:click': 'onClick',\n    };\n  },\n  onClick(e) {\n    e.preventDefault();\n    if (!this.shouldUpdate.call(this, e)) {\n      return;\n    }\n    const { item } = e;\n    const graph = this.graph;\n    graph.setItemState(item, 'selected', true);\n  },\n});\n
\n

小结

\n

G6 底层提供了状态管理的能力，通过使用 state，简化了状态管理，降低了用户的认知成本。更多关于 G6 中状态的内容请参考 G6 状态量思考。

","fields":{"slug":"/zh/docs/manual/middle/states/state"},"frontmatter":{"title":"状态 State","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"manual/middle/states/state.zh.md"}}},{"node":{"html":"

Image

\n

G6 内置了 image 节点，其默认样式如下。标签文本位于图片下方。
\"image.png\"

\n

使用方法

\n

如 内置节点 一节所示，配置节点的方式有两种：实例化图时全局配置，在数据中动态配置。

\n

1 实例化图时全局配置

\n

用户在实例化 Graph 时候可以通过 defaultNode 指定 shape 为 'image'，即可使用 image 节点。

\n
const graph = new G6.Graph({\n  container: 'mountNode',\n  width: 800,\n  height: 600,\n  defaultNode: {\n    shape: 'image',\n    label: 'AntV Team',\n    // 其他配置\n  },\n});\n
\n

2 在数据中动态配置

\n

如果需要使不同节点有不同的配置，可以将配置写入到节点数据中。这种配置方式可以通过下面代码的形式直接写入数据，也可以通过遍历数据的方式写入。

\n
const data = {\n  nodes: [{\n    id: 'node0',\n  \timg: 'https://yyb.gtimg.com/aiplat/page/product/visionimgidy/img/demo6-16a47e5d31.jpg?max_age=31536000',\n    shape: 'image',\n    size: 200,\n    label: 'AntV Team',\n    labelCfg: {\n      position: 'bottom'\n    },\n    // 裁剪图片配置\n    clipCfg: {\n      show: false,\n      type: 'circle',\n      r: 15\n    }\n  },\n    ... // 其他节点\n  ],\n  edges: [\n    ... // 边\n  ]\n}
\n

配置项说明

\n

image 节点支持以下的配置项：

\n
img: 'https://yyb.gtimg.com/aiplat/page/product/visionimgidy/img/demo6-16a47e5d31.jpg?max_age=31536000',\nsize: 200,\n  labelCfg: {\n    position: 'bottom'\n  },\n  // 裁剪图片配置\n  clipCfg: {\n    show: false,\n    type: 'circle',\n    // circle\n    r: 15,\n    // ellipse\n    rx: 10,\n    ry: 15,\n    // rect\n    width: 15,\n    height: 15,\n    // 坐标\n    x: 0,\n    y: 0\n  }
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称含义类型备注
img图片 URL 地址Stringimage 节点特有
size图片大小NumberArray
labelCfg文件配置项Object
clipCfg裁剪图片的配置项Object默认不裁剪，image 节点特有
\n

剪裁

\n

clipCfg

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称含义类型备注
type裁剪的图片形状String支持 'circle'、'rect'、'ellipse'
x裁剪图形的 x 坐标Number默认为 0，类型为 'circle'、'rect'、'ellipse' 时生效
y裁剪图形的 y 坐标Number默认为 0，类型为 'circle'、'rect'、'ellipse' 时生效
show是否启用裁剪功能Boolean默认不裁剪，值为 false
r剪裁圆形的半径Number剪裁 type 为 'circle' 时生效
width剪裁矩形的宽度Number剪裁 type 为 'rect' 时生效
height剪裁矩形的长度Number剪裁 type 为 'rect' 时生效
rx剪裁椭圆的长轴半径Number剪裁 type 为 'ellipse' 时生效
ry剪裁椭圆的短轴半径Number剪裁 type 为 'ellipse' 时生效
\n

所有的裁剪类型都提供了默认值。下面代码演示在实例化图时全局配置 clipCfg 的最简形式：

\n
const data = {\n  nodes: [\n    {\n      x: 100,\n      y: 100,\n      shape: 'image',\n      label: 'image',\n    },\n  ],\n};\nconst graph = new G6.Graph({\n  container: 'mountNode',\n  width: 800,\n  height: 600,\n  defaultNode: {\n    // shape: 'image',  // 在数据中已经指定 shape，这里无需再次指定\n    clipCfg: {\n      show: true,\n      type: 'circle',\n    },\n  },\n});\ngraph.data(data);\ngraph.render();\n
\n

裁剪类型

\n
圆形剪裁
\n

circle\n当剪裁配置 clipCfg 中的裁剪类型 type 为 'circle' 时，如下配置可以得到下图效果：

\n
clipCfg: {\n  show: true,\n  type: 'circle',\n  r: 100\n}
\n

\"image.png\"

\n
矩形剪裁
\n

rect

\n

当剪裁配置 clipCfg 中的裁剪类型 type 为 'rect' 时，如下配置可以得到下图效果：

\n
clipCfg: {\n  show: true,\n  type: 'rect',\n  x: -50,\n  y: -50,\n  width: 100, \n  height: 100\n}
\n

\"image.png\"

\n
椭圆剪裁
\n

ellipse

\n

当剪裁配置 clipCfg 中的裁剪类型 type 为 'ellipse' 时，如下配置可以得到下图效果：

\n
clipCfg: {\n  show: true,\n  type: 'ellipse',\n  rx: 100,\n  ry: 60\n}
\n

\"image.png\"

","fields":{"slug":"/zh/docs/manual/middle/elements/nodes/image"},"frontmatter":{"title":"image","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"manual/middle/elements/nodes/image.zh.md"}}},{"node":{"html":"

通用事件、Node事件、Edge事件及Canvas事件回调的参数请参考Behavior文档。

\n

通用事件

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
事件名称描述
click单击鼠标左键或者按下回车键时触发
dblclick双击鼠标左键时触发
mouseenter鼠标移入元素范围内触发，该事件不冒泡，即鼠标移到其后代元素上时不会触发
mousemove鼠标在元素内部移到时不断触发，不能通过键盘触发
mouseout鼠标移出目标元素后触发
mouseover鼠标移入目标元素上方，鼠标移到其后代元素上时会触发
mouseleave鼠标移出元素范围时触发，该事件不冒泡，即鼠标移到其后代元素时不会触发
mousedown鼠标按钮被按下（左键或者右键）时触发，不能通过键盘触发
mouseup鼠标按钮被释放弹起时触发，不能通过键盘触发
contextmenu用户右击鼠标时触发并打开上下文菜单
dragstart当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上
drag当拖拽元素在拖动过程中时触发的事件，此事件作用于被拖拽元素上
dragend当拖拽完成后触发的事件，此事件作用在被拖曳元素上
dragenter当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上
dragleave当拖曳元素离开目标元素的时候触发的事件，此事件作用在目标元素上
drop被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上
keydown按下键盘键触发该事件
keyup释放键盘键触发该事件
touchstart当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发
touchmove当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。
touchend当手指从屏幕上离开的时候触发
\n

Node事件

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
事件名称描述
node:click鼠标左键单击节点时触发
node:dblclick鼠标双击左键节点时触发
node:mouseenter鼠标移入节点时触发
node:mousemove鼠标在节点内部移到时不断触发，不能通过键盘触发
node:mouseout鼠标移出节点后触发
node:mouseover鼠标移入节点上方时触发
node:mouseleave鼠标移出节点时触发
node:mousedown鼠标按钮在节点上按下（左键或者右键）时触发，不能通过键盘触发
node:mouseup节点上按下的鼠标按钮被释放弹起时触发，不能通过键盘触发
node:contextmenu用户在节点上右击鼠标时触发并打开右键菜单
node:dragstart当节点开始被拖拽的时候触发的事件，此事件作用在被拖曳节点上
node:drag当节点在拖动过程中时触发的事件，此事件作用于被拖拽节点上
node:dragend当拖拽完成后触发的事件，此事件作用在被拖曳节点上
node:dragenter当拖曳节点进入目标元素的时候触发的事件，此事件作用在目标元素上
node:dragleave当拖曳节点离开目标元素的时候触发的事件，此事件作用在目标元素上
node:drop被拖拽的节点在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上
\n

Edge事件

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
事件名称描述
edge:click鼠标左键单击边时触发
edge:dblclick鼠标双击左键边时触发
edge:mouseenter鼠标移入边时触发
edge:mousemove鼠标在边上移到时不断触发，不能通过键盘触发
edge:mouseout鼠标移出边后触发
edge:mouseover鼠标移入边上方时触发
edge:mouseleave鼠标移出边时触发
edge:mousedown鼠标按钮在边上按下（左键或者右键）时触发，不能通过键盘触发
edge:mouseup边上按下的鼠标按钮被释放弹起时触发，不能通过键盘触发
edge:contextmenu用户在边上右击鼠标时触发并打开右键菜单
\n

Canvas事件

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
事件名称描述
canvas:click鼠标左键单击画布时触发
canvas:dblclick鼠标双击左键画布时触发
canvas:mouseenter鼠标移入画布时触发
canvas:mousemove鼠标在画布内部移到时不断触发，不能通过键盘触发
canvas:mouseout鼠标移出画布后触发
canvas:mouseover鼠标移入画布上方时触发
canvas:mouseleave鼠标移出画布时触发
canvas:mousedown鼠标按钮在画布上按下（左键或者右键）时触发，不能通过键盘触发
canvas:mouseup画布上按下的鼠标按钮被释放弹起时触发，不能通过键盘触发
canvas:contextmenu用户在画布上右击鼠标时触发并打开右键菜单
canvas:dragstart当画布开始被拖拽的时候触发的事件，此事件作用在被拖曳画布上
canvas:drag当画布在拖动过程中时触发的事件，此事件作用于被拖拽画布上
canvas:dragend当拖拽完成后触发的事件，此事件作用在被拖曳画布上
canvas:dragenter当拖曳画布进入目标元素的时候触发的事件，此事件作用在目标元素上
canvas:dragleave当拖曳画布离开目标元素的时候触发的事件，此事件作用在目标元素上
\n

时机监听

\n

用于监听图的某方法调用前后的时机。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
事件名称描述
beforeadditem调用add / addItem方法之前触发
afteradditem调用add / addItem方法之后触发
beforeremoveitem调用remove / removeItem方法之前触发
afterremoveitem调用remove / removeItem方法之后触发
beforeupdateitem调用update / updateItem方法之前触发
afterupdateitem调用update / updateItem方法之后触发
beforeitemvisibilitychange调用showItem / hideItem方法之前触发
afteritemvisibilitychange调用showItem / hideItem方法之后触发
beforeitemstatechange调用setItemState方法之前触发
afteritemstatechange调用setItemState方法之后触发
beforeitemrefresh调用refreshItem方法之前触发
afteritemrefresh调用refreshItem方法之后触发
beforeitemstatesclear调用clearItemStates方法之前触发
afteritemstatesclear调用clearItemStates方法之后触发
beforelayout布局前触发。调用 render 时会进行布局，因此 render 时会触发。或用户主动调用图的 layout 时触发。
afterlayout布局完成后触发。调用 render 时会进行布局，因此 render 时布局完成后会触发。或用户主动调用图的 layout 时布局完成后触发。
\n

不同自定义事件的回调参数不同，下面针对各个自定义事件的回调参数进行说明。

\n

beforeadditem

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称类型描述
typestring当前添加的类型
modelobjectitem数据模型
\n

afteradditem

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称类型描述
itemItem已经添加的Item实例
modelobjectitem数据模型
\n

beforeremoveitem / afterremoveitem

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称类型描述
itemItem要删除的item实例
\n

beforeupdateitem / afterupdateitem

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称类型描述
itemItem要更新的Item实例
modelobjectitem数据模型
\n

beforeitemvisibilitychange / afteritemvisibilitychange

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称类型描述
itemItem当前操作的Item实例
visibleboolean是否可见，true为可见，false为不可见
\n

beforeitemstatechange / afteritemstatechange

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称类型描述
itemItem当前操作的Item实例
statestring状态
enalbedboolean状态是否可用，true可用，false不可用
\n

beforeitemstatesclear / afteritemstatesclear

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称类型描述
itemItem当前操作的Item实例
statesarraystring
\n

beforeitemrefresh / afteritemrefresh

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称类型描述
itemItem当前操作的Item实例
","fields":{"slug":"/zh/docs/api/Event"},"frontmatter":{"title":"Event","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"api/Event.zh.md"}}},{"node":{"html":"

Concentric Layout places the nodes on concentric circles.

\n

Usage

\n

As the demo below, you can deploy it in layout while instantiating Graph. it can also be used for Subgraph Layout. This algorithm will order the nodes according to the parameters first, then the node in the front of the order will be placed on the center of the concentric circles.

","fields":{"slug":"/en/examples/net/concentricLayout"},"frontmatter":{"title":"Concentric Layout","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"net/concentricLayout/index.en.md"}}},{"node":{"html":"

Concentric 同心圆布局将所有节点放置在同心圆上。

\n

使用指南

\n

G6 内置的 Concentric 同心圆布局可在实例化 Graph 时使用该布局。除此之外，还可以如子图布局所示单独使用布局。该算法首先根据参数指定的排序方式对节点进行排序。排序越靠前，节点将会被放置在越中心的位置。

","fields":{"slug":"/zh/examples/net/concentricLayout"},"frontmatter":{"title":"Concentric 同心圆布局","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"net/concentricLayout/index.zh.md"}}},{"node":{"html":"

Shape API都是在自定义节点（registerNode）或自定义边（registerEdge）的过程中需要部分实现或复写的方法。

\n

友情提示：以下属性和API方法，全部用于自定义节点和边时候使用，即作为G6.registerNode / G6.registerEdge的第二个参数中的方法使用。

\n

用法

\n
import G6 from '@antv/g6'\nG6.registerNode('nodeName', {\n  draw(cfg, group) {\n    // 定义的其他方法，都可以在draw里面调用， 如 drawShape、drawLabel 等。\n    this.drawShape()\n    const labelStyle = this.getLabelStyle(cfg)\n    // ...\n  },\n  drawShape(cfg, group) {\n    // \n  },\n  getLabelStyle(cfg) {\n    // 根据业务返回 label 的样式\n    return {}\n  },\n  update(cfg, item) {\n    // 更新绘制的元素\n\n  }\n}, 'circle')
\n

属性

\n

itemType

\n

元素类型，目前支持node、edge，后续可能会支持group。

\n

labelPosition

\n

文本相对于图形的位置，默认值为center。

\n\n

labelAutoRotate

\n
\n

只有在 registerEdge 时有用。

\n
\n

文本是否跟着线自动旋转，默认值为false。

\n

提示：edge特有。

\n

绘制

\n

绘制部分四个API的参数完全相同，参数说明部分参考draw()方法。

\n

draw(cfg, group)

\n

绘制节点和边，包括节点和边上的文本，返回图形的keyShape。

\n

参数

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称类型是否必选描述
cfgobjecttrue节点或边的配置项
groupG.Grouptrue节点或边的容器
\n

afterDraw(cfg, group)

\n

绘制完成以后的操作，用户可继承现有的节点或边，在afterDraw()方法中扩展图形或添加动画。

\n

更新

\n

update(cfg, item)

\n

更新节点或边，包括节点或边上的文本。

\n

参数

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称类型是否必选描述
cfgobjecttrue节点或边的配置项
itemG6.Itemtrue节点或边的实例
\n

afterUpdate(cfg, item)

\n

更新完以后的操作，如扩展图形或添加动画。

\n

shouldUpdate(type)

\n

是否允许更新。

\n

参数

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称类型是否必选描述
typestringtrue元素类型，node或edge
\n

返回值

\n\n

setState(name, value, item)

\n

设置元素的状态，主要是交互状态，业务状态请在draw()方法中实现。单图形的节点仅考虑selected、active状态，有其他状态需求的用户可以复写该方法。

\n

参数

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称类型是否必选描述
namestringtrue状态名称
valuebooleantrue状态是否可用，为true时可用，否则不可用
itemG6.Itemtrue节点或边的实例
","fields":{"slug":"/zh/docs/api/Shape"},"frontmatter":{"title":"Shape","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"api/Shape.zh.md"}}},{"node":{"html":"

恭喜！你已经成功创建了一个基于 G6 的图可视化应用，并学会了：

\n\n

完整代码见：Tutorial案例代码。

\n

如果你希望继续学习深入的 G6 知识，可以查看 G6 中级教程、G6 高级教程: 关于 G6 的更高阶的功能原理介绍和深入探讨。开发时可通过 G6 API 快速查询。

","fields":{"slug":"/zh/docs/manual/tutorial/epilog"},"frontmatter":{"title":"结语","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/epilog.md"}}},{"node":{"html":"

本章以添加节点及在两个节点之间连线为例进行介绍 G6 中的交互。在阅读本章之前，需要先熟悉以下内容：

\n\n

\"interact-add.gif\"
上图是本文要实现的最终效果。完整 demo 代码参见：动态添加元素。
方下拉菜单中有三个选项，用于切换交互模式 mode：

\n\n

使用多个 mode 的原因
  相同的鼠标操作，在不同场景下有不同的含义。例如：

\n\n

为了区分这些操作的含义，我们使用交互模式 mode 划分不同的场景。

\n

前提代码

\n

下面 HTML 代码是本文的基础代码，后续功能将在这份代码中增量添加。下面代码定义了左上方的下拉菜单，以及后面将会用到图上的初始数据 data。

\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Interactively Add</title>\n</head>\n<body>\n  <!-- 左上方的下拉菜单 -->\n  <select id=\"selector\">\n    <option value=\"default\">默认</option>\n    <option value=\"addNode\">添加节点</option>\n    <option value=\"addEdge\">添加边</option>\n  </select>\n  <div id=\"mountNode\"></div>\n  <script src=\"https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.0/build/g6.js\"></script>\n  <script>\n    // 初始数据\n  \tconst data = {\n      nodes: [{\n        id: 'node1',\n        x: 100,\n        y: 200\n     },{\n        id: 'node2',\n        x: 300,\n        y: 200\n     },{\n        id: 'node3',\n        x: 300,\n        y: 300\n     }],\n      edges: [{\n        id: 'edge1',\n        target: 'node2',\n        source: 'node1'\n     }]\n    };\n  </script>\n</body>\n</html>
\n

配置交互模式

\n

下面代码实例化了图，并配置了交互模式的集合 modes，其中包括 default 默认交互模式、addNode 增加节点交互模式、addEdge 增加边交互模式。每种交互模式中都包含了各自的交互行为，其中 'drag-node'（拖拽节点） 和 'click-select'（点击选中） 是 G6 内置的交互行为，'click-add-node'（点击空白画布添加节点） 和 'click-add-edge'（点击两个节点添加边） 需要我们在后面进行自定义。

\n
// const data = ...\nconst graph = new G6.Graph({\n  container: 'mountNode',\n  width: 500,\n  height: 500,\n  // 交互模式集合\n  modes: {\n    // 默认交互模式\n    default: ['drag-node', 'click-select'],\n    // 增加节点交互模式\n    addNode: ['click-add-node', 'click-select'],\n    // 增加边交互模式\n    addEdge: ['click-add-edge', 'click-select'],\n  },\n});\n\ngraph.data(data);\ngraph.render();\n\n// 监听左上角下拉菜单的变化，根据其变化切换图的交互模式\ndocument.getElementById('selector').addEventListener('change', e => {\n  const value = e.target.value;\n  // 切换交互模式\n  graph.setMode(value);\n});\n
\n

添加节点

\n

在上面的实例中，当选中添加节点按钮时，会切换到添加节点的 Mode 上。实现在点击空白画布时，在点击位置添加节点的方式是通过 G6.registerBehavior 自定义名为 'click-add-node'（名字可以自由设定） 的 Behavior 实现的 。

\n
// 封装点击添加边的交互\nG6.registerBehavior('click-add-node', {\n  // 设定该自定义行为需要监听的事件及其响应函数\n  getEvents() {\n    // 监听的事件为 cnavas:click，响应函数时 onClick\n    return {\n      'canvas:click': 'onClick',\n    };\n  },\n  // 点击事件\n  onClick(ev) {\n    const graph = this.graph;\n    // 在图上新增一个节点\n    const node = graph.addItem('node', {\n      x: ev.x,\n      y: ev.y,\n      id: G6.Util.uniqueId(), // 生成唯一的 id\n    });\n  },\n});\n
\n

添加边

\n

在上面的案例中，当需要在两个节点之间连线时，要先切换到添加边的 Mode 上。下面代码自定义了名为 'click-add-edge'（名字可以自由设定）的 Behavior 实现两个节点之间连线。

\n
// 封装点击添加边的交互\nG6.registerBehavior('click-add-edge', {\n  // 设定该自定义行为需要监听的事件及其响应函数\n  getEvents() {\n    return {\n      'node:click': 'onClick', // 监听事件 node:click，响应函数时 onClick\n      mousemove: 'onMousemove', // 监听事件 mousemove，响应函数时 onMousemove\n      'edge:click': 'onEdgeClick', // 监听事件 edge:click，响应函数时 onEdgeClick\n    };\n  },\n  // getEvents 中定义的 'node:click' 的响应函数\n  onClick(ev) {\n    const node = ev.item;\n    const graph = this.graph;\n    // 鼠标当前点击的节点的位置\n    const point = { x: ev.x, y: ev.y };\n    const model = node.getModel();\n    if (this.addingEdge && this.edge) {\n      graph.updateItem(this.edge, {\n        target: model.id,\n      });\n\n      this.edge = null;\n      this.addingEdge = false;\n    } else {\n      // 在图上新增一条边，结束点是鼠标当前点击的节点的位置\n      this.edge = graph.addItem('edge', {\n        source: model.id,\n        target: point,\n      });\n      this.addingEdge = true;\n    }\n  },\n  // getEvents 中定义的 mousemove 的响应函数\n  onMousemove(ev) {\n    // 鼠标的当前位置\n    const point = { x: ev.x, y: ev.y };\n    if (this.addingEdge && this.edge) {\n      // 更新边的结束点位置为当前鼠标位置\n      this.graph.updateItem(this.edge, {\n        target: point,\n      });\n    }\n  },\n  // getEvents 中定义的 'edge:click' 的响应函数\n  onEdgeClick(ev) {\n    const currentEdge = ev.item;\n    // 拖拽过程中，点击会点击到新增的边上\n    if (this.addingEdge && this.edge == currentEdge) {\n      graph.removeItem(this.edge);\n      this.edge = null;\n      this.addingEdge = false;\n    }\n  },\n});\n
\n

完整代码

\n

完整 demo 代码参见：动态添加元素。

","fields":{"slug":"/zh/docs/manual/advanced/mode-and-custom-behavior"},"frontmatter":{"title":"交互模式 Mode","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"manual/advanced/mode-and-custom-behavior.zh.md"}}},{"node":{"html":"

G6 内置了方形卡片 modelRect 节点，其默认样式如下。标签文本位于卡片下方。\n

\n\n\n


说明 数据中无 description 字段时，则不显示描述信息。

\n

使用方法

\n

如 内置节点 一节所示，配置节点的方式有两种：实例化图时全局配置，在数据中动态配置。

\n

1 实例化图时全局配置

\n

用户在实例化 Graph 时候可以通过 defaultNode 指定 shape 为 'modelRect'，即可使用 modelRect 节点。

\n
const graph = new G6.Graph({\n  container: 'mountNode',\n  width: 800,\n  height: 600,\n  defaultNode: {\n    shape: 'modelRect',\n    // 其他配置\n  },\n});\n
\n

2 在数据中动态配置

\n

如果需要使不同节点有不同的配置，可以将配置写入到节点数据中。这种配置方式可以通过下面代码的形式直接写入数据，也可以通过遍历数据的方式写入。

\n
const data = {\n  nodes: [{\n\t  id: 'node0',\n    shape: 'modelRect',\n    ... // 其他配置\n    },\n    ... // 其他节点\n  ],\n  edges: [\n    ... // 边\n  ]\n}
\n

配置项说明

\n

modelRect 节点支持以下的配置项，对于 Object 类型的配置项将在后面有详细讲解：

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称含义类型备注
size圆的直径NumberArray
stylecircle 默认样式ObjectCanvas 支持的属性
labelCfg文件配置项Object
stateStyles各状态下的样式Object只对 keyShape 起作用
linkPoints相关边的连入点Object默认不显示
icon圆上 icon 配置Object默认不显示 icon
\n
    // 节点中icon配置\n    logoIcon: {\n      // 是否显示icon，值为 false 则不渲染icon\n      show: true,\n      x: 0,\n      y: 0,\n      // icon的地址，字符串类型\n      img: 'https://gw.alipayobjects.com/zos/basement_prod/4f81893c-1806-4de4-aff3-9a6b266bc8a2.svg',\n      width: 16,\n      height: 16,\n      // 用于调整图标的左右位置\n      offset: 0\n    },\n    // 节点中表示状态的icon配置\n    stateIcon: {\n      // 是否显示icon，值为 false 则不渲染icon\n      show: true,\n      x: 0,\n      y: 0,\n      // icon的地址，字符串类型\n      img: 'https://gw.alipayobjects.com/zos/basement_prod/300a2523-67e0-4cbf-9d4a-67c077b40395.svg',\n      width: 16,\n      height: 16,\n      // 用于调整图标的左右位置\n      offset: -5\n    }
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称含义类型备注
sizemodelRect的宽高NumberArray
stylemodelRect默认样式ObjectCanvas 支持的属性
labelCfg文件配置项Object
stateStyles各状态下的样式Object只对 keyShape 起作用
linkPointsmodelRect上的链接点Object默认不显示
preRect左侧的小矩形ObjectmodelRect 节点特有
logoIcon左侧的logo图标ObjectmodelRect 节点特有
stateIcon右侧的状态图标ObjectmodelRect 节点特有
\n

样式属性 style

\n

Object 类型。通过 style 配置来修改节点的填充色、描边等属性。下面代码演示在实例化图时全局配置方法中配置 style，使之达到如下图效果。
\"image.png\"

\n
const data = {\n  nodes: [\n    {\n      x: 100,\n      y: 100,\n      shape: 'modelRect',\n      label: 'modelRect',\n    },\n  ],\n};\nconst graph = new G6.Graph({\n  container: 'mountNode',\n  width: 800,\n  height: 600,\n  defaultNode: {\n    // shape: 'modelRect',  // 在数据中已经指定 shape，这里无需再次指定\n    size: [200, 80],\n    style: {\n      fill: '#f0f5ff',\n      stroke: '#adc6ff',\n      lineWidth: 2,\n    },\n  },\n});\ngraph.data(data);\ngraph.render();\n
\n

标签文本配置 labelCfg

\n

Object 类型。通过 labelCfg 配置标签文本。基于上面 样式属性 style 中的代码，下面代码在 defaultNode 中增加了 labelCfg 配置项进行文本的配置，使之达到如下图效果。
\"image.png\"

\n
const data = {\n  // ... data 内容\n};\nconst graph = new G6.Graph({\n  // ... 图的其他属性\n  defaultNode: {\n    // ... 节点其他属性\n    labelCfg: {\n      style: {\n        fill: '#9254de',\n        fontSize: 18,\n      },\n    },\n  },\n});\n// ...\n
\n

边的连入点 linkPoints

\n

Object 类型。通过配置 linkPoints ，可以指定 modelRect 周围「上、下、左、右」四个方向上边的连入点。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称含义类型备注
top是否显示上部的连接点Boolean默认为 false
bottom是否显示底部的连接点Boolean默认为 false
left是否显示左侧的连接点Boolean默认为 false
right是否显示右侧的连接点Boolean默认为 false
size连接点的大小Number默认为 3
fill连接点的填充色String默认为 '#``72CC4A'
stroke连接点的边框颜色String默认为 '#``72CC4A'
lineWidth连接点边框的宽度Number默认为 1
\n

基于上面 样式属性 style 中的代码，下面代码在 defaultNode 中增加了 linkPoints 配置项进行连入点的配置，使之达到如下图效果。
\"image.png\"

\n
const data = {\n  // ... data 内容\n};\nconst graph = new G6.Graph({\n  // ... 图的其他属性\n  defaultNode: {\n    // ... 节点其他属性\n    linkPoints: {\n      top: true,\n      bottom: true,\n      left: true,\n      right: true,\n      size: 5,\n      fill: '#fff',\n    },\n  },\n});\n// ...\n
\n

左侧矩形 preRect

\n

通过 preRect 可以配置左侧的小矩形形状。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称含义类型备注
show是否显示左侧小矩形Boolean默认为 true
width左侧小矩形的宽度Number默认为 4
fill左侧小矩形的填充色String默认为 '#40a9ff'
radius左侧小矩形的圆角弧度Number默认为 2
\n

基于上面 样式属性 style 中的代码，下面代码在 defaultNode 中增加了 preRect 配置项进行左侧小矩形的配置，使之达到如下图效果。
\"image.png\"

\n
const data = {\n  // ... data 内容\n};\nconst graph = new G6.Graph({\n  // ... 图的其他属性\n  defaultNode: {\n    // ... 节点其他属性\n    preRect: {\n      // 设置为false，则不显示\n      show: true,\n      fill: '#f759ab',\n      width: 8,\n    },\n  },\n});\n// ...\n
\n

图标 logoIcon / stateIcon

\n

通过 logoIcon 和 stateIcon 可以配置左侧的 logo 小图标和右边的状态小图标，这两个的配置项完全相同。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称含义类型备注
show是否显示图标Boolean默认为 true
img图标图片String
- 左侧图标 logoIcon 的图片默认为 \"image.png\"
- 右侧图标 stateIcon 的图片默认为\"image.png\"
width图标的宽度Number默认为 16
height图标的高度Number默认为 16
offset图标的左右偏移量Number
- 左侧图标 logoIcon 的 offset 默认为 0
- 右侧图标 stateIcon 的 offset 默认为 -5
\n

基于上面 样式属性 style 中的代码，下面代码在 defaultNode 中增加了 logoIcon 和 stateIcon 配置项进行左右图标的配置，使之达到如下图效果，左侧图标不显示，右侧图标更换图片。
\"image.png\"

\n
const data = {\n  // ... data 内容\n};\nconst graph = new G6.Graph({\n  // ... 图的其他属性\n  defaultNode: {\n    // ... 节点其他属性\n    logoIcon: {\n      show: false,\n    },\n    stateIcon: {\n      show: true,\n      img:\n        'https://gw.alipayobjects.com/zos/basement_prod/c781088a-c635-452a-940c-0173663456d4.svg',\n    },\n  },\n});\n// ...\n
","fields":{"slug":"/zh/docs/manual/middle/elements/nodes/modelRect"},"frontmatter":{"title":"modelRect","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"manual/middle/elements/nodes/modelRect.zh.md"}}},{"node":{"html":"

简介

\n

图布局是指图中节点的排布方式，根据图的数据结构不同，布局可以分为两类：一般图布局、树图布局。G6 为这两类图都内置了一些常用的图布局算法。使用内置的图布局可以完成布局的参数、方法、数据的切换等。

\n

除了内置布局方法外，一般图布局还支持 自定义布局 机制。

\n

事实上，G6 的布局是自由的，内置布局算法仅仅是操作了数据中节点的 x 和 y 值。因此，除了使用内置布局以及自定义的一般图布局外，用户还可以使用外部图布局算法，计算节点位置后赋值到数据中节点的 x 和 y 字段上，G6 便可以根据该位置信息进行绘制。

\n

本文将逐一介绍内置的布局算法，及其使用方式。

\n

G6 布局方法总览

\n

一般图 Graph

\n\n

树图 TreeGraph

\n\n

一般图 Graph

\n

配置一般图布局

\n

用户可以通过在实例化图时使用图的配置项 layout 指定布局方法。下面代码在实例化图时设置了布局方法为 type: 'force'，即经典力导向图布局。并设置了参数 preventOverlap: true 和 nodeSize: 30，表示希望节点不重叠。节点大小 nodeSize 用于算法中判断节点是否重叠，更多配置项见 Graph 各布局的配置项。

\n
const graph = new G6.Graph({\n  ...                      // 其他配置项\n  layout: {                // Object，可选，布局的方法及其配置项，默认为 random 布局。\n  \ttype: 'force',\n    preventOverlap: true,\n    nodeSize: 30,\n    ...                    // 其他配置\n  }\n});
\n

当实例化图时没有配置布局时：

\n\n

一般图布局方法

\n

图布局通用 API：Layout API。

\n

Random

\n\n


描述：随机布局。\n
API：Random API\n
参数：

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数名类型示例默认值说明
centerArray[ 0, 0 ]图的中心随机布局的中心
widthNumber300图的宽
heightNumber300图的高
\n

Force

\n\n


描述：经典力导向布局。\n
API：Force API\n
参数：与 d3 的力导布局参数相对应。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数名类型示例默认值说明
centerArray[ 0, 0 ]图的中心随机布局的中心
linkDistanceNumberFunction示例1: 50 
示例2:
d => {
  // d 是一条边
  if (d.id === 'edge1') {
    return 100;
  }
  return 50;
}		50
nodeStrengthNumberFunction示例1: -30 
示例2:
d => {
  // d 是一个节点
  if (d.id === 'node1') {
    return -100;
  }
  return -30;
}		null
edgeStrengthNumber示例1: 1 
示例2:
d => {
  // d 是一个节点
  if (d.id === 'node1') {
    return 10;
  }
  return 1;
}		null边的作用力，默认根据节点的出入度自适应。可以使用回调函数的形式对不同对节点定义不同边作用力（如示例2）
preventOverlapBooleanfalsefalse是否防止重叠，必须配合属性 nodeSize ，只有设置了与当前图节点大小相同的 nodeSize 值，才能够进行节点重叠的碰撞检测。若未设置 nodeSize ，则根据节点数据中的 size 进行碰撞检测。若二者都未设置，则默认以 10 为节点大小进行碰撞检测
nodeSizeArray Number20undefined
nodeSpacing

3.1.6 后支持		NumberFunction示例 1 : 10
示例 2 : 
d => {
  // d 是一个节点
  if (d.id === 'node1') {
    return 100;
  }
  return 10;
}		0
alphaDecayNumber0.030.028迭代阈值的衰减率。[0, 1]，0.028 对应迭代书为 300
alphaMinNumber0.030.001停止迭代的阈值
alphaNumber0.10.3当前阈值
collideStrengthNumber0.81防止重叠的力强度，[0, 1]。
forceSimulationObjectnull自定义 force 方法，若不指定，则使用 d3 的方法。
onTickFunction{}每一次迭代的回调函数
onLayoutEndFunction{}布局完成后的回调函数
\n

Fruchterman

\n\n


描述：Fruchterman 布局，一种力导布局。\n
API：Fruchterman API\n
参数：

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数名类型示例默认值说明
centerArray[ 0, 0 ]图的中心随机布局的中心
maxIterationNumber10001000最大迭代次数
gravityNumber1010重力大小，影响布局的紧凑程度
speedNumber11每次迭代节点移动的速度。速度太快可能会导致强烈震荡
clusteringBooleanfalsefalse是否按照聚类布局
clusterGravityNumber3010聚类内部的重力大小，影响聚类的紧凑程度
\n

\n

Circular

\n\n\n\n


描述：环形布局。\n
API：Circular API\n
参数：

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数名类型示例/可选值默认值说明
centerArray[ 0, 0 ]图的中心随机布局的中心
radiusNumber50null圆的半径。若设置了 radius，则 startRadius 与 endRadius 不生效
startRadiusNumber10null螺旋状布局的起始半径
endRadiusNumber100null螺旋状布局的结束半径
clockwiseBooleantruetrue是否顺时针排列
divisionsNumber31节点在环上的分段数（几个段将均匀分布），在 endRadius - startRadius != 0 时生效
orderingStringnull'topology''degree'
angleRatioNumber11从第一个节点到最后节点之间相隔多少个 2*PI
\n

\n

Radial

\n\n


描述：辐射状布局。\n
API：Radial API\n
参数：

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数名类型示例默认值说明
centerArray[ 0, 0 ]图的中心随机布局的中心
linkDistanceNumber5050边长
maxIterationNumber10001000停止迭代到最大迭代数
focusNodeStringObject'node1'null
unitRadiusNumber10100每一圈距离上一圈的距离。默认填充整个画布，即根据图的大小决定
preventOverlapBooleanfalsefalse是否防止重叠，必须配合属性 nodeSize ，只有设置了与当前图节点大小相同的 nodeSize 值，才能够进行节点重叠的碰撞检测。
3.1.6 后支持：
若未设置 nodeSize，则将会根据数据中节点的 size 字段数值进行碰撞检测计算。若二者皆未设置，则以节点大小为 10 进行计算。
maxPreventOverlapIterationNumber500200防止重叠步骤的最大迭代次数
nodeSizeNumber1010节点大小（直径）。用于防止节点重叠时的碰撞检测。
3.1.6 后支持：
若未设置则使用数据中节点的 size 字段数值进行碰撞检测计算。若二者皆未设置，则以节点大小为 10 进行计算。
nodeSpacing
3.1.6 后支持		NumberFunction示例 1 : 10
示例 2 : 
d => {
  // d 是一个节点
  if (d.id === 'node1') {
    return 100;
  }
  return 10;
}		0
strictRadialBooleantruefalse是否必须是严格的 radial 布局，即每一层的节点严格布局在一个环上。preventOverlap 为 true 时生效。详见 Radial-strictRadial API
- 当 preventOverlap 为 true，且 strictRadial 为 false 时，有重叠的节点严格沿着所在的环展开，但在一个环上若节点过多，可能无法完全避免节点重叠。
- 当 preventOverlap 为 true，且 strictRadial 为 true 时，允许同环上重叠的节点不严格沿着该环布局，可以在该环的前后偏移以避免重叠。
\n

\n

MDS

\n

\"image.png\"
描述：高维数据降维算法布局。
API：MDS API
参数：

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数名类型示例默认值说明
centerArray[ 0, 0 ]图的中心随机布局的中心
linkDistanceNumber5050边长
\n

\n

Dagre

\n

\"image.png\"
描述：层次布局。
API：Dagre API
参数：

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数名类型示例 / 可选值默认值说明
rankdirString'TB' / 'BT' / 'LR' / 'RL''TB'layout 的方向。T：top；B：bottom；L：left；R：right
alignString'UL' / 'UR' / 'DL' / 'DR''UL'节点对齐方式。U：upper；D：down；L：left；R：right
nodesepNumber4050节点水平间距（px）。优先级高于 nodesepFunc
ranksepNumber4050层间距（px）。优先级高于 ranksep``Func
nodesepFunc

3.1.6 后支持		Functiond => {
  // d 是一个节点
  if (d.id === 'node1') {
    return 100;
  }
  return 10;
}		undefined节点水平间距（px）的回调函数，通过该参数可以对不同节点设置不同的节点间距。优先级低于 nodesep，即若设置了 nodesep，则 nodesepFunc 不生效
ranksepFunc

3.1.6 后支持		Functiond => {
  // d 是一个节点
  if (d.id === 'node1') {
    return 100;
  }
  return 10;
}		undefined层间距（px）的回调函数，通过该参数可以对不同节点设置不同的层间距。优先级低于 ranksep，即若设置了 ranksep，则 ranksepFunc 不生效
controlPointsBooleantruetrue是否保留布局连线的控制点
\n

\n

Concentric

\n

\"image.png\"
注：该算法参考 cytoscape.js，遵守 MIT 开源协议。
描述：同心圆布局。
API：Concentric API
参数：

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数名类型示例 / 可选值默认值说明
centerArray[ 0, 0 ]图的中心随机布局的中心
nodeSizeNumber3030节点大小（直径）。用于防止节点重叠时的碰撞检测
minNodeSpacingNumber1010环与环之间最小间距，用于调整半径
preventOverlapBooleanfalsefalse是否防止重叠，必须配合属性 nodeSize ，只有设置了与当前图节点大小相同的 nodeSize 值，才能够进行节点重叠的碰撞检测。若未设置 nodeSize ，则将根据节点数据中的 size 进行碰撞检测。若二者都未设置，则默认以 30 为节点大小进行碰撞检测
sweepNumberMath.PIundefined第一个节点与最后一个节点之间的弧度差
equidistantBooleanfalsefalse环与环之间的距离是否相等
startAngleNumber3.143 / 2 * Math.PI开始放置节点的弧度
clockwiseBooleanfalsefalse是否按照顺时针顺序
maxLevelDiffNumber0.5undefined每一层同心值的求和。若为 undefined，则将会被设置为 maxValue / 4 ，其中 maxValue 为最大的排序依据的属性值。例如，若 sortBy='degree'，则 maxValue 为所有节点中度数最大的节点的度数
sortByString'degree''property1''weight'
\n

\n

Grid

\n

\"image.png\"
注：该算法参考 cytoscape.js，遵守 MIT 开源协议。
描述：网格布局。
API：Grid API
参数：

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数名类型示例 / 可选值默认值说明
beginArray[ 0, 0 ][ 0, 0 ]网格开始位置（左上角）
preventOverlapBooleanfalsefalse是否防止重叠，必须配合属性 nodeSize ，只有设置了与当前图节点大小相同的 nodeSize 值，才能够进行节点重叠的碰撞检测。若未设置 nodeSize ，则将根据节点数据中的 size 进行碰撞检测。若二者都未设置，则默认以 30 为节点大小进行碰撞检测
preventOverlapPaddingNumber1010避免重叠时节点的间距 padding。preventOverlap 为 true 时生效
nodeSizeNumber3030节点大小（直径）。用于防止节点重叠时的碰撞检测
condenseBooleanfalsefalse为 false 时表示利用所有可用画布空间，为 true 时表示利用最小的画布空间
rowsNumber5undefined网格的行数，为 undefined 时算法根据节点数量、布局空间、cals（若指定）自动计算
calsNumber5undefined网格的列数，为 undefined 时算法根据节点数量、布局空间、rows（若指定）自动计算
sortByString'degree''property1''weight'
\n

\n

树图 TreeGraph

\n

由于树图特殊性，G6扩展出了 TreeGraph ，详细文档请见：TreeGraph API。树布局是一种能很好展示有一定层次结构数据的布局方式。推荐使用 G6.TreeGraph 实现。

\n

\n

配置树图布局

\n

与一般图 Graph 配置方法相似，通过实例化图时配置 layout 属性设置树的布局，还可以通过 modes 属性为树配置 展开/收缩行为。以下代码声明了一个实例，定义了布局为从左到右结构的基础树图，并且定义了展开收缩行为。

\n
const graph = new G6.TreeGraph({\n  container: 'mountNode',\n  modes: {\n    default: [\n      {\n        // 定义展开/收缩行为\n        type: 'collapse-expand',\n      },\n      'drag-canvas',\n    ],\n  },\n  // 定义布局\n  layout: {\n    type: 'dendrogram', // 布局类型\n    direction: 'LR', // 自左至右布局，可选的有 H / V / LR / RL / TB / BT\n    nodeSep: 50, // 节点之间间距\n    rankSep: 100, // 每个层级之间的间距\n  },\n});\n
\n

\n

\n

\n

树图布局方法

\n

\n

compactBox

\n

描述：紧凑树布局。从根节点开始，同一深度的节点在同一层，并且布局时会将节点大小考虑进去。
\"compact-box.png\"
API：CompactBox API
参数：

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数名类型示例 / 可选值默认值说明
directionString'TB' / 'BT' / 'LR' / 'RL' / 'H' / 'V''LR'layout 的方向。
- TB —— 根节点在上，往下布局
- BT —— 根节点在下，往上布局
\"image.png\"      \"image.png\">
（左）TB。（右）BT。
- LR —— 根节点在左，往右布局
- RL —— 根节点在右，往左布局
\"image.png\"             \"image.png\">
（左）LR。（右）RL。
- H —— 根节点在中间，水平对称布局
- V —— 根节点在中间，垂直对称布局
\"image.png\"          \"image.png\"
> （左）H。（右）V。
getIdFunction(d) => {
  // d 是一个节点
  return d.id;
}		undefined节点 id 的回调函数
getHeightFunction(d) => {
  // d 是一个节点
  return 10;
}		undefined节点高度的回调函数
getWidthFunction(d) => {
  // d 是一个节点
  return 20;
}		undefined节点宽度的回调函数
getVGapFunction(d) => {
  // d 是一个节点
  return 100;
}		undefined节点纵向间距的回调函数
getHGapFunction(d) => {
// d 是一个节点
  return 50;
}		undefined节点横向间距的回调函数
radialBooleantruefalse是否按照辐射状布局。若 radial 为 true，建议 direction 设置为 'LR' 或 'RL'：\"image.png\"
\n

\n

dendrogram

\n

描述：生态树布局。不管数据的深度多少，总是叶节点对齐。不考虑节点大小，布局时将节点视为1个像素点。
\"dendrogram-lr.png\"
API：Dendrogram API
参数：

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数名类型示例 / 可选值默认值说明
directionString'TB' / 'BT' / 'LR' / 'RL' / 'H' / 'V''LR'layout 的方向。
- TB —— 根节点在上，往下布局
- BT —— 根节点在下，往上布局
\n

\"image.png\"      \"image.png\"
> （左）TB。（右）BT。

\n\n

\n

indented

\n

描述：缩进树布局。每个元素会占一行/一列。
\"indented.png\"

\n

API：Indented API
参数：

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数名类型示例 / 可选值默认值说明
directionString'LR' / 'RL' / 'H''LR'layout 的方向。
'LR' —— 根节点在左，往右布局（下图左）
'RL' —— 根节点在右，往左布局（下图中）
'H' —— 根节点在中间，水平对称布局（下图右）
indented1indented2indented3
indentNumber8020列间间距
getHeightFunction(d) => {
  // d 是一个节点
  return 10;
}		undefined节点高度的回调函数
getWidthFunction(d) => {
  // d 是一个节点
  return 20;
}		undefined节点宽度的回调函数
getSideFunction(d) => {
  // d 是一个节点
  return 'left';
}		undefined节点放置在根节点左侧或右侧的回调函数，仅对与根节点直接相连的节点有效，设置后将会影响被设置节点的所有子孙节点
\n

\n

mindmap

\n

描述：脑图布局。深度相同的节点将会被放置在同一层，与 compactBox 不同的是，布局不会考虑节点的大小。
\"image.png\"
API：Mindmap API
参数：

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数名类型示例 / 可选值默认值说明
directionString'H' / 'V''H'layout 的方向。
- H：horizontal（水平）—— 根节点的子节点分成两部分横向放置在根节点左右两侧
\"image.png\"
- V：vertical （竖直）—— 将根节点的所有孩子纵向排列
\"image.png\"
getHeightFunction(d) => {
  // d 是一个节点
  return 10;
}		undefined节点高度的回调函数
getWidthFunction(d) => {
  // d 是一个节点
  return 20;
}		undefined节点宽度的回调函数
getVGapFunction(d) => {
  // d 是一个节点
  return 100;
}		18节点纵向间距的回调函数
getHGapFunction(d) => {
  // d 是一个节点
  return 50;
}		18节点横向间距的回调函数
getSideStringFunction(d) => {
  // d 是一个节点
  return 'left';
}		'right'
\n

\n

布局的切换机制

\n

G6 提供了两种关于布局的切换机制：

\n\n

\n

布局方法或参数切换

\n

接口定义：

\n
/**\n * 更换布局或布局参数\n * @param {String | object} cfg 新布局配置项\n * 若 cfg 为 String 或含有 type 字段，且与之前的布局方法不同时将会更换布局\n * 否则只是更新原有布局的参数\n */\nupdateLayout(cfg);\n
\n

布局方法切换：
若参数 cfg 为 String 或是含有 type 字段的对象，且与之前的布局方法名不同时将会更换布局。

\n

布局参数切换：
若参数 cfg 是对象且其中不含有 type 字段，或指定的布局方法名称与之前的布局方法相同，则保持原有布局方法，仅更新该布局的参数。

\n

\n

数据切换

\n

接口定义：

\n
/**\n * 更改源数据，根据新数据重新渲染视图\n * @param {object} data 源数据\n * @return {object} this\n */\nchangeData(data);\n
\n

\n

切换示例

\n

\n

期待效果

\n

初始化时使用默认 random 布局，2000 ms 后更换为允许节点重叠的 force 布局，4000 ms 后更换为不允许节点重叠的 force 布局，6000 ms 后更换数据为 data2。
\"tutorial-layout.gif\"\n

\n

完整代码

\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <title>Tutorial Layout Demo</title>\n</head>\n<body>\n    <div id=\"mountNode\"></div>\n<script src=\"https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.0/build/g6.js\"></script>\n<script src=\"https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js\"></script>\n    <script>\n      const data = {\n        nodes: [\n          { id: '0', label: '0' },\n          { id: '1', label: '1' },\n          { id: '2', label: '2' },\n          { id: '3', label: '3' },\n          { id: '4', label: '4' }\n        ], edges: [\n          { source: '0', target: '1' },\n          { source: '0', target: '2' },\n          { source: '0', target: '3' },\n          { source: '0', target: '4' },\n          { source: '1', target: '2' },\n          { source: '1', target: '3' }\n        ]\n      };\n\n      const data2 = {\n        nodes: [\n          { id: '0', label: '0' },\n          { id: '1', label: '1' },\n          { id: '2', label: '2' }\n        ], edges: [\n          { source: '0', target: '1' },\n          { source: '0', target: '2' }\n        ]\n      };\n\n      const graph = new G6.Graph({\n        container: 'mountNode',  // String | HTMLElement，必须，容器 id 或容器本身\n        width: 300,              // Number，必须，图的宽度\n        height: 300,             // Number，必须，图的高度\n        animate: true            // Boolean，可选，切换布局时是否使用动画过度\n      });\n\n      // 读取数据和渲染\n      graph.data(data);\n      graph.render();\n\n      // 2000 ms 后切换为允许节点重叠的 force 布局\n      setTimeout(() => {\n        graph.updateLayout('force');   // 参数为 String 代表布局名称\n      }, 8000);\n\n      // 4000 ms 后切换为不允许节点重叠且边长为 100 的 force 布局。\n      setTimeout(() => {\n        graph.updateLayout({\n          type: 'force',               // 布局名称\n          preventOverlap: true,        // 布局参数，是否允许重叠\n          nodeSize: 40,                // 布局参数，节点大小，用于判断节点是否重叠\n          linkDistance: 100            // 布局参数，边长\n        });\n      }, 10000);\n\n      // 6000 ms 后切换数据为 data2\n      setTimeout(() => {\n        graph.changeData(data2);\n      }, 12000);\n\t\t</script>\n\t</body>\n</html>
\n

\n

子图布局

\n

目前，子图布局独立与全局布局的思路，与 graph 不挂钩，直接使用实例化布局方法的方式，灌入子图数据，通过布局将位置写到相应数据中。这种机制还可供外部的全局布局使用，即使不用 G6 渲染，也可以计算节点布局后的位置。但与萧庆讨论后，决定这种方式暂时不透出够用户。在子图布局上，这种机制后续需要修改，并与全局布局思路统一（ graph，controller ）。

\n

\n

使用方法

\n
// 实例化布局\nconst subgraphLayout = new G6.Layout['force']({\n  center: [500, 450],\n});\n\n// 初始化布局，灌入子图数据\nsubgraphLayout.init({\n  nodes: subGraphNodes,\n  edges: subGraphEdges,\n});\n\n//执行布局\nsubgraphLayout.execute();\n\n// 图实例根据数据更新节点位置\ngraph.positionsAnimate();\n
","fields":{"slug":"/zh/docs/manual/middle/layout"},"frontmatter":{"title":"使用布局 Layout","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"manual/middle/layout.zh.md"}}},{"node":{"html":"

Classical MDS（Multidemensional Scaling）is an algorithm for high dimensional data projection. Relational data layout problem can be regarded as projecting high dimensional data onto a 2D visual space.

\n

Usage

\n

As the demo below, you can deploy it in layout while instantiating Graph. it can also be used for Subgraph Layout. By tuning the parameters, you can adjust the edge length.

","fields":{"slug":"/en/examples/net/mdsLayout"},"frontmatter":{"title":"MDS Layout","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"net/mdsLayout/index.en.md"}}},{"node":{"html":"

MDS（Multidemensional Scaling）本是用于高维数据降维的算法。关系图数据可视化中的布局可以看作是高维数据降维到二维屏幕空间中。

\n

使用指南

\n

G6 内置的 MDS 布局可在实例化 Graph 时使用该布局。除此之外，还可以如子图布局所示单独使用布局。该算法可配置边的长度。

","fields":{"slug":"/zh/examples/net/mdsLayout"},"frontmatter":{"title":"MDS 布局","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"net/mdsLayout/index.zh.md"}}},{"node":{"html":"

Group 类似于 SVG 中的 <g> 标签：元素 g 是用来组合图形对象的容器。在 group 上添加变换（例如剪裁、旋转、放缩、平移等）会应用到其所有的子元素上。在 group 上添加属性（例如颜色、位置等）会被其所有的子元素继承。此外， group 可以多层嵌套使用，因此可以用来定义复杂的对象。关于 Group 更详细的介绍请参考《图形分组 Group》。

\n

声明实例

\n
const group = new Group(cfgs);\n
\n

实例方法

\n

addGroup(param, cfg)

\n

向分组中添加新的分组。

\n

参数

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称类型说明
paramFunctionObject
cfgObject
\n

用法

\n
group.addGroup({\n  id: 'groupId',\n});\n
\n

addShape(type, cfgs)

\n

向分组中添加新的图形。
注意：在分组上添加的clip， transform等会影响到该分组中的所有图形。G支持的图形及其绘图属性请见shape小节。

\n

参数

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称类型说明
typeString图元素类型，值可以为：rect、circle、fan、ellipse、marker、image等，具体参考支持的Shape类型及属性
cfgObject图元素的属性
\n

用法

\n
group.addShape('rect', {\n  attrs: {\n    fill: 'red',\n    shadowOffsetX: 10,\n    shadowOffsetY: 10,\n    shadowColor: 'blue',\n    shadowBlur: 10,\n    opacity: 0.8,\n  },\n});\n
\n

contain(child)

\n

该分组是否包含此元素。
返回值: boolean

\n

参数

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称类型说明
childGroupShape
\n

用法

\n
const has = group.contain(child);\n
\n

find(fn)

\n

根据指定条件返回对应元素，只返回符合条件的第一个元素。

\n

参数

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称类型说明
fnFunction自定义回调函数
\n

用法

\n
const child = group.find(function(item) {\n  return item.attr('fill') === 'red'; // 找到首个填充为红色的图形\n});\n
\n

findById(id)

\n

根据元素ID返回对应的实例。
返回值：Object。

\n

参数

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称类型说明
idStringGroup 实例ID
\n

用法

\n
const group1 = group.findById('group1');\n
\n

findAll(fn)

\n

返回所有符合条件的元素。
返回值: [ Object ]

\n

参数

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称类型说明
fnFunction自定义回调函数
\n

用法

\n
const children = group.findAll(function(item) {\n  return item.get('id') < 10; // 获取所有id小于10的元素\n});\n
\n

getShape(x,y)

\n

返回该坐标点最上层的元素。
返回值: Object

\n

参数

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称类型说明
xnumberx 坐标
ynumbery 坐标
\n

用法

\n
// 获取 (10, 30) 坐标点上层的元素\nconst element = group.getShape(10, 30);\n
\n

getFirst()

\n

获取该分组的第一个子元素。
返回值: Object

\n

用法

\n
const child = group.getFirst();\n\n// 等价于\nconst childrens = group.get('children');\nconst child = childrens[0];\n
\n

getLast()

\n

获取该分组的最后一个子元素。
返回值: Object

\n

用法

\n
const child = group.getLast();\n\n// 等价于\nconst childrens = group.get('children');\nconst child = childrens[childrens.length - 1];\n
\n

getChildByIndex(index）

\n

返回第 index 个子元素，从0开始计数。
返回值: Object

\n

参数

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称类型说明
indexnumber子元素的序号，默认为 0
\n

用法

\n
const child = group.getChildByIndex(2);\n
\n

removeChild(child)

\n

从分组中删除一个分组或一个图形。

\n

参数说明

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称类型说明
childGroupShape
\n

用法

\n
group.removeChild(child);\n
\n

sort()

\n

排序方法。
一般用于在设置子元素层叠顺序时使用。

\n

典型使用场景：通过 group.addShape() 添加 shape 时，添加的每个 shape 都设置了 index，在最后调用 group.sort() 可以对添加的 shape 进行排序。

\n

用法

\n
group.sort();\n
\n

clear()

\n

清除该组的所有子元素。

\n

用法

\n
group.clear();\n
","fields":{"slug":"/zh/docs/api/Group"},"frontmatter":{"title":"Group","order":8,"icon":null},"parent":{"__typename":"File","relativePath":"api/Group.zh.md"}}},{"node":{"html":"
\n

Feature 自 G6 3.1.2 开始支持自定义节点分组的标题了，可以渲染带有标题的分组。

\n
\n

对于熟悉图可视化类库的用户来说，节点分组可能是比较实用的一个功能。自 G6 3.0.5 版本开始，G6 加入了节点分组的功能，详情参考Demo。
\"group2.gif\"

\n

数据结构

\n

新增节点分组功能时，尽量保持了 G6 数据结构的稳定性。为了体现分组的特性，我们在 nodes 数据项中加入了 groupId 属性，另外新增了 groups 字段，用于表示数据中所包括的分组及各分组之间的层级关系。

\n

当 groups 中的对象包括 title 属性字段时，表示要渲染带有标题的分组，title 字段的类型可以是 string 或 object：

\n\n
{\n  nodes: [\n    {\n      id: 'node1',\n      label: 'node1',\n      groupId: 'group1',\n      x: 100,\n      y: 100\n    },\n    {\n      id: 'node2',\n      label: 'node2',\n      groupId: 'group1',\n      x: 150,\n      y: 100\n    },\n    {\n      id: 'node3',\n      label: 'node3',\n      groupId: 'group2',\n      x: 300,\n      y: 100\n    },\n  ],\n  edges: [\n    {\n      source: 'node1',\n      target: 'node2'\n    }\n  ],\n  groups: [\n    {\n      id: 'group1',\n      title: {\n      \ttext: '第一个分组',\n        stroke: '#444',\n        offsetX: 0,\n        offsetY: 0\n      },\n      parentId: 'p1'\n    },\n    {\n      id: 'group2',\n      parentId: 'p1'\n    },\n    {\n      id: 'p1'\n    }\n  ]\n}
\n

如何渲染 group

\n

当 nodes 中存在 groupId 属性字段时，在渲染过程中，G6 就会自动去渲染分组，当存在 groups 属性时，G6 就会自定去判断各分组之间的层级关系，并渲染出嵌套的分组。但当没有使用任何布局的时候，需要在 nodes 中指定各个阶段的坐标信息，即阶段的 x 和 y 属性值。

\n
const data = {\n  nodes: [\n    {\n      id: 'node6',\n      groupId: 'group3',\n      label: 'rect',\n      x: 100,\n      y: 300,\n    },\n    {\n      id: 'node1',\n      label: 'fck',\n      groupId: 'group1',\n      x: 100,\n      y: 100,\n    },\n    {\n      id: 'node9',\n      label: 'noGroup1',\n      groupId: 'p1',\n      x: 300,\n      y: 210,\n    },\n    {\n      id: 'node2',\n      label: 'node2',\n      groupId: 'group1',\n      x: 150,\n      y: 200,\n    },\n    {\n      id: 'node3',\n      label: 'node3',\n      groupId: 'group2',\n      x: 300,\n      y: 100,\n    },\n    {\n      id: 'node7',\n      groupId: 'p1',\n      label: 'node7-p1',\n      x: 200,\n      y: 200,\n    },\n    {\n      id: 'node10',\n      label: 'noGroup',\n      groupId: 'p2',\n      x: 300,\n      y: 210,\n    },\n  ],\n  edges: [\n    {\n      source: 'node1',\n      target: 'node2',\n    },\n    {\n      source: 'node2',\n      target: 'node3',\n    },\n  ],\n  groups: [\n    {\n      id: 'group1',\n      title: {\n        text: '第一个分组',\n        stroke: '#444',\n        offsetX: -30,\n        offsetY: 30,\n      },\n      parentId: 'p1',\n    },\n    {\n      id: 'group2',\n      parentId: 'p1',\n    },\n    {\n      id: 'group3',\n      parentId: 'p2',\n    },\n    {\n      id: 'p1',\n    },\n    {\n      id: 'p2',\n    },\n  ],\n};\n\nconst graph = new G6.Graph({\n  container: 'mountNode',\n  width: 800,\n  height: 600,\n  pixelRatio: 2,\n  modes: {\n    default: ['drag-canvas'],\n  },\n  defaultNode: {\n    shape: 'circleNode',\n  },\n  defaultEdge: {\n    color: '#bae7ff',\n  },\n});\n\ngraph.data(data);\ngraph.render();\n
\n

渲染的效果如下图所示：
\"image.png\"
此时，不能对分组中的节点及分组进行任何操作，接下来，我们介绍可以对分组进行的各种操作。

\n

操作分组

\n

只是简单地将分组渲染出来，并没有多大的实用价值，只有支持一系列的交互操作后，才能最大程度地体现分组的价值。

\n

在 G6 中，我们内置了 drag-group、collapse-expand-group 及  drag-node-with-group  三个Behavior，共支持以下的交互行为：

\n\n

drag-group

\n

drag-group Behavior，支持拖动分组，拖动分组过程中，会动态改变分组中节点和边的位置，在拖拽完成以后，保持分组和节点的相对位置不变。

\n

collapse-expand-group

\n

collapse-expand-group Behavior，支持双击分组收起和展开分组，收起分组以后，隐藏分组中的所有节点，外部节点和分组中节点有连线的情况下，所有连接会连接到分组上面。

\n

优化目前只支持双击交互，正式发布时，会支持用户自定义交互方式，来实现分组的收起和展开。

\n

drag-node-with-group

\n

drag-node-with-group Behavior 和 drag-node 类似，但该 Behavior 仅用于用 group 时 node 的拖拽。拖拽 node 过程中，会动态改变 node 所在的分组。

\n

优化目前暂不支持将多个节点拖出拖入到分组中。

\n
const graph = new G6.Graph({\n  container: 'mountNode',\n  width: 800,\n  height: 600,\n  pixelRatio: 2,\n  modes: {\n    default: ['drag-group', 'collapse-expand-group', 'drag- node-with-group'],\n  },\n  defaultNode: {\n    shape: 'circleNode',\n  },\n  defaultEdge: {\n    color: '#bae7ff',\n  },\n});\n
\n

将这三个内置提供的 Behavior 加入到 modes 中以后的效果如下图所示。

\n

\"group2.gif\"

\n

适用的场景

\n
    \n
  1. 风控、反洗钱、保险骗保、网络诈骗、信用卡诈骗等场景下团伙分析；
    2. \n
  2. 特征分析：同一个分组中的节点在某些特征上面比较相似；
    3. \n
  3. 整理节点：当类似的节点放到一个分组中，只渲染分组，不渲染节点，减少干扰元素。
    4. \n
","fields":{"slug":"/zh/docs/manual/middle/nodeGroup"},"frontmatter":{"title":"节点分组 Group","order":8,"icon":null},"parent":{"__typename":"File","relativePath":"manual/middle/nodeGroup.zh.md"}}},{"node":{"html":"

CustomGroup 为节点分组，支持 Circle 和 Rect 两种类型。用户可通过 CustomGroup 创建节点分组、设置分组的样式、计算分组的坐标及宽高、收起和展开分组。

\n

分组默认是根据数据自动渲染的，当数据中存在 groups 时根据 groups 字段渲染分组，当不存在 groups 时，则根据 nodes 数据中是否存在 groupId 来渲染分组。

\n

当需要通过手动创建分组时候，可以参考下面的文档。

\n

CustomGroup 实例化

\n

CustomGroup 实例会在实例化 Graph 的过程中自动创建，不需要用户手动实例化。

\n

配置项

\n

在实例化 Graph 的时候，通过配置 groupType 和 groupStyle 来指定分组的类型及样式。

\n
const graph = new G6.Graph({\n  container: 'mountNode',\n  width: 500,\n  height: 500,\n  groupType: 'circle',\n  groupStyle: {\n    default: {},\n    hover: {},\n    collapse: {},\n  },\n});\n
\n

groupType

\n

groupType 属性用于指定分组的类型，默认为 circle，支持 circle 和 rect两种。

\n

groupType 指定为 circle 时的效果如下。

\ndownload\n


groupType 指定为 rect 时的效果如下图。
\ndownload

\n

groupStyle

\n

groupStyle 用于指定分组在默认（default）、交互过程中（hover）及收起（collapse）状态下的样式。

\n

通用属性

\n

default、hover 和 collapse 支持的所有通用的属性参考这里。除过这些通用的属性，default 和 collapse 分别还支持以下特有属性。

\n

default

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
属性名称含义类型备注
minDis距离右上角最小距离number不存在嵌套分组时使用该值
maxDis距离右上角最大距离number存在嵌套分组时使用该值
\n

collapse

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
属性名称含义类型备注
r分组的半径number当 groupType 为 circle 时有效
width分组宽度number当 groupType 为 rect 时有效
height分组高度number当 groupType 为 rect 时有效
\n

add / addItem

\n

用于生成分组。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数含义类型备注
groupId分组IDstring
nodes分组中包含的节点或节点IDarray节点实例或节点 ID
type分组类型string默认 circle ，支持 circle 和 rect
zIndex分组层级number默认 0
title分组标题配置objectstring
\n
const nodes = ['node1', 'node2'];\ngraph.addItem('group', {\n  groupId: 'xxxx000999',\n  nodes,\n  type: 'rect',\n  zIndex: 2,\n  title: '分组标题',\n  title: {\n    text: '分组标题',\n    stroke: '',\n    fill: '',\n    offsetX: 10,\n    offsetY: 0,\n  },\n});\n
\n

collapseGroup

\n

收起分组，收起分组后，隐藏分组中的所有节点和边，分组外部与分组内节点有连线的则临时连接到分组上面。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数含义类型备注
groupId分组IDstring
\n
graph.collapseGroup('groupId');\n
\n

expandGroup

\n

展开分组，显示分组中的所有节点和边，恢复收起前的连接情况。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数含义类型备注
groupId分组IDstring
\n
graph.expandGroup('groupId');\n
","fields":{"slug":"/zh/docs/manual/advanced/create-node-group-zh"},"frontmatter":{"title":"手动创建节点分组 Group","order":8,"icon":null},"parent":{"__typename":"File","relativePath":"manual/advanced/create-node-group-zh.md"}}},{"node":{"html":"

G6 中的动画分为两个层次：

\n\n
\n## 全局动画\nG6 的全局动画指通过图实例进行某些全局操作时，产生的动画效果。例如：\n\n

通过实例化图时配置 animate: true，可以达到每次进行上述操作时，动画效果变化的目的。配合 animateCfg 配置动画参数：

\n
const graph = new G6.Graph({\n  // ...                   // 图的其他配置项\n  animate: true, // Boolean，切换布局时是否使用动画过度，默认为 false\n  animateCfg: {\n    duration: 500, // Number，一次动画的时长\n    easing: 'linearEasing', // String，动画函数，可选项：''\n  },\n});\n
\n

easing 函数

\n

easing 函数是指动画的函数。例如线性插值、先快后慢等。
G6 支持所有 d3 中的动画函数。因此，上面代码中 animateCfg 配置中的 String 类型的 easing 可以取值有：
'easeLinear' ，
'easePolyIn' ，'easePolyOut' ， 'easePolyInOut' ，
'``easeQuad``' ，'easeQuadIn' ，'easeQuadOut' ， 'easeQuadInOut' ，
...... 
更多取值及所有取值含义参见：d3 Easings。

\n

元素动画

\n

由于 G6 的内置节点和边是没有动画的，需要实现节点和边上的动画需要通过自定义节点、自定义边时复写 afterDraw 实现。

\n

节点动画

\n

关于节点动画，以下面三个动画示例进行讲解：

\n\ndownload\ndownload\ndownload\n
\n

以上三个动画节点的 demo 代码见：\n节点动画。

\n

节点上图形的动画

\n

节点上的动画，即每一帧发生变化的是节点上的某一个图形。

\ndownload\n

本例实现节点放大缩小，通过 group.get('children')[0] 找到需要更新的图形（这里找到该节点上第 0 个图形），然后调用该图形的 animate 方法指定动画的参数及每一帧的变化（ onFrame 方法返回每一帧需要变化的参数集）。

\n
// 放大、变小动画\nG6.registerNode(\n  'circle-animate',\n  {\n    afterDraw(cfg, group) {\n      // 获取该节点上的第一个图形\n      const shape = group.get('children')[0];\n      // 该图形的动画\n      shape.animate(\n        {\n          // 动画重复\n          repeat: true,\n          // 每一帧的操作，入参 ratio：这一帧的比例值（Number）。返回值：这一帧需要变化的参数集（Object）。\n          onFrame(ratio) {\n            // 先变大、再变小\n            const diff = ratio <= 0.5 ? ratio * 10 : (1 - ratio) * 10;\n            let radius = cfg.size;\n            if (isNaN(radius)) radius = radius[0];\n            // 返回这一帧需要变化的参数集，这里只包含了半径\n            return {\n              r: radius / 2 + diff,\n            };\n          },\n        },\n        3000,\n        'easeCubic',\n      ); // 一次动画持续的时长为 3000，动画效果为 'easeCubic'\n    },\n  },\n  'circle',\n); // 该自定义节点继承了内置节点 'circle'，除了被复写的 afterDraw 方法外，其他按照 'circle' 里的函数执行。\n
\n

增加带有动画的背景图形

\n

在 afterDraw 方法中为已有节点添加额外的 shape ，并为这些新增的图形设置动画。

\n

本例在 afterDraw 方法中，绘制了三个背景 circle ，分别使用不同的颜色填充，再调用 animate 方法实现这三个 circle 逐渐变大、变淡的动画。本例中没有使用 onFrame 函数，直接在 animate 函数的入参中设置每次动画结束时的最终目标样式，即半径增大 10，透明度降为 0.1。

\ndownload\n
G6.registerNode(\n  'background-animate',\n  {\n    afterDraw(cfg, group) {\n      let r = cfg.size / 2;\n      if (isNaN(r)) {\n        r = cfg.size[0] / 2;\n      }\n      // 第一个背景圆\n      const back1 = group.addShape('circle', {\n        zIndex: -3,\n        attrs: {\n          x: 0,\n          y: 0,\n          r,\n          fill: cfg.color,\n          opacity: 0.6,\n        },\n      });\n      // 第二个背景圆\n      const back2 = group.addShape('circle', {\n        zIndex: -2,\n        attrs: {\n          x: 0,\n          y: 0,\n          r,\n          fill: 'blue', // 为了显示清晰，随意设置了颜色\n          opacity: 0.6,\n        },\n      });\n      // 第三个背景圆\n      const back3 = group.addShape('circle', {\n        zIndex: -1,\n        attrs: {\n          x: 0,\n          y: 0,\n          r,\n          fill: 'green',\n          opacity: 0.6,\n        },\n      });\n      group.sort(); // 排序，根据 zIndex 排序\n\n      // 第一个背景圆逐渐放大，并消失\n      back1.animate(\n        {\n          r: r + 10,\n          opacity: 0.1,\n          repeat: true, // 循环\n        },\n        3000,\n        'easeCubic',\n        null,\n        0,\n      ); // 无延迟\n\n      // 第二个背景圆逐渐放大，并消失\n      back2.animate(\n        {\n          r: r + 10,\n          opacity: 0.1,\n          repeat: true, // 循环\n        },\n        3000,\n        'easeCubic',\n        null,\n        1000,\n      ); // 1 秒延迟\n\n      // 第三个背景圆逐渐放大，并消失\n      back3.animate(\n        {\n          r: r + 10,\n          opacity: 0.1,\n          repeat: true, // 循环\n        },\n        3000,\n        'easeCubic',\n        null,\n        2000,\n      ); // 2 秒延迟\n    },\n  },\n  'circle',\n);\n
\n

部分图形旋转动画

\n

这一例也是在 afterDraw 方法中为已有节点添加额外的 shape （本例中为 image），并为这些新增的图形设置旋转动画。旋转动画较为复杂，需要通过矩阵的操作实现。

\ndownload\n
G6.registerNode(\n  'inner-animate',\n  {\n    afterDraw(cfg, group) {\n      const size = cfg.size;\n      const width = size[0] - 12;\n      const height = size[1] - 12;\n      // 添加图片 shape\n      const image = group.addShape('image', {\n        attrs: {\n          x: -width / 2,\n          y: -height / 2,\n          width: width,\n          height: height,\n          img: cfg.img,\n        },\n      });\n      // 该图片 shape 的动画\n      image.animate(\n        {\n          // 动画重复\n          repeat: true,\n          // 每一帧的操作，入参 ratio：这一帧的比例值（Number）。返回值：这一帧需要变化的参数集（Object）。\n          onFrame(ratio) {\n            // 旋转通过矩阵来实现\n            // 当前矩阵\n            const matrix = Util.mat3.create();\n            // 目标矩阵\n            const toMatrix = Util.transform(matrix, [\n              ['r', ratio * Math.PI * 2],\n            ]);\n            // 返回这一帧需要的参数集，本例中只有目标矩阵\n            return {\n              matrix: toMatrix,\n            };\n          },\n        },\n        3000,\n        'easeCubic',\n      );\n    },\n  },\n  'rect',\n);\n
\n

边动画

\n

关于边动画，以下面三个动画示例进行讲解：

\n\ndownload\ndownload\ndownload\n

以上三个边动画的 demo 代码见：边动画。

\n

圆点运动

\n

本例通过在 afterDraw 方法中为边增加了一个 circle 图形，该图形沿着线运动。沿着线运动的原理：设定每一帧中，该 circle 在线上的相对位置。

\ndownload\n
G6.registerEdge(\n  'circle-running',\n  {\n    afterDraw(cfg, group) {\n      // 获得当前边的第一个图形，这里是边本身的 path\n      const shape = group.get('children')[0];\n      // 边 path 的起点位置\n      const startPoint = shape.getPoint(0);\n\n      // 添加红色 circle 图形\n      const circle = group.addShape('circle', {\n        attrs: {\n          x: startPoint.x,\n          y: startPoint.y,\n          fill: 'red',\n          r: 3,\n        },\n      });\n\n      // 对红色圆点添加动画\n      circle.animate(\n        {\n          // 动画重复\n          repeat: true,\n          // 每一帧的操作，入参 ratio：这一帧的比例值（Number）。返回值：这一帧需要变化的参数集（Object）。\n          onFrame(ratio) {\n            // 根据比例值，获得在边 path 上对应比例的位置。\n            const tmpPoint = shape.getPoint(ratio);\n            // 返回需要变化的参数集，这里返回了位置 x 和 y\n            return {\n              x: tmpPoint.x,\n              y: tmpPoint.y,\n            };\n          },\n        },\n        3000,\n      ); // 一次动画的时间长度\n    },\n  },\n  'cubic',\n); // 该自定义边继承内置三阶贝塞尔曲线 cubic\n
\n

虚线运动的效果

\n

虚线运动的效果是通过计算线的 lineDash ，并在每一帧中不断修改实现。

\ndownload\n
// lineDash 的差值，可以在后面提供 util 方法自动计算\nconst dashArray = [\n  [0, 1],\n  [0, 2],\n  [1, 2],\n  [0, 1, 1, 2],\n  [0, 2, 1, 2],\n  [1, 2, 1, 2],\n  [2, 2, 1, 2],\n  [3, 2, 1, 2],\n  [4, 2, 1, 2],\n];\n\nconst lineDash = [4, 2, 1, 2];\nconst interval = 9; // lineDash 的和\nG6.registerEdge(\n  'line-dash',\n  {\n    afterDraw(cfg, group) {\n      // 获得该边的第一个图形，这里是边的 path\n      const shape = group.get('children')[0];\n      // 获得边的 path 的总长度\n      const length = shape.getTotalLength();\n      let totalArray = [];\n      // 计算出整条线的 lineDash\n      for (var i = 0; i < length; i += interval) {\n        totalArray = totalArray.concat(lineDash);\n      }\n\n      let index = 0;\n      // 边 path 图形的动画\n      shape.animate(\n        {\n          // 动画重复\n          repeat: true,\n          // 每一帧的操作，入参 ratio：这一帧的比例值（Number）。返回值：这一帧需要变化的参数集（Object）。\n          onFrame(ratio) {\n            const cfg = {\n              lineDash: dashArray[index].concat(totalArray),\n            };\n            // 每次移动 1\n            index = (index + 1) % interval;\n            // 返回需要修改的参数集，这里只修改了 lineDash\n            return cfg;\n          },\n        },\n        3000,\n      ); // 一次动画的时长为 3000\n    },\n  },\n  'cubic',\n); // 该自定义边继承了内置三阶贝塞尔曲线边 cubic\n
\n

线从无到有

\n

线从无到有的动画效果，同样可以通过计算 lineDash 来实现。

\ndownload\n
G6.registerEdge(\n  'line-growth',\n  {\n    afterDraw(cfg, group) {\n      const shape = group.get('children')[0];\n      const length = group.getTotalLength();\n      shape.animate(\n        {\n          // 动画重复\n          repeat: true,\n          // 每一帧的操作，入参 ratio：这一帧的比例值（Number）。返回值：这一帧需要变化的参数集（Object）。\n          onFrame(ratio) {\n            const startLen = ratio * length;\n            // 计算线的lineDash\n            const cfg = {\n              lineDash: [startLen, length - startLen],\n            };\n            return cfg;\n          },\n        },\n        2000,\n      ); // 一次动画的时长为 2000\n    },\n  },\n  'cubic',\n); // 该自定义边继承了内置三阶贝塞尔曲线边 cubic\n
\n

交互动画

\n

在交互的过程中也可以添加动画。如下图所示，当鼠标移到节点上时，所有与该节点相关联的边都展示虚线运动的动画。
\"交互动画.gif\"
上图完整 demo 即代码参见：状态切换动画。

\n

这种动画涉及到了边的 状态。在自定义边时复写 setState 方法，可对边的各种状态进行监听。鼠标移动到节点上，相关边的某个状态被开启，setState 方法中监听到后开启动画效果。步骤如下：

\n\n

下面代码节选自 demo 状态切换动画，请注意省略了部分代码，只展示了交互相关以及边动画相关的代码。

\n
// const data = ...\n// const graph = new G6.Graph({...});\n\n// lineDash 的差值，可以在后面提供 util 方法自动计算\nconst dashArray = [\n  [0, 1],\n  [0, 2],\n  [1, 2],\n  [0, 1, 1, 2],\n  [0, 2, 1, 2],\n  [1, 2, 1, 2],\n  [2, 2, 1, 2],\n  [3, 2, 1, 2],\n  [4, 2, 1, 2],\n];\n\nconst lineDash = [4, 2, 1, 2];\nconst interval = 9; // lineDash 的总长度。\n\n// 注册名为 'can-running' 的边\nG6.registerEdge(\n  'can-running',\n  {\n    // 复写setState方法\n    setState(name, value, item) {\n      const shape = item.get('keyShape');\n      // 监听 running 状态\n      if (name === 'running') {\n        // running 状态为 true 时\n        if (value) {\n          const length = shape.getTotalLength();\n          let totalArray = [];\n          for (var i = 0; i < length; i += interval) {\n            totalArray = totalArray.concat(lineDash);\n          }\n          let index = 0;\n          shape.animate(\n            {\n              // 动画重复\n              repeat: true,\n              // 每一帧的操作，入参 ratio：这一帧的比例值（Number）。返回值：这一帧需要变化的参数集（Object）。\n              onFrame(ratio) {\n                const cfg = {\n                  lineDash: dashArray[index].concat(totalArray),\n                };\n                index = (index + 1) % interval;\n                return cfg;\n              },\n            },\n            3000,\n          ); // 一次动画的时长为 3000\n        } else {\n          // running 状态为 false 时\n          // 结束动画\n          shape.stopAnimate();\n          // 清空 lineDash\n          shape.attr('lineDash', null);\n        }\n      }\n    },\n  },\n  'cubic-horizontal',\n); // 该自定义边继承了内置横向三阶贝塞尔曲线边 cubic-horizontal\n\n// 监听节点的 mouseenter 事件\ngraph.on('node:mouseenter', ev => {\n  // 获得当前鼠标操作的目标节点\n  const node = ev.item;\n  // 获得目标节点的所有相关边\n  const edges = node.getEdges();\n  // 将所有相关边的 running 状态置为 true，此时将会触发自定义节点的 setState 函数\n  edges.forEach(edge => graph.setItemState(edge, 'running', true));\n});\n\n// 监听节点的 mouseleave 事件\ngraph.on('node:mouseleave', ev => {\n  // 获得当前鼠标操作的目标节点\n  const node = ev.item;\n  // 获得目标节点的所有相关边\n  const edges = node.getEdges();\n  // 将所有相关边的 running 状态置为 false，此时将会触发自定义节点的 setState 函数\n  edges.forEach(edge => graph.setItemState(edge, 'running', false));\n});\n\n// graph.data(data);\n// graph.render();\n
\n

  注意：\nrunning 为 false 时，要停止动画，同时把 lineDash 清空。

","fields":{"slug":"/zh/docs/manual/advanced/animation-zh"},"frontmatter":{"title":"基础动画","order":8,"icon":null},"parent":{"__typename":"File","relativePath":"manual/advanced/animation-zh.md"}}},{"node":{"html":"

Arc diagram is a method of graph visualization. It places the nodes on one axis, and connects the nodes by arcs.

\n

Usage

\n","fields":{"slug":"/en/examples/net/arcDiagram"},"frontmatter":{"title":"Arc Diagram","order":8,"icon":null},"parent":{"__typename":"File","relativePath":"net/arcDiagram/index.en.md"}}},{"node":{"html":"

弧线图是一种图的可视化形式。其将节点排列在一个轴上，边以弧线的形式连接节点。

\n

使用指南

\n","fields":{"slug":"/zh/examples/net/arcDiagram"},"frontmatter":{"title":"Arc Diagram 弧线图","order":8,"icon":null},"parent":{"__typename":"File","relativePath":"net/arcDiagram/index.zh.md"}}},{"node":{"html":"

概述

\n

G6是一个纯JS库，不与任何框架耦合，也就是可以在任何前端框架中使用，如 React、Vue、Angular 等。由于我们内部绝大多数都是基于 React 技术栈的，所以我们也仅提供一个 G6 在 React 中使用的 Demo。

\n

在 React 中使用 G6，和在 HTML 中使用基本相同，唯一比较关键的区分就是在实例化 Graph 时，要保证 DOM 容器渲染完成，并能获取到 DOM 元素。

\n

在 Demo 中，我们以一个简单的流程图为例，实现如下的效果。\"demo.gif\"

\n

功能及实现

\n

Demo 包括以下功能点：

\n\n

在 React 中，通过 **ReactDOM.findDOMNode(ref.current)**** **获取到真实的 DOM 元素。

\n
import React, { useEffect, useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport { data } from './data';\nimport G6 from '@antv/g6';\n\nexport default function() {\n  const ref = React.useRef(null);\n  let graph = null;\n\n  useEffect(() => {\n    if (!graph) {\n      graph = new G6.Graph({\n        container: ReactDOM.findDOMNode(ref.current),\n        width: 1200,\n        height: 800,\n        modes: {\n          default: ['drag-canvas'],\n        },\n        layout: {\n          type: 'dagre',\n          direction: 'LR',\n        },\n        defaultNode: {\n          shape: 'node',\n          labelCfg: {\n            style: {\n              fill: '#000000A6',\n              fontSize: 10,\n            },\n          },\n          style: {\n            stroke: '#72CC4A',\n            width: 150,\n          },\n        },\n        defaultEdge: {\n          shape: 'polyline',\n        },\n      });\n    }\n    graph.data(data);\n    graph.render();\n  }, []);\n\n  return <div ref={ref}></div>;\n}\n
\n

G6中渲染React组件

\n

节点和边的 tooltip、节点上的右键菜单，G6 中内置的很难满足样式上的需求，这个时候我们就可以通过渲染自定义的 React 组件来实现。Tooltip 和 ContextMenu 都是普通的 React 组件，样式完全由用户控制。交互过程中，在G6 中需要做的事情就是确定何时渲染组件，以及渲染到何处。在 G6 中获取到是否渲染组件的标识值和渲染位置后，这些值就可以使用 React state 进行管理，后续的所有工作就全部由 React 负责了。

\n
// 边tooltip坐标\nconst [showNodeTooltip, setShowNodeTooltip] = useState(false);\nconst [nodeTooltipX, setNodeToolTipX] = useState(0);\nconst [nodeTooltipY, setNodeToolTipY] = useState(0);\n\n// 监听node上面mouse事件\ngraph.on('node:mouseenter', evt => {\n  const { item } = evt;\n  const model = item.getModel();\n  const { x, y } = model;\n  const point = graph.getCanvasByPoint(x, y);\n\n  setNodeToolTipX(point.x - 75);\n  setNodeToolTipY(point.y + 15);\n  setShowNodeTooltip(true);\n});\n\n// 节点上面触发mouseleave事件后隐藏tooltip和ContextMenu\ngraph.on('node:mouseleave', () => {\n  setShowNodeTooltip(false);\n});\n\nreturn (\n  <div ref={ref}>\n    {showNodeTooltip && <NodeTooltips x={nodeTooltipX} y={nodeTooltipY} />}\n  </div>\n);\n
\n

完整的 Demo 源码请👉戳这里。

\n

关于 G6 如何在 Vue 及 Angular 中使用，还望社区中有相关实践的同学能提供一些，供其他同学学习和参考，非常感谢！

","fields":{"slug":"/zh/docs/manual/middle/g6InReact"},"frontmatter":{"title":"React 中使用 G6","order":9,"icon":null},"parent":{"__typename":"File","relativePath":"manual/middle/g6InReact.zh.md"}}},{"node":{"html":"

简介

\n

为什么使用 iconfont？ 兼容性好、种类多、多色等。在此不做过多介绍，请直接移步阿里巴巴-iconfont平台。

\n

效果

\nresult\n

下载字体图标

\n

直接去到阿里巴巴字体图标库搜索下载即可，简要操作流程是：搜索图标（例如篮球） ->  选择自己喜欢的图标添加入库  ->  点击页面右上角的购物车可以看到我们加入的图标 -> 添加至项目，如果没有项目到话可以新建一个  ->  在我到项目里面点击下载至本地 -> 解压。如果一切操作正常的话可以得到如下解压文件：
\ndownload

\n

选中红色区域的所有文件（这里面很多文件是不需要的，为了方便起见，我们全部复制即可，不需要的也不会被打包），复制到项目里面，一般放在目录 'static/icons' 或者 'assets/icons' 下面，如果没有的话可以新建目录，当然你也可以放到任意你喜欢的位置，只要引入的时候路径对即可，到此 iconfont 引入完毕。

\n

PS: 本案文件目录为 '/static/icons'

\n

引入G6

\n

多种引入方式，请移步https://github.com/antvis/g6。\n
PS: 本案例简单粗暴，通过CDN的方式引入。

\n
<script src=\"https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.0/build/g6.js\"></script>
\n

添加字体图标

\n

引入方式可自行选择，下面为在 HTML 中引入的例子：

\n
<style>\n   @import \"/static/icons/iconfont.css\";\n</style>
\n

撸代码

\n
G6.registerNode('iconfont', {\n  draw(cfg, group) {\n    const {\n      backgroundConfig: backgroundStyle,\n      style,\n      labelCfg: labelStyle,\n    } = cfg;\n\n    if (backgroundStyle) {\n      group.addShape('circle', {\n        attrs: {\n          x: 0,\n          y: 0,\n          r: cfg.size,\n          ...backgroundStyle,\n        },\n      });\n    }\n\n    const keyShape = group.addShape('text', {\n      attrs: {\n        x: 0,\n        y: 0,\n        fontFamily: 'iconfont', // 对应css里面的font-family: \"iconfont\";\n        textAlign: 'center',\n        textBaseline: 'middle',\n        text: cfg.text,\n        fontSize: cfg.size,\n        ...style,\n      },\n    });\n    const labelY = backgroundStyle ? cfg.size * 2 : cfg.size;\n\n    group.addShape('text', {\n      attrs: {\n        x: 0,\n        y: labelY,\n        textAlign: 'center',\n        text: cfg.label,\n        ...labelStyle.style,\n      },\n    });\n    return keyShape;\n  },\n});\n\nconst COLOR = '#40a9ff';\nconst graph = new G6.TreeGraph({\n  container: 'mountNode',\n  width: 800,\n  height: 600,\n  modes: {\n    default: ['collapse-expand', 'drag-canvas', 'drag-node'],\n  },\n  defaultNode: {\n    backgroundConfig: {\n      backgroundType: 'circle',\n      fill: COLOR,\n      stroke: 'LightSkyBlue',\n    },\n    shape: 'iconfont',\n    size: 12,\n    style: {\n      fill: '#fff',\n    },\n    labelCfg: {\n      style: {\n        fill: COLOR,\n        fontSize: 12,\n      },\n    },\n  },\n  // 布局相关\n  layout: {\n    type: 'compactBox',\n    direction: 'LR',\n    getId(d) {\n      return d.id;\n    },\n    getHeight() {\n      return 16;\n    },\n    getWidth() {\n      return 16;\n    },\n    getVGap() {\n      return 20;\n    },\n    getHGap() {\n      return 60;\n    },\n  },\n});\n\ngraph.edge(({ target }) => {\n  const fill =\n    target.get('model').backgroundConfig &&\n    target.get('model').backgroundConfig.fill;\n  return {\n    shape: 'cubic-horizontal',\n    color: fill || COLOR,\n    label: target.get('model').relation || '',\n    labelCfg: {\n      style: {\n        fill: fill || COLOR,\n        fontSize: 12,\n      },\n    },\n  };\n});\n\nconst data = {\n  isRoot: true,\n  id: 'Root',\n  label: '可疑人员王**',\n  text: '&#xe622;', // 对应字体图标的Unicode码，\n  style: {\n    fill: 'red',\n  },\n  labelCfg: {\n    style: {\n      fill: 'red',\n    },\n  },\n  backgroundConfig: null, // 自定义项，用于判读是否需要圆背景\n  size: 30,\n  children: [\n    {\n      id: 'SubTreeNode1',\n      label: '**网咖',\n      text: '&#xe605;',\n      relation: '上网',\n      children: [\n        {\n          id: 'SubTreeNode2',\n          label: '多伦多',\n          text: '&#xe64b;',\n        },\n        {\n          id: 'id1',\n          label: '小王',\n          text: '&#xe622;',\n          children: [\n            {\n              id: 'SubTreeNode1.2.1',\n              label: '182****2123',\n              text: '&#xe60d;',\n            },\n            {\n              id: 'SubTreeNode4',\n              label: '今晚在吗',\n              text: '&#xe629;',\n            },\n          ],\n        },\n      ],\n    },\n    {\n      id: 'SubTreeNode3',\n      label: 'subway',\n      text: '&#xe653;',\n      children: [\n        {\n          id: 'SubTreeNode3.1',\n          label: '王五',\n          text: '&#xe622;',\n        },\n        {\n          id: 'SubTreeNode3.2',\n          label: '张三',\n          text: '&#xe622;',\n        },\n      ],\n    },\n    {\n      id: 'SubTreeNode5',\n      label: '小花',\n      relation: '老婆',\n      text: '&#xe74b;',\n      backgroundConfig: {\n        fill: 'Coral',\n      },\n      style: {\n        fill: '#fff',\n      },\n      labelCfg: {\n        style: {\n          fill: 'Coral',\n        },\n      },\n      children: [\n        {\n          id: 'SubTreeNode1.2.1',\n          label: '182****2123',\n          text: '&#xe60d;',\n          relation: '通话',\n          backgroundConfig: {\n            fill: 'Coral',\n          },\n          style: {\n            fill: '#fff',\n          },\n          labelCfg: {\n            style: {\n              fill: 'Coral',\n            },\n          },\n        },\n        {\n          id: 'SubTreeNode3.3',\n          label: '凶器',\n          text: '&#xe673;',\n          relation: '指纹',\n          backgroundConfig: {\n            fill: 'Coral',\n          },\n          style: {\n            fill: '#fff',\n          },\n          labelCfg: {\n            style: {\n              fill: 'Coral',\n            },\n          },\n        },\n      ],\n    },\n    {\n      id: 'SubTreeNode6',\n      label: '马航37*',\n      relation: '乘坐',\n      text: '&#xe610;',\n    },\n  ],\n};\n\ngraph.data(data);\ngraph.render();\n
\n

注意事项

\n

看了代码大家应该很清楚了，实质就是用了 text 图形，但有几个需要注意的地方：
1、text的fontFamily必须和iconfont.css里面的font-family保持一致：
\ndownload

\ndownload\n

2、data 里面的 text 使用的是 Unicode，需要自行复制。

\ndownload\ndownload","fields":{"slug":"/zh/docs/manual/advanced/iconfont"},"frontmatter":{"title":"使用 Iconfont","order":9,"icon":null},"parent":{"__typename":"File","relativePath":"manual/advanced/iconfont.zh.md"}}},{"node":{"html":"

Sankey Diagram is an appropriate visualization for showing the amount and direction of flow.

","fields":{"slug":"/en/examples/net/sankey"},"frontmatter":{"title":"Sankey Diagram","order":9,"icon":null},"parent":{"__typename":"File","relativePath":"net/sankey/index.en.md"}}},{"node":{"html":"

桑基图一般用于重点展示流量与流向的流图。

\n

使用指南

\n

本代码演示展示了 G6 可以借助于其他类库完成除内置能力以外的图可视化。本示例结合 G6 的自定义边功能和 d3.js 的桑基图功能实现了如下效果。

","fields":{"slug":"/zh/examples/net/sankey"},"frontmatter":{"title":"Sankey 桑基图","order":9,"icon":null},"parent":{"__typename":"File","relativePath":"net/sankey/index.zh.md"}}},{"node":{"html":"

G6 3.1.4 版本中新增了 lock()、unlock() 和 hasLocked() 三个 API，方便用户锁定某个节点。默认情况下，当锁定某个节点后，拖动节点时锁定的节点不会有任何反应，但拖动画布和缩放画布时，仍然会对锁定的节点有影响，如果不想让锁定的节点收到拖动画布和缩放画布的影响，可以通过自定义 Behavior 的方式来实现。

\n

拖动画布时候不处理锁定的节点

\n

G6 内置的 drag-canvas 不区分节点是否锁定，全部一视同仁。绝大数情况下，这种行为是完全没问题的，但某些业务可能会要求锁定的节点，拖动画布时也不能移动，对于这种情况，可以通过重新定义拖动画布的 Behavior 来实现。

\n
import G6 from '@antv/g6;\nconst Util = G6.Util;\nconst abs = Math.abs;\nconst DRAG_OFFSET = 10;\nconst body = document.body;\nconst ALLOW_EVENTS = [ 16, 17, 18 ];\n\nG6.registerBehavior('drag-canvas-exclude-lockedNode', {\n  getDefaultCfg() {\n    return {\n      direction: 'both'\n    };\n  },\n  getEvents() {\n    return {\n      'canvas:mousedown': 'onMouseDown',\n      'canvas:mousemove': 'onMouseMove',\n      'canvas:mouseup': 'onMouseUp',\n      'canvas:click': 'onMouseUp',\n      'canvas:mouseleave': 'onOutOfRange',\n      keyup: 'onKeyUp',\n      keydown: 'onKeyDown'\n    };\n  },\n  updateViewport(e) {\n    const origin = this.origin;\n    const clientX = +e.clientX;\n    const clientY = +e.clientY;\n    if (isNaN(clientX) || isNaN(clientY)) {\n      return;\n    }\n    let dx = clientX - origin.x;\n    let dy = clientY - origin.y;\n    if (this.get('direction') === 'x') {\n      dy = 0;\n    } else if (this.get('direction') === 'y') {\n      dx = 0;\n    }\n    this.origin = {\n      x: clientX,\n      y: clientY\n    };\n    // 和内置 drag-canvas 不同的地方是在这里\n    const lockedNodes = this.graph.findAll('node', node => !node.hasLocked());\n    lockedNodes.forEach(node => {\n      node.get('group').translate(dx, dy);\n    });\n    this.graph.paint();\n  },\n  onMouseDown(e) {\n    if (this.keydown) {\n      return;\n    }\n\n    this.origin = { x: e.clientX, y: e.clientY };\n    this.dragging = false;\n  },\n  onMouseMove(e) {\n    if (this.keydown) {\n      return;\n    }\n\n    e = Util.cloneEvent(e);\n    const graph = this.graph;\n    if (!this.origin) { return; }\n    if (this.origin && !this.dragging) {\n      if (abs(this.origin.x - e.clientX) + abs(this.origin.y - e.clientY) < DRAG_OFFSET) {\n        return;\n      }\n      if (this.shouldBegin.call(this, e)) {\n        e.type = 'dragstart';\n        graph.emit('canvas:dragstart', e);\n        this.dragging = true;\n      }\n    }\n    if (this.dragging) {\n      e.type = 'drag';\n      graph.emit('canvas:drag', e);\n    }\n    if (this.shouldUpdate.call(this, e)) {\n      this.updateViewport(e);\n    }\n  },\n  onMouseUp(e) {\n    if (this.keydown) {\n      return;\n    }\n\n    if (!this.dragging) {\n      this.origin = null;\n      return;\n    }\n    e = Util.cloneEvent(e);\n    const graph = this.graph;\n    if (this.shouldEnd.call(this, e)) {\n      this.updateViewport(e);\n    }\n    e.type = 'dragend';\n    graph.emit('canvas:dragend', e);\n    this.endDrag();\n  },\n  endDrag() {\n    if (this.dragging) {\n      this.origin = null;\n      this.dragging = false;\n      // 终止时需要判断此时是否在监听画布外的 mouseup 事件，若有则解绑\n      const fn = this.fn;\n      if (fn) {\n        body.removeEventListener('mouseup', fn, false);\n        this.fn = null;\n      }\n    }\n  },\n  // 若在拖拽时，鼠标移出画布区域，此时放开鼠标无法终止 drag 行为。在画布外监听 mouseup 事件，放开则终止\n  onOutOfRange(e) {\n    if (this.dragging) {\n      const self = this;\n      const canvasElement = self.graph.get('canvas').get('el');\n      const fn = ev => {\n        if (ev.target !== canvasElement) {\n          self.onMouseUp(e);\n        }\n      };\n      this.fn = fn;\n      body.addEventListener('mouseup', fn, false);\n    }\n  },\n  onKeyDown(e) {\n    const code = e.keyCode || e.which;\n    if (ALLOW_EVENTS.indexOf(code) > -1) {\n      this.keydown = true;\n    } else {\n      this.keydown = false;\n    }\n  },\n  onKeyUp() {\n    this.keydown = false;\n  }\n});
\n

缩放画布时不处理锁定的节点

\n

默认情况下，G6 内置的 zoom-canvas 在缩放画布时候也会对锁定的节点缩放，如果缩放过程中不需要操作锁定的节点，则可以通过下面的方式来实现。

\n
const DELTA = 0.05;\n\nG6.registerBehavior('zoom-canvas-exclude-lockedNode', {\n  getDefaultCfg() {\n    return {\n      sensitivity: 2,\n      minZoom: 0.1,\n      maxZoom: 10,\n    };\n  },\n  getEvents() {\n    return {\n      wheel: 'onWheel',\n    };\n  },\n  onWheel(e) {\n    e.preventDefault();\n    if (!this.shouldUpdate.call(this, e)) {\n      return;\n    }\n    const graph = this.graph;\n    const canvas = graph.get('canvas');\n    const point = canvas.getPointByClient(e.clientX, e.clientY);\n    const pixelRatio = canvas.get('pixelRatio');\n    const sensitivity = this.get('sensitivity');\n    let ratio = graph.getZoom();\n    // 兼容IE、Firefox及Chrome\n    if (e.wheelDelta < 0) {\n      ratio = 1 - DELTA * sensitivity;\n    } else {\n      ratio = 1 + DELTA * sensitivity;\n    }\n    const zoom = ratio * graph.getZoom();\n    if (zoom > this.get('maxZoom') || zoom < this.get('minZoom')) {\n      return;\n    }\n    graph.zoom(ratio, { x: point.x / pixelRatio, y: point.y / pixelRatio });\n    const lockedNodes = this.graph.findAll('node', node => !node.hasLocked());\n    lockedNodes.forEach(node => {\n      const matrix = Util.clone(node.get('group').getMatrix());\n      const center = node.getModel();\n      Util.mat3.translate(matrix, matrix, [-center.x, -center.y]);\n      Util.mat3.scale(matrix, matrix, [ratio, ratio]);\n      Util.mat3.translate(matrix, matrix, [center.x, center.y]);\n      node.get('group').setMatrix(matrix);\n    });\n    graph.paint();\n    graph.emit('wheelzoom', e);\n  },\n});\n
","fields":{"slug":"/zh/docs/manual/advanced/lock-node"},"frontmatter":{"title":"锁定节点","order":10,"icon":null},"parent":{"__typename":"File","relativePath":"manual/advanced/lock-node.md"}}},{"node":{"html":"

G6 provides the mechanism for layout paramters translation, layout methods translation, data translation, subgraph layout, layout timing for listener, custom layout, and so on.

\n

Usage

\n","fields":{"slug":"/en/examples/net/layoutMechanism"},"frontmatter":{"title":"Layout Mechanism","order":19,"icon":null},"parent":{"__typename":"File","relativePath":"net/layoutMechanism/index.en.md"}}},{"node":{"html":"

G6 为用户提供了布局参数动态切换、布局方法动态切换、数据动态切换、子图布局、布局时机监听、自定义布局等布局相关等机制。

\n

使用指南

\n","fields":{"slug":"/zh/examples/net/layoutMechanism"},"frontmatter":{"title":"布局机制","order":19,"icon":null},"parent":{"__typename":"File","relativePath":"net/layoutMechanism/index.zh.md"}}},{"node":{"html":"

Please refer to the corresponding API of Dendrogram or CompactBox.

","fields":{"slug":"/en/examples/tree/radialtree/API"},"frontmatter":{"title":"API","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"tree/radialtree/API.en.md"}}},{"node":{"html":"

参见对应的 Dendrogram 与 CompactBox 布局的 API。

","fields":{"slug":"/zh/examples/tree/radialtree/API"},"frontmatter":{"title":"API","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"tree/radialtree/API.zh.md"}}},{"node":{"html":"

direction

\n

类型：String
可选值：'H' | 'V'
默认值：'H'
是否必须：false
说明：树布局的方向，默认为，其他选项说明

\n\n

\"image.png\"

\n\n

\"image.png\"

\n

\n

getWidth

\n

类型：Number | Function
示例：

\n
d => {\n  // d 是一个节点\n  if (d.id === 'testId') return 50;\n  return 100;\n};\n
\n

是否必须：false
说明：每个节点的宽度

\n

\n

getHeight

\n

类型：Number | Function
示例：

\n
d => {\n  // d 是一个节点\n  if (d.id === 'testId') return 50;\n  return 100;\n};\n
\n

是否必须：false
说明：每个节点的高度

\n

\n

getHGap

\n

类型：Number | Function
示例：

\n
d => {\n  // d 是一个节点\n  if (d.id === 'testId') return 50;\n  return 100;\n};\n
\n

默认值：18
是否必须：false
说明：每个节点的水平间隙

\n

\n

getVGap

\n

类型：Number | Function
示例：

\n
d => {\n  // d 是一个节点\n  if (d.id === 'testId') return 50;\n  return 100;\n};\n
\n

默认值：18
是否必须：false
说明：每个节点的垂直间隙

\n

\n

getSide

\n

类型：Function
示例：

\n
d => {\n  // d 是一个节点\n  if (d.id === 'test-child-id') return 'right';\n  return 'left';\n};\n
\n

默认值：'right'
是否必须：false
说明：节点排布在根节点的左侧/右侧。若设置了该值，则所有节点会在根节点同一侧，即 direction = 'H' 不再起效。若该参数为回调函数，则可以指定每一个节点在根节点的左/右侧

","fields":{"slug":"/zh/examples/tree/mindmap/API"},"frontmatter":{"title":"API","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"tree/mindmap/API.zh.md"}}},{"node":{"html":"

direction

\n

Type: String
Options: 'H' | 'V'
Default: 'H'
Required: false
Explanation: The direction of layout.

\n\n

\"image.png\"

\n\n

\"image.png\"

\n

\n

getWidth

\n

Type: Number | Function
Example:

\n
d => {\n  // d is a node\n  if (d.id === 'testId') return 50;\n  return 100;\n};\n
\n

Required: false
Explanation: 每个节点的宽度

\n

\n

getHeight

\n

Type: Number | Function
Example:

\n
d => {\n  // d is a node\n  if (d.id === 'testId') return 50;\n  return 100;\n};\n
\n

Required: false
Explanation: The height of node

\n

\n

getHGap

\n

Type: Number | Function
Example:

\n
d => {\n  // d is a node\n  if (d.id === 'testId') return 50;\n  return 100;\n};\n
\n

Default: 18
Required: false
Explanation: The horizontal separation of nodes

\n

\n

getVGap

\n

Type: Number | Function
Example:

\n
d => {\n  // d is a node\n  if (d.id === 'testId') return 50;\n  return 100;\n};\n
\n

Default: 18
Required: false
Explanation: The vertical separation of nodes

\n

\n

getSide

\n

Type: Function
Example:

\n
d => {\n  // d is a node\n  if (d.id === 'test-child-id') return 'right';\n  return 'left';\n};\n
\n

Default: 'right'
Required: false
Explanation: The callback function of node position(left or right of root node). Only affects the nodes which are connected to the root node directly. And the descendant nodes will be placed according to it.

","fields":{"slug":"/en/examples/tree/mindmap/API"},"frontmatter":{"title":"API","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"tree/mindmap/API.en.md"}}},{"node":{"html":"

设计规范

","fields":{"slug":"/en/examples/tree/mindmap/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"tree/mindmap/design.en.md"}}},{"node":{"html":"

设计规范

","fields":{"slug":"/zh/examples/tree/mindmap/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"tree/mindmap/design.zh.md"}}},{"node":{"html":"

direction

\n

类型：String
可选值：'LR' | 'RL' | 'H'
默认值：'LR'
是否必须：false
说明：树布局的方向，默认为，其他选项说明

\n\n

\"image.png\"          \"image.png\"           \"image.png\"

\n
\n

（左）LR。（中）RL。（右）H。

\n
\n

indent

\n

类型：Number
默认值：20
是否必须：false
说明：列间间距

\n

getWidth

\n

类型：Number | Function
示例：

\n
d => {\n  // d 是一个节点\n  if (d.id === 'testId') return 50;\n  return 100;\n};\n
\n

是否必须：false
说明：每个节点的宽度

\n

getHeight

\n

类型：Number | Function
示例：

\n
d => {\n  // d 是一个节点\n  if (d.id === 'testId') return 50;\n  return 100;\n};\n
\n

是否必须：false
说明：每个节点的高度

\n

getSide

\n

类型：Function
示例：

\n
d => {\n  // d 是一个节点\n  if (d.id === 'testId') return 'left';\n  return 'right';\n};\n
\n

是否必须：false
说明：节点放置在根节点左侧或右侧的回调函数，仅对与根节点直接相连的节点有效，设置后将会影响被设置节点的所有子孙节点

","fields":{"slug":"/zh/examples/tree/indented/API"},"frontmatter":{"title":"API","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"tree/indented/API.zh.md"}}},{"node":{"html":"

设计规范

","fields":{"slug":"/en/examples/tree/indented/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"tree/indented/design.en.md"}}},{"node":{"html":"

direction

\n

Type: String
可选值: 'LR' | 'RL' | 'H'
Default: 'LR'
Required: false
Explanation: The direction of layout.

\n\n

\"image.png\"          \"image.png\"           \"image.png\"

\n
\n

（Left）LR。（Center）RL。（Right）H。

\n
\n

indent

\n

Type: Number
Default: 20
Required: false
Explanation: Colunm separation

\n

getWidth

\n

Type: Number | Function
Example:

\n
d => {\n  // d is a node\n  if (d.id === 'testId') return 50;\n  return 100;\n};\n
\n

Required: false
Explanation: The width of node

\n

getHeight

\n

Type: Number | Function
Example:

\n
d => {\n  // d is a node\n  if (d.id === 'testId') return 50;\n  return 100;\n};\n
\n

Required: false
Explanation: The height of node

\n

getSide

\n

Type: Function
Example:

\n
d => {\n  // d is a node\n  if (d.id === 'testId') return 'left';\n  return 'right';\n};\n
\n

Required: false
Explanation: The callback function of node position(left or right of root node). Only affects the nodes which are connected to the root node directly. And the descendant nodes will be placed according to it.

","fields":{"slug":"/en/examples/tree/indented/API"},"frontmatter":{"title":"API","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"tree/indented/API.en.md"}}},{"node":{"html":"

设计规范

","fields":{"slug":"/zh/examples/tree/indented/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"tree/indented/design.zh.md"}}},{"node":{"html":"

API.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"IE
IE / Edge		\"Firefox\"
Firefox		\"Chrome\"
Chrome		\"Safari\"
Safari		\"Opera\"
Opera		\"Electron\"
Electron
IE9, IE10, IE11, Edgelast 2 versionslast 2 versionslast 2 versionslast 2 versionslast 2 versions
","fields":{"slug":"/en/examples/shape/basic/API"},"frontmatter":{"title":"API","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"shape/basic/API.en.md"}}},{"node":{"html":"

direction

\n

Type: String
Options:'LR' | 'RL' | 'TB' | 'BT' | 'H' | 'V'
Default:'LR'
Required: false
Explanation: The direction of layout.

\n\n

\"image.png\"

\n\n

\"image.png\"

\n\n

\"image.png\"

\n\n

\"image.png\"

\n\n

\"image.png\"

\n\n

\"image.png\"

\n

nodeSep

\n

Type: Number
Default: 0
Required: false
Explanation: Node separation

\n

rankSep

\n

Type: Number
Default: 0
Required: false
Explanation: Level separation

\n

radial

\n

Type: Boolean
Default: false
Required: false
Explanation: If layout the graph in radial style. If radial is true, we recommend to set direction to 'LR' or 'RL':
\"image.png\"

","fields":{"slug":"/en/examples/tree/dendrogram/API"},"frontmatter":{"title":"API","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"tree/dendrogram/API.en.md"}}},{"node":{"html":"

direction

\n

类型：String
可选值：'LR' | 'RL' | 'TB' | 'BT' | 'H' | 'V'
默认值：'LR'
是否必须：false
说明：树布局的方向，默认为，其他选项说明

\n\n

\"image.png\"

\n\n

\"image.png\"

\n\n

\"image.png\"

\n\n

\"image.png\"

\n\n

\"image.png\"

\n\n

\"image.png\"

\n

nodeSep

\n

类型：Number
默认值：0
是否必须：false
说明：节点间距

\n

rankSep

\n

类型：Number
默认值：0
是否必须：false
说明：层与层之间的间距

\n

radial

\n

类型：Boolean
默认值：false
是否必须：false
说明：是否按照辐射状布局。若 radial 为 true，建议 direction 设置为 'LR' 或 'RL'：
\"image.png\"

","fields":{"slug":"/zh/examples/tree/dendrogram/API"},"frontmatter":{"title":"API","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"tree/dendrogram/API.zh.md"}}},{"node":{"html":"

设计规范

","fields":{"slug":"/en/examples/tree/dendrogram/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"tree/dendrogram/design.en.md"}}},{"node":{"html":"

设计规范

","fields":{"slug":"/zh/examples/tree/dendrogram/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"tree/dendrogram/design.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/tree/customItemTree/API"},"frontmatter":{"title":"API","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"tree/customItemTree/API.en.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/tree/customItemTree/API"},"frontmatter":{"title":"API","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"tree/customItemTree/API.zh.md"}}},{"node":{"html":"

设计规范

","fields":{"slug":"/en/examples/tree/customItemTree/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"tree/customItemTree/design.en.md"}}},{"node":{"html":"

设计规范

","fields":{"slug":"/zh/examples/tree/customItemTree/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"tree/customItemTree/design.zh.md"}}},{"node":{"html":"

direction

\n

Type: String
Options: 'LR' | 'RL' | 'TB' | 'BT' | 'H' | 'V'
Default: 'LR'
Required: false
Explanation: The direction of layout.

\n\n

\"image.png\"

\n\n

\"image.png\"

\n\n

\"image.png\"

\n\n

\"image.png\"

\n\n

\"image.png\"

\n\n

\"image.png\"

\n

getWidth

\n

Type: Number | Function
Example:

\n
d => {\n  // d is a node\n  if (d.id === 'testId') return 50;\n  return 100;\n};\n
\n

Required: false
Explanation: The width of each node

\n

getHeight

\n

Type: Number | Function
Example:

\n
d => {\n  // d is a node\n  if (d.id === 'testId') return 50;\n  return 100;\n};\n
\n

Required: false
Explanation: The height of each node

\n

getHGap

\n

Type: Number | Function
Example:

\n
d => {\n  // d is a node\n  if (d.id === 'testId') return 50;\n  return 100;\n};\n
\n

默认值: 18
Required: false
Explanation: The horizontal separation of nodes

\n

getVGap

\n

Type: Number | Function
Example:

\n
d => {\n  // d is a node\n  if (d.id === 'testId') return 50;\n  return 100;\n};\n
\n

默认值: 18
Required: false
Explanation: The vertical separation of nodes

\n

radial

\n

Type: Boolean
默认值: false
Required: false
Explanation: If layout the graph in radial style. If radial is true, we recommend to set direction to 'LR' or 'RL':
\"image.png\"

","fields":{"slug":"/en/examples/tree/compactBox/API"},"frontmatter":{"title":"API","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"tree/compactBox/API.en.md"}}},{"node":{"html":"

direction

\n

类型：String
可选值：'LR' | 'RL' | 'TB' | 'BT' | 'H' | 'V'
默认值：'LR'
是否必须：false
说明：树布局的方向，默认为，其他选项说明

\n\n

\"image.png\"

\n\n

\"image.png\"

\n\n

\"image.png\"

\n\n

\"image.png\"

\n\n

\"image.png\"

\n\n

\"image.png\"

\n

getWidth

\n

类型：Number | Function
示例：

\n
d => {\n  // d 是一个节点\n  if (d.id === 'testId') return 50;\n  return 100;\n};\n
\n

是否必须：false
说明：每个节点的宽度

\n

getHeight

\n

类型：Number | Function
示例：

\n
d => {\n  // d 是一个节点\n  if (d.id === 'testId') return 50;\n  return 100;\n};\n
\n

是否必须：false
说明：每个节点的高度

\n

getHGap

\n

类型：Number | Function
示例：

\n
d => {\n  // d 是一个节点\n  if (d.id === 'testId') return 50;\n  return 100;\n};\n
\n

默认值：18
是否必须：false
说明：每个节点的水平间隙

\n

getVGap

\n

类型：Number | Function
示例：

\n
d => {\n  // d 是一个节点\n  if (d.id === 'testId') return 50;\n  return 100;\n};\n
\n

默认值：18
是否必须：false
说明：每个节点的垂直间隙

\n

radial

\n

类型：Boolean
默认值：false
是否必须：false
说明：是否按照辐射状布局。若 radial 为 true，建议 direction 设置为 'LR' 或 'RL'：
\"image.png\"

","fields":{"slug":"/zh/examples/tree/compactBox/API"},"frontmatter":{"title":"API","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"tree/compactBox/API.zh.md"}}},{"node":{"html":"

center

\n

Type: Array
Example: [ 0, 0 ]
Default: The center of graph
Required: false
Explanation: The center of the layout

\n

linkDistance

\n

Type: Number
Default: 50
Required: false
Explanation: Edge length

\n

maxIteration

\n

Type: Number
Default: 1000
Required: false
Explanation: The max number of iteration to stop

\n

focusNode

\n

Type: String | Object
Default: null
Required: false
Explanation: The focus node of the radial layout. If it is not assigned, the first node in the data will take effect. This parameter can be the node's id as String, or the node object.

\n

unitRadius

\n

Type: Number
Default: 100
Required: false
Explanation: The distance between circles. If it is not assigned, this algorithm will calculate a value to fill the whole canvas.

\n

preventOverlap

\n

Type: Boolean
Default: false
Required: false
Explanation: Switch to prevent the node overlappings. It should be used with nodeSize. Only if the nodeSize is assigned, the collide detection will take effect.

\n

nodeSize

\n

Type: Number
Default: 10
Required: false
Explanation: The size of the node(diameter). It will be used in collide dectection for preventing node overlappings.

\n

maxPreventOverlapIteration

\n

Type: Number
Default: 200
Required: false
Explanation: The max number of iterations to stop the prevent node overlappings.

\n

strictRadial

\n

Type: Boolean
Default: true
Required: false
Explanation: Whether layout the radial strictly, which means place the nodes with same level on a circle strictly. It will take effect while preventOverlap is true.

\n\n

\"image.png\"        \"image.png\"      \"image.png\"

\n
\n

（Left）preventOverlap = false。（Center）preventOverlap = false，strictRadial = true。（Right）preventOverlap = false，strictRadial = false。

\n
","fields":{"slug":"/en/examples/net/radialLayout/API"},"frontmatter":{"title":"API","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/radialLayout/API.en.md"}}},{"node":{"html":"

center

\n

类型： Array
示例：[ 0, 0 ]
默认值：图的中心
是否必须：false
说明：布局的中心

\n

linkDistance

\n

类型： Number
默认值：50
是否必须：false
说明：边长度

\n

maxIteration

\n

类型： Number
默认值：1000
是否必须：false
说明：停止迭代到最大迭代数

\n

focusNode

\n

类型：String | Object
默认值：null
是否必须：false
说明：辐射的中心点，默认为数据中第一个节点。可以传入节点 id 或节点本身

\n

unitRadius

\n

类型：Number
默认值：100
是否必须：false
说明：每一圈距离上一圈的距离。默认填充整个画布，即根据图的大小决定

\n

preventOverlap

\n

类型：Boolean
默认值：false
是否必须：false
说明：是否防止重叠，必须配合下面属性 nodeSize ，只有设置了与当前图节点大小相同的 nodeSize 值，才能够进行节点重叠的碰撞检测

\n

nodeSize

\n

类型： Number
默认值：10
是否必须：false
说明：节点大小（直径）。用于防止节点重叠时的碰撞检测

\n

maxPreventOverlapIteration

\n

类型： Number
默认值：200
是否必须：false
说明：防止重叠步骤的最大迭代次数

\n

strictRadial

\n

类型： Boolean
默认值：true
是否必须：false
说明：是否必须是严格的 radial 布局，及每一层的节点严格布局在一个环上。preventOverlap 为 true 时生效。

\n\n

\"image.png\"        \"image.png\"      \"image.png\"

\n
\n

（左）preventOverlap = false。（中）preventOverlap = false，strictRadial = true。（右）preventOverlap = false，strictRadial = false。

\n
","fields":{"slug":"/zh/examples/net/radialLayout/API"},"frontmatter":{"title":"API","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/radialLayout/API.zh.md"}}},{"node":{"html":"

设计规范

","fields":{"slug":"/en/examples/net/radialLayout/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/radialLayout/design.en.md"}}},{"node":{"html":"

设计规范

","fields":{"slug":"/zh/examples/net/radialLayout/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/radialLayout/design.zh.md"}}},{"node":{"html":"

center

\n

Type: Array
Example: [ 0, 0 ]
Default: The center of the graph
Required: false
Explanation: The center of the layout

\n

linkDistance

\n

Type: Number
Default: 50
Required: false
Explanation: Edge length

","fields":{"slug":"/en/examples/net/mdsLayout/API"},"frontmatter":{"title":"API","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/mdsLayout/API.en.md"}}},{"node":{"html":"

设计规范

","fields":{"slug":"/en/examples/net/mdsLayout/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/mdsLayout/design.en.md"}}},{"node":{"html":"

center

\n

类型： Array
示例：[ 0, 0 ]
默认值：图的中心
是否必须：false
说明：布局的中心

\n

linkDistance

\n

类型： Number
默认值：50
是否必须：false
说明：边长度

","fields":{"slug":"/zh/examples/net/mdsLayout/API"},"frontmatter":{"title":"API","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/mdsLayout/API.zh.md"}}},{"node":{"html":"

设计规范

","fields":{"slug":"/zh/examples/net/mdsLayout/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/mdsLayout/design.zh.md"}}},{"node":{"html":"

preventOverlap

\n

Type: Boolean
Default: false
Required: false
Explanation: Prevent node overlappings. Only when the nodeSize is assigned, the collide detection will take effect

\n

nodeSize

\n

Type: Number
Default: 30
Required: false
Explanation: The size of the nodes(diameter). For collide detection to prevent node overlappings

\n

preventOverlapPadding

\n

Type: Number
Default: 10
Required: false
Explanation: The min distance between nodes when preventOverlap is true

\n

condense

\n

Type: Boolean
Default: false
Required: false
Explanation: Uses all available space on false, uses minimal space on true

\n

rows

\n

Type: Number
Default: undefined
Required: false
Explanation: Force num of rows in the grid

\n

cols

\n

Type: Number
Default: undefined
Required: false
Explanation: Force num of columns in the grid

\n

sortBy

\n

Type: String
Default: undefined
Required: false
Explanation: Order the nodes according to this parameter. It is the property's name of node. The node with higher value will be placed to the center. If it is undefined, the algorithm will order the nodes by their degree.

","fields":{"slug":"/en/examples/net/gridLayout/API"},"frontmatter":{"title":"API","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/gridLayout/API.en.md"}}},{"node":{"html":"

preventOverlap

\n

类型：Boolean
默认值：false
是否必须：false
说明：是否防止重叠，必须配合下面属性 nodeSize ，只有设置了与当前图节点大小相同的 nodeSize 值，才能够进行节点重叠的碰撞检测

\n

nodeSize

\n

类型： Number
默认值：30
是否必须：false
说明：节点大小（直径）。用于防止节点重叠时的碰撞检测

\n

preventOverlapPadding

\n

类型：Number
默认值：10
是否必须：false
说明：避免重叠时节点的间距 padding。preventOverlap 为 true 时生效

\n

condense

\n

类型： Boolean
默认值：false
是否必须：false
说明：为 false 时表示利用所有可用画布空间，为 true 时表示利用最小的画布空间

\n

rows

\n

类型： Number
默认值：undefined
是否必须：false
说明：网格的行数，为 undefined 时算法根据节点数量、布局空间、cals（若指定）自动计算

\n

cols

\n

类型： Number
默认值：undefined
是否必须：false
说明：网格的列数，为 undefined 时算法根据节点数量、布局空间、rows（若指定）自动计算

\n

sortBy

\n

类型： String
默认值：undefined
是否必须：false
说明：指定排序的依据（节点属性名），数值越高则该节点被放置得越中心。若为 undefined，则会计算节点的度数，度数越高，节点将被放置得越中心

","fields":{"slug":"/zh/examples/net/gridLayout/API"},"frontmatter":{"title":"API","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/gridLayout/API.zh.md"}}},{"node":{"html":"

设计规范

","fields":{"slug":"/en/examples/net/gridLayout/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/gridLayout/design.en.md"}}},{"node":{"html":"

设计规范

","fields":{"slug":"/zh/examples/net/gridLayout/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/gridLayout/design.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/net/layoutMechanism/API"},"frontmatter":{"title":"API","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/layoutMechanism/API.en.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/net/layoutMechanism/API"},"frontmatter":{"title":"API","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/layoutMechanism/API.zh.md"}}},{"node":{"html":"

设计规范

","fields":{"slug":"/en/examples/net/layoutMechanism/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/layoutMechanism/design.en.md"}}},{"node":{"html":"

设计规范

","fields":{"slug":"/zh/examples/net/layoutMechanism/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/layoutMechanism/design.zh.md"}}},{"node":{"html":"

center

\n

Type: Array
Example: [ 0, 0 ]
Default: The center of the graph
Required: false
Explanation: The center of the layout

\n

maxIteration

\n

Type: Number
Default: 1000
Required: false
Explanation: The max number of iteration

\n

gravity

\n

Type: Number
Default: 10
Required: false
Explanation: The gravity. higher the gravity, more compact the layout

\n

speed

\n

Type: Number
Default: 1
Required: false
Explanation: The speed of node movement in each iteration. Large value may cause swing.

\n

clustering

\n

Type: Boolean
Default: false
Required: false
Explanation: Clutering the nodes

\n

clusterGravity

\n

Type: Number
Default: 10
Required: false
Explanation: The gravity inside each cluster. It will take effect while clustering is true

","fields":{"slug":"/en/examples/net/furchtermanLayout/API"},"frontmatter":{"title":"API","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/furchtermanLayout/API.en.md"}}},{"node":{"html":"

center

\n

类型： Array
示例：[ 0, 0 ]
默认值：图的中心
是否必须：false
说明：布局的中心

\n

maxIteration

\n

类型： Number
默认值：1000
是否必须：false
说明：最大迭代次数

\n

gravity

\n

类型： Number
默认值：10
是否必须：false
说明：重力的大小，影响布局的紧凑程度

\n

speed

\n

类型： Number
默认值：1
是否必须：false
说明：每次迭代节点移动的速度。速度太快可能会导致强烈震荡

\n

clustering

\n

类型： Boolean
默认值：false
是否必须：false
说明：是否按照聚类布局

\n

clusterGravity

\n

类型： Number
默认值：10
是否必须：false
说明：聚类内部的重力大小，影响聚类的紧凑程度，在 clustering 为 true 时生效

","fields":{"slug":"/zh/examples/net/furchtermanLayout/API"},"frontmatter":{"title":"API","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/furchtermanLayout/API.zh.md"}}},{"node":{"html":"

设计规范

","fields":{"slug":"/en/examples/net/furchtermanLayout/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/furchtermanLayout/design.en.md"}}},{"node":{"html":"

设计规范

","fields":{"slug":"/zh/examples/net/furchtermanLayout/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/furchtermanLayout/design.zh.md"}}},{"node":{"html":"

center

\n

Type: Array
Example: [ 0, 0 ]
Default: The center of the graph
Required: false
Explanation: The center of the layout

\n

linkDistance

\n

Type: Number
Default: 50
Required: false
Explanation: The length of the edges

\n

nodeStrength

\n

Type: Number
Default: null
Required: false
Explanation: The force strengh between each pair of nodes. Positive value represents the attractive force, nagtive value represents the repulsive force

\n

edgeStrength

\n

Type: Number
Default: null
Required: false
Explanation: The force strengh between nodes which are connected by an edge. It will be adjusted according to the nodes' degree by default

\n

collideStrength

\n

Type: Number
Default: 1
Required: false
Explanation: The force strengh to prevent node overlappings. The range is [0, 1]

\n

nodeSize

\n

Type: Number
Default: 10
Required: false
Explanation: The size of nodes(diameter). It will be used for collide detections to prevent node overlappings. If it is not assigned, this algorithm will take the sizes of nodes in data into consider. If it is not assigned and there are no sizes in data, 10 will take effect.

\n

alpha

\n

Type: Number
Default: 0.3
Required: false
Explanation: The convergence's threshold of current iteration

\n

alphaDecay

\n

Type: Number
Default: 0.028
Required: false
Explanation: The decay of the convergence's threshold. The range is [0, 1]. 0.028 corresponds to 300 iterations

\n

alphaMin

\n

Type: Number
Default: 0.001
Required: false
Explanation: The threshold to stop the iterations

\n

forceSimulation

\n

Type: Object
Default: null
Required: false
Explanation: Custom force method. If it is not assigned, d3's force method will take effect

\n

onTick

\n

Type: Function
Default: {}
Required: false
Explanation: Callback function after each iteration

\n

onLayoutEnd

\n

Type: Function
Default: {}
Required: false
Explanation: Callback function after layout

","fields":{"slug":"/en/examples/net/forceDirected/API"},"frontmatter":{"title":"API","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/forceDirected/API.en.md"}}},{"node":{"html":"

center

\n

类型： Array
示例：[ 0, 0 ]
默认值：图的中心
是否必须：false
说明：布局的中心

\n

linkDistance

\n

类型： Number
默认值：50
是否必须：false
说明：边长度

\n

nodeStrength

\n

类型： Number
默认值：null
是否必须：false
说明：节点作用力，正数代表节点之间的引力作用，负数代表节点之间的斥力作用

\n

edgeStrength

\n

类型：Number
默认值：null
是否必须：false
说明：边的作用力，默认根据节点的出入度自适应

\n

collideStrength

\n

类型：Number
默认值：1
是否必须：false
说明：防止重叠的力强度，范围 [0, 1]

\n

nodeSize

\n

类型： Number
默认值：10
是否必须：false
说明：节点大小（直径）。用于碰撞检测。若不指定，则根据传入的节点的 size 属性计算。若即不指定，即节点中也没有 size，则默认大小为 10

\n

alpha

\n

类型：Number
默认值：0.3
是否必须：false
说明：当前的迭代收敛阈值

\n

alphaDecay

\n

类型：Number
默认值：0.028
是否必须：false
说明：迭代阈值的衰减率。[0, 1]，0.028 对应迭代书为 300

\n

alphaMin

\n

类型：Number
默认值：0.001
是否必须：false
说明：停止迭代的阈值

\n

forceSimulation

\n

类型：Object
默认值：null
是否必须：false
说明：自定义 force 方法，若不指定，则使用 d3 的方法

\n

onTick

\n

类型：Function
默认值：{}
是否必须：false
说明：每一次迭代的回调函数

\n

onLayoutEnd

\n

类型：Function
默认值：{}
是否必须：false
说明：布局完成后的回调函数

","fields":{"slug":"/zh/examples/net/forceDirected/API"},"frontmatter":{"title":"API","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/forceDirected/API.zh.md"}}},{"node":{"html":"

设计规范

","fields":{"slug":"/zh/examples/net/forceDirected/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/forceDirected/design.zh.md"}}},{"node":{"html":"

设计规范

","fields":{"slug":"/en/examples/net/forceDirected/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/forceDirected/design.en.md"}}},{"node":{"html":"

center

\n

Type: Array
Example: [ 0, 0 ]
Default: The center of grpah
Required: false
Explanation: The center of the layout

\n

preventOverlap

\n

Type: Boolean
Default: false
Required: false
Explanation: Switch to prevent the node overlappings. It should be used with nodeSize. Only if the nodeSize is assigned, the collide detection will take effect.

\n

nodeSize

\n

Type: Number
Default: 30
Required: false
Explanation: The size of the node(diameter). It will be used in collide dectection for preventing node overlappings.

\n

minNodeSpacing

\n

Type: Number
Default: 10
Required: false
Explanation: The min distance between rings.

\n

sweep

\n

Type: Number
Default: undefined
Required: false
Explanation: How many radians should be between the first and last node (defaults to full circle). If it is undefined, 2 * Math.PI * (1 - 1 / |level.nodes|) will be used, where level.nodes is nodes set of each level, |level.nodes| is the number of nodes of the level.

\n

equidistant

\n

Type: Boolean
Default: false
Required: false
Explanation: Whether levels have an equal radial distance between them, may cause bounding box overflow

\n

startAngle

\n

Type: Number
Default: 3 / 2 * Math.PI
Required: false
Explanation: Where nodes start in radians

\n

clockwise

\n

Type: Boolean
Default: false
Required: false
Explanation: Place the nodes in clockwise or not.

\n

maxLevelDiff

\n

Type: Number
默认值: **undefined
Required: false
Explanation**: The sum of concentric values in each level. If it is undefined, maxValue / 4 will take place, where maxValue is the max value of ordering properties. For example, if sortBy='degree', maxValue is the max degree value of all the nodes

\n

sortBy

\n

Type: String
Default: undefined
Required: false
Explanation: Order the nodes according to this parameter. It is the property's name of node. The node with higher value will be placed to the center. If it is undefined, the algorithm will order the nodes by their degree.

","fields":{"slug":"/en/examples/net/concentricLayout/API"},"frontmatter":{"title":"API","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/concentricLayout/API.en.md"}}},{"node":{"html":"

center

\n

类型： Array
示例：[ 0, 0 ]
默认值：图的中心
是否必须：false
说明：布局的中心

\n

preventOverlap

\n

类型：Boolean
默认值：false
是否必须：false
说明：是否防止重叠，必须配合下面属性 nodeSize ，只有设置了与当前图节点大小相同的 nodeSize 值，才能够进行节点重叠的碰撞检测

\n

nodeSize

\n

类型： Number
默认值：30
是否必须：false
说明：节点大小（直径）。用于防止节点重叠时的碰撞检测

\n

minNodeSpacing

\n

类型： Number
默认值：10
是否必须：false
说明：环与环之间最小间距，用于调整半径

\n

sweep

\n

类型： Number
默认值：undefined
是否必须：false
说明：第一个节点与最后一个节点之间的弧度差。若为 undefined ，则将会被设置为 2 * Math.PI * (1 - 1 / |level.nodes|) ，其中 level.nodes 为该算法计算出的每一层的节点，|level.nodes| 代表该层节点数量

\n

equidistant

\n

类型： Boolean
默认值：false
是否必须：false
说明：环与环之间的距离是否相等

\n

startAngle

\n

类型： Number
默认值：3 / 2 * Math.PI
是否必须：false
说明：开始方式节点的弧度

\n

clockwise

\n

类型： Boolean
默认值：false
是否必须：false
说明：是否按照顺时针排列

\n

maxLevelDiff

\n

类型： Number
默认值：undefined
是否必须：false
说明：每一层同心值的求和。若为 undefined，则将会被设置为 maxValue / 4 ，其中 maxValue 为最大的排序依据的属性值。例如，若 sortBy='degree'，则 maxValue 为所有节点中度数最大的节点的度数

\n

sortBy

\n

类型： String
默认值：undefined
是否必须：false
说明：指定排序的依据（节点属性名），数值越高则该节点被放置得越中心。若为 undefined，则会计算节点的度数，度数越高，节点将被放置得越中心

","fields":{"slug":"/zh/examples/net/concentricLayout/API"},"frontmatter":{"title":"API","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/concentricLayout/API.zh.md"}}},{"node":{"html":"

设计规范

","fields":{"slug":"/en/examples/net/concentricLayout/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/concentricLayout/design.en.md"}}},{"node":{"html":"

设计规范

","fields":{"slug":"/zh/examples/net/concentricLayout/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/concentricLayout/design.zh.md"}}},{"node":{"html":"

rankdir

\n

Type: String
Options: 'TB' | 'BT' | 'LR' | 'RL'
Default: 'TB'
Required: false
Explanation: The layout direction. T: top; B: bottom; L: left; R: right.

\n\n
\n

align

\n

Type: String
Options: 'UL' | 'UR' | 'DL' | 'DR'
Default: 'UL'
Required: false
Explanation: Alignment. U: upper; D: down; L: left; R: right

\n\n

nodesep

\n

Type: Number
Default: 50
Required: false
Explanation: The node separation(px)

\n

ranksep

\n

Type: Number
Default: 50
Required: false
Explanation: The level separation(px)

\n

controlPoints

\n

Type: Boolean
Default: true
Required: false
Explanation: Whether keep the control points of edges

","fields":{"slug":"/en/examples/net/dagreFlow/API"},"frontmatter":{"title":"API","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/dagreFlow/API.en.md"}}},{"node":{"html":"

rankdir

\n

类型： String
可选值：'TB' | 'BT' | 'LR' | 'RL'
默认值：'TB'
是否必须：false
说明：布局的方向。T：top（上）；B：bottom（下）；L：left（左）；R：right（右）。

\n\n
\n

align

\n

类型： String
可选值：'UL' | 'UR' | 'DL' | 'DR'
默认值：'UL'
是否必须：false
说明：节点对齐方式。U：upper（上）；D：down（下）；L：left（左）；R：right（右）

\n\n

nodesep

\n

类型： Number
默认值：50
是否必须：false
说明：节点间距（px）

\n

ranksep

\n

类型： Number
默认值：50
是否必须：false
说明：层间距（px）

\n

controlPoints

\n

类型： Boolean
默认值：true
是否必须：false
说明：是否保留布局连线的控制点

","fields":{"slug":"/zh/examples/net/dagreFlow/API"},"frontmatter":{"title":"API","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/dagreFlow/API.zh.md"}}},{"node":{"html":"

设计规范

","fields":{"slug":"/en/examples/net/dagreFlow/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/dagreFlow/design.en.md"}}},{"node":{"html":"

设计规范

","fields":{"slug":"/zh/examples/net/dagreFlow/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/dagreFlow/design.zh.md"}}},{"node":{"html":"

center

\n

Type: Array
Example: [ 0, 0 ]
Default: The center of the graph
Required: false
Explanation: The center of the layout

\n

radius

\n

Type: Number
Default: null
Required: false
Explanation: The radius of the circle. If the radius is assigned a value, the startRadius and endRadius will not take effect

\n

startRadius

\n

Type: Number
Default: null
Required: false
Explanation: The start radius of spiral style layout

\n

endRadius

\n

Type: Number
Default: null
Required: false
Explanation: The end radius of spiral style layout

\n

clockwise

\n

Type: Boolean
Default: true
Required: false
Explanation: If layout the nodes by clockwise

\n

divisions

\n

Type: Number
Default: 1
Required: false
Explanation: The number of divisions on the circle. It will takes effect while endRadius - startRadius != 0

\n

ordering

\n

Type: String
Default: false
可选值: null | 'topology' | 'degree'
Required: false
Explanation: The nodes will be ordered according to this parameter. null means order the nodes in data order/ 'topology' means order the node by topology. 'degree' means order the nods by their degrees.

\n

angleRatio

\n

Type: Number
Default: 1
Required: false
Explanation: How many 2*PI between the first node to the last node.

","fields":{"slug":"/en/examples/net/circular/API"},"frontmatter":{"title":"API","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/circular/API.en.md"}}},{"node":{"html":"

center

\n

类型： Array
示例：[ 0, 0 ]
默认值：图的中心
是否必须：false
说明：布局的中心

\n

radius

\n

类型： Number
默认值：null
是否必须：false
说明：圆的半径。若设置了 radius，则 startRadius 与 endRadius 不生效

\n

startRadius

\n

类型： Number
默认值：null
是否必须：false
说明：螺旋状布局的起始半径

\n

endRadius

\n

类型：Number
默认值：null
是否必须：false
说明：螺旋状布局的结束半径

\n

clockwise

\n

类型：Boolean
默认值：true
是否必须：false
说明：是否顺时针排列

\n

divisions

\n

类型：Number
默认值：1
是否必须：false
说明：节点在环上的分段数（几个段将均匀分布），在 endRadius - startRadius != 0 时生效

\n

ordering

\n

类型：String
默认值：false
可选值：null | 'topology' | 'degree'
是否必须：false
说明：节点在环上排序的依据。默认 null 代表直接使用数据中的顺序。'topology' 按照拓扑排序。'degree' 按照度数大小排序

\n

angleRatio

\n

类型： Number
默认值：1
是否必须：false
说明：从第一个节点到最后节点之间相隔多少个 2*PI

","fields":{"slug":"/zh/examples/net/circular/API"},"frontmatter":{"title":"API","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/circular/API.zh.md"}}},{"node":{"html":"

设计规范

","fields":{"slug":"/en/examples/net/circular/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/circular/design.en.md"}}},{"node":{"html":"

设计规范

","fields":{"slug":"/zh/examples/net/circular/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/circular/design.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/net/arcDiagram/API"},"frontmatter":{"title":"API","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/arcDiagram/API.en.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/net/arcDiagram/API"},"frontmatter":{"title":"API","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/arcDiagram/API.zh.md"}}},{"node":{"html":"

设计规范

","fields":{"slug":"/en/examples/net/arcDiagram/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/arcDiagram/design.en.md"}}},{"node":{"html":"

设计规范

","fields":{"slug":"/zh/examples/net/arcDiagram/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/arcDiagram/design.zh.md"}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"exampleSections":{"examples":[{"relativePath":"scatter/customAnimate/demo/position.js","absolutePath":"/Users/moyee/ant-repo/github/g6/examples/scatter/customAnimate/demo/position.js","source":"import G6 from '@antv/g6';\n\nconst r = 50;\nconst radius = Math.PI;\n\nconst graph = new G6.Graph({\n container: 'container',\n width: 500,\n height: 500,\n animate: true,\n animateCfg: {\n duration: 1000,\n onFrame(node, ratio, toAttrs, fromAttrs) {\n const current = radius * ratio;\n let x = fromAttrs.x;\n let y = fromAttrs.y;\n if (fromAttrs.x > toAttrs.x) {\n x = x - r + r * Math.cos(current);\n y += r * Math.sin(current);\n } else {\n x = x + r - r * Math.cos(current);\n y -= r * Math.sin(current);\n }\n return { x, y };\n }\n }\n});\n\n// 加入两个节点\nconst node1 = graph.addItem('node', {\n id: 'node1',\n x: 100,\n y: 100,\n shape: 'circle',\n style: { fill: '#F04864', lineWidth: 0 }\n});\nconst node2 = graph.addItem('node', {\n id: 'node2',\n x: 200,\n y: 100,\n shape: 'circle',\n style: { fill: '#40a9ff', lineWidth: 0 }\n});\n\n// 循环动画\nlet count = 0;\nsetInterval(() => {\n if (count % 2 === 0) {\n node1.get('model').x = 200;\n node2.get('model').x = 100;\n } else {\n node1.get('model').x = 100;\n node2.get('model').x = 200;\n }\n count++;\n graph.refresh();\n}, 1000);\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g6\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g6\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g6);\n global.position = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_g) {\n \"use strict\";\n\n _g = _interopRequireDefault(_g);\n\n function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\n var r = 50;\n var radius = Math.PI;\n var graph = new _g.default.Graph({\n container: 'container',\n width: 500,\n height: 500,\n animate: true,\n animateCfg: {\n duration: 1000,\n onFrame: function onFrame(node, ratio, toAttrs, fromAttrs) {\n var current = radius * ratio;\n var x = fromAttrs.x;\n var y = fromAttrs.y;\n\n if (fromAttrs.x > toAttrs.x) {\n x = x - r + r * Math.cos(current);\n y += r * Math.sin(current);\n } else {\n x = x + r - r * Math.cos(current);\n y -= r * Math.sin(current);\n }\n\n return {\n x: x,\n y: y\n };\n }\n }\n }); // 加入两个节点\n\n var node1 = graph.addItem('node', {\n id: 'node1',\n x: 100,\n y: 100,\n shape: 'circle',\n style: {\n fill: '#F04864',\n lineWidth: 0\n }\n });\n var node2 = graph.addItem('node', {\n id: 'node2',\n x: 200,\n y: 100,\n shape: 'circle',\n style: {\n fill: '#40a9ff',\n lineWidth: 0\n }\n }); // 循环动画\n\n var count = 0;\n setInterval(function () {\n if (count % 2 === 0) {\n node1.get('model').x = 200;\n node2.get('model').x = 100;\n } else {\n node1.get('model').x = 100;\n node2.get('model').x = 200;\n }\n\n count++;\n graph.refresh();\n }, 1000);\n});","order":0,"filename":"position.js","title":"自定义动画","screenshot":"https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*ydwXRZu4fHcAAAAAAAAAAABkARQnAQ"}]},"prev":{"node":{"fields":{"slug":"/zh/examples/scatter/changePosition"},"frontmatter":{"title":"改变节点位置","order":4},"html":"

通过 changeData 方法不断地改变节点位置，以达到动画的效果。

\n

使用指南

\n

对于一些简单的动画场景，可以通过这种方式来实现。稍复杂的场景，不建议使用这种方式。

\n

G6 中更多关于动画的内容，请参考文档 动画。

"}},"next":{"node":{"fields":{"slug":"/zh/examples/tool/tooltip"},"frontmatter":{"title":"提示框","order":0},"html":"

G6 中内置的 Tooltip 组件。

\n

使用指南

\n

下面的代码演示展示了如何在图上使用 tooltip。如果需要定义 tooltip 的样式，需要定义类名为 g6-tooltip 的标签的 CSS 样式：

\n
.g6-tooltip {\n    border: 1px solid #e2e2e2;\n    border-radius: 4px;\n    font-size: 12px;\n    color: #545454;\n    background-color: rgba(255, 255, 255, 0.9);\n    padding: 10px 8px;\n    box-shadow: rgb(174, 174, 174) 0px 0px 10px;\n  }
"}}}}}