![\"image.png\"](\"https://cdn.nlark.com/yuque/0/2019/png/244306/1561032531743-bd0ad563-e0e3-47ec-912b-8d95d200aee6.png#align=left&display=inline&height=535&name=image.png&originHeight=1070&originWidth=1128&search=&size=320637&status=done&width=564\")
Graph 是 G6 图表的载体，所有的 G6 节点实例操作以及事件，行为监听都在 Graph 实例上进行。
\nGraph 的生命周期为：初始化—>加载数据—>渲染—>更新—>销毁。
\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文档 |
重点说明: G6 3.1 版本中实例化 Graph 时，新增了 nodeStateStyles及 edgeStateStyles两个配置项，删除了 nodeStyle 和 edgeStyle ，使用 3.1 以下版本的同学，只需要将 nodeStyle 改成 nodeStateStyles ，将 edgeStyle 改成 edgeStateStyles ，配置内容保持不变。
用法\nGraph 的初始化通过 new 进行实例化，实例化时需要传入需要的参数。
\nconst 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| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| data | Object | true | 初始化的图数据，是一个包括 nodes 和 edges 的对象 |
\n用法
\nconst 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用法
\ngraph.render();\n根据提供的数据渲染组群。
\n参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| data | Object | true | 渲染图的数据 |\n| groupType | string | true | group类型，支持circle、rect |
\n用法
\nconst 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接收数据，并进行渲染，read 方法的功能相当于 data 和 render 方法的结合。
\n参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| data | Object | true | 初始化的图数据，是一个包括 nodes 和 edges 的对象 |
\n用法
\nconst 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参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| data | Object | true | 初始化的图数据，是一个包括 nodes 和 edges 的对象 |
\n用法
\nconst 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参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| groupId | String | true | 分组ID |
\n用法
\ngraph.collapseGroup('groupId');\n展开分组，显示分组中的所有节点和边，恢复收起前的连接情况。
\n参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| groupId | String | true | 分组ID |
\n用法
\ngraph.expandGroup('groupId');\n新增元素。
\n参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| type | String | true | 元素类型，可选值为 node、edge 和group |\n| model | Object | true | 元素的数据模型，type = group 时，参看这里 |
\n用法
\nconst 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同 addItem(type, model)。
\n更新元素，包括更新数据、样式等。
\n参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| item | String | Object | true | 元素 ID 或元素实例 |\n| cfg | Object | false | 需要更新的数据模型 |
\n用法
\nconst 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同updateItem(item, model)。
\nnew删除元素，当 item 为 group ID 时候，则删除分组。
\n参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| item | String | Object | true | 元素ID或元素实例 |
\n用法
\n// 通过ID查询节点实例\nconst item = graph.findById('node');\ngraph.removeItem(item);\n同 removeItem(item)。
\n当源数据发生变更时，根据新数据刷新视图。
\n该方法无参数。
\n用法
\ngraph.refresh();\n刷新指定元素。
\n参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| item | String | Object | true | 元素ID或元素实例 |
\n用法
\n// 通过ID查询节点实例\nconst item = graph.findById('node');\ngraph.refreshItem(item);\n当节点位置发生变化时，刷新所有节点位置，并重计算边的位置。
\n该方法无参数。
\n用法
\ngraph.refreshPositions();\n仅重新绘制画布。当设置了元素样式或状态后，通过调用 paint() 方法，让修改生效。
该方法无参数。
\n用法
\nconst 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设置是否在更新/删除后自动重绘，一般搭配 paint() 方法使用。
参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| auto | Boolean | true | 是否自动重绘 |
\n用法
\nconst 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);\nG6 3.1 内置了丰富的布局。关于如何使用 G6 中内置的布局，请参考 Layout API文档。
\n重新以当前配置的属性进行一次布局。
\n用法
\nconst 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更新布局配置项。
\ncfg 中含有 type 字段，type 字段类型为 String，且与现有布局方法不同，则更换布局；cfg 中不包含 type 字段，则保持原有布局，仅更新布局配置项。参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| cfg | Object | true | 新布局配置项 |
\n用法
\nconst 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清除画布元素。该方法一般用于清空数据源，重新设置数据源，重新 render 的场景，此时所有的图形都会被清除。
\n该方法无参数。
\n用法
\ngraph.clear();\n销毁画布。
\n该方法无参数。
\n用法
\ngraph.destroy();\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参数\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该方法在执行过程中会触发beforitemstatechange，afteritemstatechange事件。
参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| item | String | Object | true | 元素 ID 或元素实例 |\n| state | String | true | 状态值，支持自定义，如 selected、hover、actived等。 |\n| enabled | Boolean | true | 是否启用状态 |
\n用法
\ngraph.setItemState('node1', 'selected', true);\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设置各个节点样式，以及在各个状态下节点的 KeyShape 的样式。
\n提示：该方法必须在 render 之前调用，否则不起作用。
\n参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| nodeFn | Function | true | 指定每个节点样式 |
\n用法
\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提示：该方法必须在 render 之前调用，否则不起作用。
\n参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| edgeFn | Function | true | 指定每条边的样式 |
\n用法
\ngraph.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| 名称 | 类型 | 是否必选 | 描述 |\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参数\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参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| mode | String | true | 模式的名称 |
\n用法
\nconst 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该方法无参数。
\n返回值
\n用法
\n// 返回值mode表示当前的行为模式\nconst mode = graph.getCurrentMode();\n获取当前视口的缩放比例。
\n该方法无参数。
\n返回值
\n用法
\n// 返回值zoom表示当前视口的缩放比例\nconst zoom = graph.getZoom();\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参数\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参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| item | String | Object | true | 元素 ID 或元素实例 |
\n用法
\ngraph.focusItem(item);\n改变画布大小。
\n参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| width | Number | true | 画布宽度 |\n| height | Number | true | 画布高度 |
\n用法
\ngraph.changeSize(600, 350);\n采用相对位移来平移画布。
\n参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| dx | Number | true | 水平方向位移 |\n| dy | Number | true | 垂直方向位移 |
\n用法
\ngraph.translate(100, 100);\n采用绝对位移将画布移动到指定坐标。
\n参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| x | Number | true | 水平方向坐标 |\n| y | Number | true | 垂直方向坐标 |
\n用法
\ngraph.moveTo(200, 300);\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| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| type | String | true | 元素类型，可选值为 node、edge |\n| fn | Function | true | 查找的规则 |
\n返回值
\nundefined 。用法
\nconst findNode = graph.find('node', node => {\n return node.get('model').x === 100;\n});\n根据 ID，查询对应的元素实例。
\n参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| id | String | true | 元素 ID |
\n返回值
\nundefined。用法
\nconst node = graph.findById('node');\n查询所有满足规则的元素。
\n参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| type | String | true | 元素类型，可选值为 node、edge |\n| fn | Function | true | 查找的规则 |
\n返回值
\nundefined。用法
\nconst nodes = graph.findAll('node', node => {\n return node.get('model').x;\n});\n查找所有处于指定状态的元素。
\n参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| type | String | true | 元素类型，可选值为 node、edge |\n| state | String | true | 状态 |
\n返回值
\n用法
\n// 查询所有选中的元素\nconst nodes = graph.findAllByState('node', 'selected');\n获取图数据。
\n该方法无参数。
\n返回值
\n返回值包括所有节点和边，数据结构如下下所示：
\n{\nnodes: [],\nedges: [],\ngroups: [],\n}用法
\ngraph.save();\n获取图中所有节点的实例。
\n注意：这里返回的是节点的实例，而不是节点的数据项。
\n返回值
\n用法
\nconst nodes = graph.getNodes();\n获取图中所有边的实例。
\n注意：这里返回的是边的实例，而不是边的数据项。
\n返回值
\n用法
\nconst edges = graph.getEdges();\n这部分主要是说明视口坐标、Canvas 坐标和页面坐标之前的相互转换。其中视口坐标和 Canvas 坐标的示意图如下所示。
将屏幕/页面坐标转换为视口坐标。
\n参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| clientX | Number | true | 屏幕 x 坐标 |\n| clientY | Number | true | 屏幕 y 坐标 |
\n返回值
\n用法
\nconst point = graph.getPointByClient(e.clientX, e.clientY);\nconsole.log('视口x/y坐标分别为:', point.x, point.y);\n将视口坐标转换为屏幕/页面坐标。
\n参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| x | Number | true | 视口 x 坐标 |\n| y | Number | true | 视口 y 坐标 |
\n返回值
\n用法
\nconst point = graph.getClientByPoint(100, 200);\nconsole.log('屏幕/页面x/y坐标分别为:', point.x, point.y);\n将 Canvas 画布坐标转换为视口坐标。
\n参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| canvasX | Number | true | 画布x坐标 |\n| canvasY | Number | true | 画布y坐标 |
\n返回值
\n用法
\nconst point = graph.getPointByCanvas(100, 200);\nconsole.log('视口x/y坐标分别为:', point.x, point.y);\n将视口坐标转换为 Canvas 画布坐标。
\n参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| x | Number | true | 视口 x 坐标 |\n| y | Number | true | 视口 y 坐标 |
\n返回值
\n用法
\nconst point = graph.getCanvasByPoint(100, 200);\nconsole.log('Canvas画布的x/y坐标分别为:', point.x, point.y);\n根据 Graph 上的 animateCfg 配置项，处理视口中节点的动画。
\n停止画布上的所有动画。
\n用法
\ngraph.stopAnimate();\n判断当前是否有正在执行的动画。
\n添加指定的插件。
\n参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| plugin | Object | true | 插件实例 |
\n用法
\nimport miniMap from '@antv/g6/build/minimap';\ngraph.Plugin(miniMap);\n移除指定的插件。
\n参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| plugin | Object | true | 插件实例 |
\n用法
\nimport miniMap from '@antv/g6/build/minimap';\ngraph.removePlugin(miniMap);\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参数\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参数\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| name | String | true | 图片的名称 |
\n用法
\ngraph.downloadImage();\n将画布上元素生成为图片的 URL。
\n返回值
\n用法
\nconst dataURL = graph.toDataURL();\n