![](\"https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*lEL3TrCLnPsAAAAAAAAAAAAADmJ7AQ/original\")
\n![](\"https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*yFa5RKilu6kAAAAAAAAAAAAADmJ7AQ/original\")
\n\nThis extension package provides 3D elements, behaviors and plugins for G6.\n\n## Usage\n\n1. Install\n\n```bash\nnpm install @antv/g6-extension-3d\n```\n\n2. Import and Register\n\n> Where renderer, elements and lighting are necessary\n\n```js\nimport { ExtensionCategory, register } from '@antv/g6';\nimport { DragCanvas3D, Light, Line3D, Sphere, renderer } from '@antv/g6-extension-3d';\n\n// 3d light plugin\nregister(ExtensionCategory.PLUGIN, '3d-light', Light);\n// sphere node element\nregister(ExtensionCategory.NODE, 'sphere', Sphere);\n// line edge element\nregister(ExtensionCategory.EDGE, 'line3d', Line3D);\n// drag canvas in 3d scene\nregister(ExtensionCategory.BEHAVIOR, 'drag-canvas-3d', DragCanvas3D);\n// camera setting plugin\nregister(ExtensionCategory.PLUGIN, 'camera-setting', CameraSetting);\n```\n\n3. Use\n\n```js\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n renderer, // use 3d renderer\n data: {\n // your data\n },\n node: {\n type: 'sphere', // use sphere node\n },\n edge: {\n type: 'line3d', // use 3d line edge\n },\n behaviors: ['drag-canvas-3d'],\n plugins: [\n // set camera configs, see: https://g.antv.antgroup.com/en/api/camera/intro\n {\n type: 'camera-setting',\n projectionMode: 'perspective',\n near: 0.1,\n far: 1000,\n fov: 45,\n aspect: 1,\n },\n // add directional light\n {\n type: '3d-light',\n directional: {\n direction: [0, 0, 1],\n },\n },\n ],\n});\n```\n\n## Resources\n\n- [Lite Solar System](https://g6.antv.antgroup.com/en/examples/feature/default/#lite-solar-system)\n- [3D Node](https://g6.antv.antgroup.com/en/examples/element/node/#3d-node)\n","packages/g6-extension-react/README.md":"## React extension for G6\n\n![](\"https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*rWSiT6dnwfcAAAAAAAAAAAAADmJ7AQ/original\")
\n\nThis extension allows you to define G6 node by React component and JSX syntax.\n\n## Usage\n\n1. Install\n\n```bash\nnpm install @antv/g6-extension-react\n```\n\n2. Import and Register\n\n```js\nimport { ExtensionCategory, register } from '@antv/g6';\nimport { ReactNode } from '@antv/g6-extension-react';\n\nregister(ExtensionCategory.NODE, 'react', ReactNode);\n```\n\n3. Define Node\n\nReact Node:\n\n```jsx\nconst ReactNode = () => {\n return - viewport: Export viewport content
- overall: Export entire canvas |\n| type | 'image/png' \\| 'image/jpeg' \\| 'image/webp' | No | Image type
- image/png: PNG format
- image/jpeg: JPEG format
- image/webp: WebP format |\n| encoderOptions | number | No | Image quality, only effective for image/jpeg and image/webp, range 0 ~ 1 |\n\n## Download Image\n\nG6 5.0 only provides an API to export the canvas as a Base64 image ([toDataURL](#graphtodataurloptions)). If you need to download the image, you can use the following method:\n\n```typescript\nasync function downloadImage() {\n const dataURL = await graph.toDataURL();\n const [head, content] = dataURL.split(',');\n const contentType = head.match(/:(.*?);/)![1];\n\n const bstr = atob(content);\n let length = bstr.length;\n const u8arr = new Uint8Array(length);\n\n while (length--) {\n u8arr[length] = bstr.charCodeAt(length);\n }\n\n const blob = new Blob([u8arr], { type: contentType });\n\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = 'graph.png';\n a.click();\n}\n```\n\n
\n\n:::warning{title=Note}\nThe exported image content may not include the complete canvas content. The export range only includes the content within the Graph canvas. Some plugins use custom containers, canvases, etc., which will not appear in the exported image.\n:::\n","packages/site/docs/api/export-image.zh.md":"---\ntitle: 导出图片\norder: 12\n---\n\n## 图片导出概述\n\nG6 提供了将图导出为图片的功能，可以将当前画布内容导出为 DataURL 格式，方便保存、分享或进一步处理。导出的图片会保留画布上的所有可见元素，包括节点、边、组合以及其他自定义图形。\n\n## API 参考\n\n### Graph.toDataURL(options)\n\n将当前画布导出为 DataURL 格式的图片。\n\n```typescript\ntoDataURL(options?: Partial
- viewport: 导出视口内容
- overall: 导出整个画布 |\n| type | 'image/png' \\| 'image/jpeg' \\| 'image/webp' | 否 | 图片类型
- image/png: PNG 格式
- image/jpeg: JPEG 格式
- image/webp: WebP 格式 |\n| encoderOptions | number | 否 | 图片质量，仅对 image/jpeg 和 image/webp 有效，取值范围 0 ~ 1 |\n\n## 下载图片\n\nG6 5.0 仅提供导出画布为 Base64 图片的 API([toDataURL](#graphtodataurloptions))，如果需要下载图片，可以使用以下方法：\n\n```typescript\nasync function downloadImage() {\n const dataURL = await graph.toDataURL();\n const [head, content] = dataURL.split(',');\n const contentType = head.match(/:(.*?);/)![1];\n\n const bstr = atob(content);\n let length = bstr.length;\n const u8arr = new Uint8Array(length);\n\n while (length--) {\n u8arr[length] = bstr.charCodeAt(length);\n }\n\n const blob = new Blob([u8arr], { type: contentType });\n\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = 'graph.png';\n a.click();\n}\n```\n\n
\n\n:::warning{title=注意}\n导出的图片内容可能不会包含完整的画布内容，导出范围仅包含 Graph 画布中的内容。部分插件使用了自定义的容器、画布等，这部分内容不会出现在导出的图片中。\n:::\n","packages/site/docs/api/graph.en.md":"---\ntitle: Graph Instance\norder: 2\n---\n\n## API Reference\n\n### Graph.destroy()\n\nDestroy the current graph instance and release all resources related to it.\n\n⚠️ **Note**: After destruction, no operations can be performed. If you need to use it again, you must create a new graph instance.\n\n```typescript\ndestroy(): void;\n```\n\n**Usage Scenarios**:\n\n- When the user closes the chart or switches to another view, this method can be called to release resources.\n- When needing to recreate a graph instance, ensure the old instance is destroyed first to avoid memory leaks.\n","packages/site/docs/api/graph.zh.md":"---\ntitle: 图实例\norder: 2\n---\n\n## API 参考\n\n### Graph.destroy()\n\n销毁当前图实例，释放与图实例相关的所有资源。\n\n⚠️ **注意**: 销毁后无法进行任何操作，如果需要重新使用，需要重新创建一个新的图实例。\n\n```typescript\ndestroy(): void;\n```\n\n**使用场景**:\n\n- 当用户关闭图表或切换到其他视图时，可以调用此方法来释放资源。\n- 在需要重新创建图实例时，确保先销毁旧的实例，以避免内存泄漏。\n","packages/site/docs/api/layout.en.md":"---\ntitle: Layout\norder: 6\n---\n\n## Overview of Layout\n\n[Layout](/en/manual/layout/overview) is a crucial part of graph visualization, determining the positioning of nodes on the canvas. G6 offers a variety of layout algorithms to meet different data structures and visualization needs. Through the layout API, you can:\n\n- Set and update the graph's layout configuration\n- Execute or stop layout calculations\n- Combine multiple layout strategies\n- Customize layout algorithms\n\nA suitable layout can clearly display the relationship patterns between nodes, enhancing the graph's readability and aesthetics.\n\n## API Reference\n\n### Graph.setLayout(layout)\n\nSet the graph's layout algorithm and configuration.\n\n⚠️ **Note**: Calling this function won't automatically re-layout, so there's need to call `graph.layout()` separately.\n\n```typescript\nsetLayout(layout: LayoutOptions | ((prev: LayoutOptions) => LayoutOptions)): void;\n```\n\n**Parameters**\n\n| Parameter | Description | Type | Default | Required |\n| --------- | -------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | ------- | -------- |\n| layout | Layout configuration object, or a function returning a new configuration based on the previous one | [LayoutOptions](#layoutoptions) \\| ((prev: LayoutOptions) => LayoutOptions) | - | ✓ |\n\n**Example 1**: Set a force-directed layout\n\n```typescript\n// Set a simple force-directed layout\ngraph.setLayout({\n type: 'force',\n preventOverlap: true, // Prevent node overlap\n nodeStrength: -50, // Repulsion between nodes, negative value for repulsion\n edgeStrength: 0.5, // Edge strength, affects edge length\n});\n```\n\n**Example 2**: Update layout using a function\n\n```typescript\n// Update based on the current layout configuration\ngraph.setLayout((prevLayout) => {\n // If the previous layout was force-directed, adjust its parameters\n if (prevLayout.type === 'force') {\n return {\n ...prevLayout,\n preventOverlap: true,\n nodeStrength: -100, // Increase repulsion\n alphaDecay: 0.01, // Lower decay rate for more iteration time\n };\n }\n\n // Otherwise, switch to radial layout\n return {\n type: 'radial',\n unitRadius: 100,\n preventOverlap: true,\n };\n});\n```\n\n**Example 3**: Set a combined layout\n\n```typescript\n// Set a combined layout - different nodes use different layout algorithms\ngraph.setLayout([\n {\n type: 'grid',\n // Filter function: only nodes with type 'main' participate in the layout\n nodeFilter: (node) => node.data.type === 'main',\n rows: 1,\n },\n {\n type: 'circle',\n nodeFilter: (node) => node.data.type === 'sub',\n radius: 100,\n },\n]);\n```\n\n### Graph.getLayout()\n\nGet the current layout configuration.\n\n```typescript\ngetLayout(): LayoutOptions;\n```\n\n**Return Value**\n\n- **Type**: [LayoutOptions](#layoutoptions)\n- **Description**: The current layout configuration object\n\n**Example**\n\n```typescript\n// Get the current layout configuration\nconst currentLayout = graph.getLayout();\nconsole.log('Current layout type:', currentLayout.type);\n```\n\n### Graph.layout(layoutOptions)\n\nExecute layout calculations. When graph data changes, call this method to trigger the layout algorithm to recalculate node positions.\n\n```typescript\nlayout(layoutOptions?: LayoutOptions): Promise
Related Parameters
\n\n**Return Value**:\n\n- **Type:** false \\| 'light' \\| 'dark' \\| string\n\n- **Description:** Current theme\n\nRelated Parameters
\n\n| \n\nParameter\n\n | \n\nType\n\n | \n\nDescription\n\n |
|---|---|---|
| \n\ntheme\n\n | \n\nfalse \\| 'light' \\| 'dark' \\| string \\| ((prev: false \\| 'light' \\| 'dark' \\| string) => false \\| 'light' \\| 'dark' \\| string)\n\n | \n\nTheme name\n\n |
相关参数
\n\n**返回值**：\n\n- **类型：** false \\| 'light' \\| 'dark' \\| string\n\n- **描述：** 当前主题\n\n相关参数
\n\n| \n\n参数\n\n | \n\n类型\n\n | \n\n描述\n\n |
|---|---|---|
| \n\ntheme\n\n | \n\nfalse \\| 'light' \\| 'dark' \\| string \\| ((prev: false \\| 'light' \\| 'dark' \\| string) => false \\| 'light' \\| 'dark' \\| string)\n\n | \n\n主题名\n\n |
⚠️ Note, setting `trigger` to `['drag']` will cause the `drag-canvas` behavior to fail. The two cannot be configured simultaneously. | string[] \\| (`Control` \\| `Shift`\\| `Alt` \\| `......`)[] | [`shift`] | |\n\n### immediately\n\nWhether to select immediately, only effective when selection mode is `default`\n\n```js\nconst graph = new Graph({\n behaviors: [\n {\n type: 'brush-select',\n key: 'brush-select',\n immediately: true, // Elements are immediately selected as the box encloses them\n trigger: [], // No need to press other keys, just click and drag the mouse to select\n },\n ],\n});\n```\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 400,\n height: 200,\n data: {\n nodes: [\n { id: 'node-1', style: { x: 100, y: 50 } },\n { id: 'node-2', style: { x: 260, y: 50 } },\n { id: 'node-3', style: { x: 280, y: 100 } },\n ],\n edges: [\n { source: 'node-1', target: 'node-2' },\n { source: 'node-1', target: 'node-3' },\n { source: 'node-2', target: 'node-3' },\n ],\n },\n node: {\n style: { fill: '#7e3feb' },\n },\n edge: {\n stroke: '#8b9baf',\n },\n behaviors: [\n {\n type: 'brush-select',\n key: 'brush-select',\n immediately: true, // Immediate selection\n trigger: [],\n },\n ],\n plugins: [{ type: 'grid-line', size: 30 }],\n});\n\ngraph.render();\n```\n\n### mode\n\nFour selection modes are built-in:\n\n- `union`: Retain the current state of selected elements and add the specified state.\n- `intersect`: If the selected elements already have the specified state, retain it; otherwise, clear the state.\n- `diff`: Invert the specified state of the selected elements.\n- `default`: Clear the current state of selected elements and add the specified state.\n\n```js\nconst graph = new Graph({\n behaviors: [\n {\n type: 'brush-select',\n key: 'brush-select',\n mode: 'default', // Selection mode, default selection mode\n },\n ],\n});\n```\n\n```js | ob { pin: false }\ncreateGraph(\n {\n data: {\n nodes: [\n { id: 'node-1', style: { x: 200, y: 100 } },\n { id: 'node-2', style: { x: 360, y: 100 } },\n { id: 'node-3', style: { x: 280, y: 220 } },\n ],\n edges: [\n { source: 'node-1', target: 'node-2' },\n { source: 'node-1', target: 'node-3' },\n { source: 'node-2', target: 'node-3' },\n ],\n },\n node: {\n style: { fill: '#7e3feb' },\n state: {\n custom: { fill: '#ffa940' },\n },\n },\n edge: {\n stroke: '#8b9baf',\n state: {\n custom: { stroke: '#ffa940' },\n },\n },\n behaviors: [\n {\n type: 'brush-select',\n key: 'brush-select',\n trigger: [],\n immediately: true,\n },\n ],\n plugins: [{ type: 'grid-line', size: 30 }],\n animation: true,\n },\n { width: 600, height: 300 },\n (gui, graph) => {\n const options = {\n key: 'brush-select',\n type: 'brush-select',\n animation: false,\n enable: true,\n enableElements: ['node', 'edge', 'combo'],\n mode: 'default',\n state: 'selected',\n };\n const optionFolder = gui.addFolder('BrushSelect Options');\n optionFolder.add(options, 'type').disable(true);\n\n optionFolder.add(options, 'state', ['active', 'selected', 'custom']);\n optionFolder.add(options, 'mode', ['union', 'intersect', 'diff', 'default']);\n // .onChange((e) => {\n // immediately.show(e === 'default');\n // });\n\n optionFolder.onChange(({ property, value }) => {\n graph.updateBehavior({\n key: 'brush-select',\n [property]: value,\n });\n graph.render();\n });\n },\n);\n```\n\n### style\n\n| Attribute | Description | Type | Default |\n| ----------------- | ------------------------- | ---------------------------------------- | --------- |\n| cursor | Mouse style | string | |\n| fill | Fill color | string \\| Pattern \\| null | `#1677FF` |\n| fillOpacity | Fill opacity | number \\| string | 0.1 |\n| isBillboard | Enable billboard mode | boolean | |\n| isSizeAttenuation | Enable size attenuation | boolean | |\n| lineCap | Line end style | `butt` \\| `round` \\| `square` | |\n| lineDash | Dash configuration | number \\| string \\| (string \\| number)[] | |\n| lineDashOffset | Dash offset | number | |\n| lineJoin | Line join style | `miter` \\| `round` \\| `bevel` | |\n| lineWidth | Line width | number \\| string | 1 |\n| opacity | Overall opacity | number \\| string | |\n| radius | Rectangle corner radius | number \\| string \\| number[] | |\n| shadowBlur | Shadow blur degree | number | |\n| shadowColor | Shadow color | string | |\n| shadowOffsetX | Shadow X direction offset | number | |\n| shadowOffsetY | Shadow Y direction offset | number | |\n| stroke | Stroke color | string \\| Pattern \\| null | `#1677FF` |\n| strokeOpacity | Stroke opacity | number \\| string | |\n| visibility | Visibility | `visible` \\| `hidden` | |\n| zIndex | Rendering level | number | 2 |\n\n**Example**：\n\n```js\nconst graph = new Graph({\n behaviors: [\n {\n type: 'brush-select',\n key: 'brush-select',\n style: {\n width: 0,\n height: 0,\n lineWidth: 4,\n lineDash: [2, 2], // Dashed outline\n // RGB super colorful box\n fill: 'linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%)',\n stroke: 'pink',\n fillOpacity: 0.2,\n zIndex: 2,\n pointerEvents: 'none',\n },\n },\n ],\n});\n```\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 600,\n height: 300,\n data: {\n nodes: [\n { id: 'node-1', style: { x: 200, y: 100 } },\n { id: 'node-2', style: { x: 360, y: 100 } },\n { id: 'node-3', style: { x: 280, y: 220 } },\n ],\n edges: [\n { source: 'node-1', target: 'node-2' },\n { source: 'node-1', target: 'node-3' },\n { source: 'node-2', target: 'node-3' },\n ],\n },\n node: {\n style: { fill: '#7e3feb' },\n },\n edge: {\n stroke: '#8b9baf',\n },\n behaviors: [\n {\n type: 'brush-select',\n key: 'brush-select',\n trigger: [],\n immediately: true,\n style: {\n width: 0,\n height: 0,\n lineWidth: 4,\n lineDash: [2, 2], // Dashed outline\n // RGB super colorful box\n fill: 'linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%)',\n stroke: 'pink',\n fillOpacity: 0.2,\n zIndex: 2,\n pointerEvents: 'none',\n },\n },\n ],\n plugins: [{ type: 'grid-line', size: 30 }],\n animation: true,\n});\n\ngraph.render();\n```\n\n### Practical Example\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n data: {\n nodes: [\n { id: 'node-1', style: { x: 200, y: 250 } },\n { id: 'node-2', style: { x: 250, y: 200 } },\n { id: 'node-3', style: { x: 300, y: 250 } },\n { id: 'node-4', style: { x: 250, y: 300 } },\n ],\n edges: [\n { source: 'node-1', target: 'node-2' },\n { source: 'node-2', target: 'node-3' },\n { source: 'node-3', target: 'node-4' },\n { source: 'node-4', target: 'node-1' },\n ],\n },\n behaviors: [\n {\n key: 'brush-select',\n type: 'brush-select',\n enable: true,\n animation: false,\n mode: 'default', // union intersect diff default\n state: 'selected', // 'active', 'selected', 'inactive', ...\n trigger: [], // ['Shift', 'Alt', 'Control', 'Drag', 'Meta', ...]\n style: {\n width: 0,\n height: 0,\n lineWidth: 4,\n lineDash: [2, 2],\n fill: 'linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%)',\n stroke: 'pink',\n fillOpacity: 0.2,\n zIndex: 2,\n pointerEvents: 'none',\n },\n },\n ],\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/behavior/BrushSelect.zh.md":"---\ntitle: 框选 BrushSelect\norder: 2\n---\n\n## 概述\n\n鼠标点击拖一个框笼罩元素，框选范围内的元素会被选中。\n\n## 使用场景\n\n这一交互主要用于：\n\n- 快速选中一批元素\n- 快速取消选中一批元素\n\n## 在线体验\n\n\n\n## 基本用法\n\n在图配置中添加这一交互：\n\n**1. 快速配置（静态）**\n\n使用字符串形式直接声明，这种方式简洁但仅支持默认配置，且配置后不可动态修改：\n\n```javascript\nconst graph = new Graph({\n // 其他配置...\n behaviors: ['brush-select'],\n});\n```\n\n**2. 对象配置（推荐）**\n\n使用对象形式进行配置，支持自定义参数，且可以在运行时动态更新配置：\n\n```javascript\nconst graph = new Graph({\n // 其他配置...\n behaviors: [\n {\n type: 'brush-select',\n key: 'brush-select-1',\n immediately: true, // 可以看到框框笼罩过去时，元素立即被框选了\n trigger: ['shift', 'alt', 'control'], // 配合多种按键进行框选\n },\n ],\n});\n```\n\n## 配置项\n\n| 配置项 | 说明 | 类型 | 默认值 | 必选 |\n| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | ------------------------- | ---- |\n| type | 交互类型名称。此插件已内置，你可以通过 `type: 'brush-select'` 来使用它。 | `brush-select` \\| string | `brush-select` | ✓ |\n| animation | 是否启用动画 | boolean | false | |\n| enable | 是否启用框选功能 | boolean \\| ((event: [Event](/api/event#事件对象属性)) => boolean) | true | |\n| enableElements | 可框选的元素类型 | ( `node` \\| `edge` \\| `combo` )[] | [`node`, `combo`, `edge`] | |\n| immediately | 是否及时框选, 仅在 [框选模式 mode](#mode) 为 `default` 时生效，[示例](#immediately) | boolean | false | |\n| mode | 框选的选择模式，[示例](#mode) | `union` \\| `intersect` \\| `diff` \\| `default` | `default` | |\n| onSelect | 框选元素状态回调 | (states:Record<string,string\\|string[]>) =>Record<string,string\\|string[]> | | |\n| state | 被选中时切换到该状态 | string \\| `selected` \\| `active` \\| `inactive` \\| `disabled` \\| `highlight` | `selected` | |\n| style | 指定框选时的框样式，[配置项](#style) | | 见下文 | |\n| trigger | 按下该快捷键配合鼠标点击进行框选 **按键参考：** _MDN Key Values_ 。若设为**空数组**时则表示鼠标点击进行框选，不需要按下其他按键配合
⚠️ 注意，`trigger` 设置为 `['drag']` 时会导致 `drag-canvas` 行为失效。两者不可同时配置。 | string[] \\| (`Control` \\| `Shift`\\| `Alt` \\| `......`)[] | [`shift`] | |\n\n### immediately\n\n是否及时框选, 仅在框选模式为 `default` 时生效\n\n```js\nconst graph = new Graph({\n behaviors: [\n {\n type: 'brush-select',\n key: 'brush-select',\n immediately: true, // 可以看到框框笼罩过去时，元素立即被框选了\n trigger: [], // 不需要配合其他按键，点击鼠标拖动即可框选\n },\n ],\n});\n```\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 400,\n height: 200,\n data: {\n nodes: [\n { id: 'node-1', style: { x: 100, y: 50 } },\n { id: 'node-2', style: { x: 260, y: 50 } },\n { id: 'node-3', style: { x: 280, y: 100 } },\n ],\n edges: [\n { source: 'node-1', target: 'node-2' },\n { source: 'node-1', target: 'node-3' },\n { source: 'node-2', target: 'node-3' },\n ],\n },\n node: {\n style: { fill: '#7e3feb' },\n },\n edge: {\n stroke: '#8b9baf',\n },\n behaviors: [\n {\n type: 'brush-select',\n key: 'brush-select',\n immediately: true, // 立即框选\n trigger: [],\n },\n ],\n plugins: [{ type: 'grid-line', size: 30 }],\n});\n\ngraph.render();\n```\n\n### mode\n\n内置支持四种框选的选择模式：\n\n- `union`：保持已选元素的当前状态，并添加指定的 state 状态。\n- `intersect`：如果已选元素已有指定的 state 状态，则保留；否则清除该状态。\n- `diff`：对已选元素的指定 state 状态进行取反操作。\n- `default`：清除已选元素的当前状态，并添加指定的 state 状态。\n\n```js\nconst graph = new Graph({\n behaviors: [\n {\n type: 'brush-select',\n key: 'brush-select',\n mode: 'default', // 框选模式, 默认框选模式\n },\n ],\n});\n```\n\n```js | ob { pin: false }\ncreateGraph(\n {\n data: {\n nodes: [\n { id: 'node-1', style: { x: 200, y: 100 } },\n { id: 'node-2', style: { x: 360, y: 100 } },\n { id: 'node-3', style: { x: 280, y: 220 } },\n ],\n edges: [\n { source: 'node-1', target: 'node-2' },\n { source: 'node-1', target: 'node-3' },\n { source: 'node-2', target: 'node-3' },\n ],\n },\n node: {\n style: { fill: '#7e3feb' },\n state: {\n custom: { fill: '#ffa940' },\n },\n },\n edge: {\n stroke: '#8b9baf',\n state: {\n custom: { stroke: '#ffa940' },\n },\n },\n behaviors: [\n {\n type: 'brush-select',\n key: 'brush-select',\n trigger: [],\n immediately: true,\n },\n ],\n plugins: [{ type: 'grid-line', size: 30 }],\n animation: true,\n },\n { width: 600, height: 300 },\n (gui, graph) => {\n const options = {\n key: 'brush-select',\n type: 'brush-select',\n animation: false,\n enable: true,\n enableElements: ['node', 'edge', 'combo'],\n mode: 'default',\n state: 'selected',\n };\n const optionFolder = gui.addFolder('BrushSelect Options');\n optionFolder.add(options, 'type').disable(true);\n\n optionFolder.add(options, 'state', ['active', 'selected', 'custom']);\n optionFolder.add(options, 'mode', ['union', 'intersect', 'diff', 'default']);\n // .onChange((e) => {\n // immediately.show(e === 'default');\n // });\n\n optionFolder.onChange(({ property, value }) => {\n graph.updateBehavior({\n key: 'brush-select',\n [property]: value,\n });\n graph.render();\n });\n },\n);\n```\n\n### style\n\n| 属性 | 描述 | 类型 | 默认值 |\n| ----------------- | ------------------ | ---------------------------------------- | --------- |\n| cursor | 鼠标样式 | string | |\n| fill | 填充颜色 | string \\| Pattern \\| null | `#1677FF` |\n| fillOpacity | 填充透明度 | number \\| string | 0.1 |\n| isBillboard | 是否启用公告牌模式 | boolean | |\n| isSizeAttenuation | 是否启用大小衰减 | boolean | |\n| lineCap | 线段端点样式 | `butt` \\| `round` \\| `square` | |\n| lineDash | 虚线配置 | number \\| string \\| (string \\| number)[] | |\n| lineDashOffset | 虚线偏移量 | number | |\n| lineJoin | 线段连接处样式 | `miter` \\| `round` \\| `bevel` | |\n| lineWidth | 线宽度 | number \\| string | 1 |\n| opacity | 整体透明度 | number \\| string | |\n| radius | 矩形圆角半径 | number \\| string \\| number[] | |\n| shadowBlur | 阴影模糊程度 | number | |\n| shadowColor | 阴影颜色 | string | |\n| shadowOffsetX | 阴影 X 方向偏移 | number | |\n| shadowOffsetY | 阴影 Y 方向偏移 | number | |\n| stroke | 描边颜色 | string \\| Pattern \\| null | `#1677FF` |\n| strokeOpacity | 描边透明度 | number \\| string | |\n| visibility | 可见性 | `visible` \\| `hidden` | |\n| zIndex | 渲染层级 | number | 2 |\n\n**示例**：\n\n```js\nconst graph = new Graph({\n behaviors: [\n {\n type: 'brush-select',\n key: 'brush-select',\n style: {\n width: 0,\n height: 0,\n lineWidth: 4,\n lineDash: [2, 2], // 虚线外框\n // rgb超级炫彩框框\n fill: 'linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%)',\n stroke: 'pink',\n fillOpacity: 0.2,\n zIndex: 2,\n pointerEvents: 'none',\n },\n },\n ],\n});\n```\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 600,\n height: 300,\n data: {\n nodes: [\n { id: 'node-1', style: { x: 200, y: 100 } },\n { id: 'node-2', style: { x: 360, y: 100 } },\n { id: 'node-3', style: { x: 280, y: 220 } },\n ],\n edges: [\n { source: 'node-1', target: 'node-2' },\n { source: 'node-1', target: 'node-3' },\n { source: 'node-2', target: 'node-3' },\n ],\n },\n node: {\n style: { fill: '#7e3feb' },\n },\n edge: {\n stroke: '#8b9baf',\n },\n behaviors: [\n {\n type: 'brush-select',\n key: 'brush-select',\n trigger: [],\n immediately: true,\n style: {\n width: 0,\n height: 0,\n lineWidth: 4,\n lineDash: [2, 2], // 虚线外框\n // rgb超级炫彩框框\n fill: 'linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%)',\n stroke: 'pink',\n fillOpacity: 0.2,\n zIndex: 2,\n pointerEvents: 'none',\n },\n },\n ],\n plugins: [{ type: 'grid-line', size: 30 }],\n animation: true,\n});\n\ngraph.render();\n```\n\n### 实际案例\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n data: {\n nodes: [\n { id: 'node-1', style: { x: 200, y: 250 } },\n { id: 'node-2', style: { x: 250, y: 200 } },\n { id: 'node-3', style: { x: 300, y: 250 } },\n { id: 'node-4', style: { x: 250, y: 300 } },\n ],\n edges: [\n { source: 'node-1', target: 'node-2' },\n { source: 'node-2', target: 'node-3' },\n { source: 'node-3', target: 'node-4' },\n { source: 'node-4', target: 'node-1' },\n ],\n },\n behaviors: [\n {\n key: 'brush-select',\n type: 'brush-select',\n enable: true,\n animation: false,\n mode: 'default', // union intersect diff default\n state: 'selected', // 'active', 'selected', 'inactive', ...\n trigger: [], // ['Shift', 'Alt', 'Control', 'Drag', 'Meta', ...]\n style: {\n width: 0,\n height: 0,\n lineWidth: 4,\n lineDash: [2, 2],\n fill: 'linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%)',\n stroke: 'pink',\n fillOpacity: 0.2,\n zIndex: 2,\n pointerEvents: 'none',\n },\n },\n ],\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/behavior/ClickSelect.en.md":"---\ntitle: ClickSelect\norder: 3\n---\n\n## Overview\n\nWhen an element is clicked, it will be highlighted.\n\n## Usage Scenarios\n\nThis behavior is mainly used for:\n\n- Focusing on elements\n- Viewing element details\n- Viewing element relationships\n\n## Online Experience\n\n\n\n## Basic Usage\n\nAdd this behavior in the graph configuration:\n\n**1. Quick Configuration (Static)**\n\nDeclare directly using a string form. This method is simple but only supports default configuration and cannot be dynamically modified after configuration:\n\n```javascript\nconst graph = new Graph({\n // Other configurations...\n behaviors: ['click-select'],\n});\n```\n\n**2. Object Configuration (Recommended)**\n\nConfigure using an object form, supporting custom parameters, and can dynamically update the configuration at runtime:\n\n```javascript\nconst graph = new Graph({\n // Other configurations...\n behaviors: [\n {\n type: 'click-select',\n key: 'click-select-1',\n degree: 2, // Selection spread range\n state: 'active', // Selected state\n neighborState: 'neighborActive', // Neighbor node attached state\n unselectedState: 'inactive', // Unselected node state\n },\n ],\n});\n```\n\n## Configuration Options\n\n| Option | Description | Type | Default | Required |\n| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------- | -------------- | -------- |\n| type | Behavior type name. This behavior is built-in, and you can use it with `type: 'click-select'`. | `click-select` \\| string | `click-select` | ✓ |\n| animation | Whether to enable animation effects when switching element states | boolean | true | |\n| degree | Controls the highlight spread range, [example](#degree) | number \\| (event:[Event](/en/api/event#event-object-properties)) => number | 0 | |\n| enable | Whether to enable the click element function, supports dynamic control through functions, [example](#enable) | boolean \\| ((event: [Event](/en/api/event#event-object-properties)) => boolean) | true | |\n| multiple | Whether to allow multiple selections | boolean | false | |\n| state | The state applied when an element is selected | string \\| `selected` \\| `active`\\| `inactive`\\| `disabled`\\| `highlight` | `selected` | |\n| neighborState | The state applied to elements with n-degree relationships when an element is selected. The value of n is controlled by the degree attribute, for example, degree 1 means directly adjacent elements, [example](#neighborstate) | string \\| `selected` \\| `active`\\| `inactive`\\| `disabled`\\| `highlight` | `selected` | |\n| unselectedState | The state applied to all other elements except the selected element and its affected neighbor elements when an element is selected, [example](#unselectedState) | string \\| `selected` \\| `active`\\| `inactive`\\| `disabled`\\| `highlight` | | |\n| onClick | Callback when an element is clicked | (event: [Event](/en/api/event#event-object-properties)) => void | | |\n| trigger | Press this shortcut key in combination with a mouse click to perform multi-selection, key reference: _MDN Key Values_ | string[] \\| (`Control` \\| `Shift`\\| `Alt` \\| `......`)[] | `['shift']` | |\n\n### degree\n\nControls the highlight spread range\n\n- For nodes, `0` means only the current node is selected, `1` means the current node and its directly adjacent nodes and edges are selected, and so on.\n- For edges, `0` means only the current edge is selected, `1` means the current edge and its directly adjacent nodes are selected, and so on.\n\n> In the following example, when `degree: 0` only the red point is highlighted;\n> When `degree: 1` the red and orange points are highlighted.\n\n\n\n### enable\n\nWhether to enable the click element function\n\nIt can be dynamically controlled through functions, for example, only enabled when a node is selected.\n\n```js\n{\n //⚠️ Note, you need to set both the node and the canvas, otherwise the user will not listen to the event when clicking the canvas\n enable: (event) => ['node', 'canvas'].includes(event.targetType);\n}\n```\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 400,\n height: 200,\n data: {\n nodes: [\n { id: 'node1', style: { x: 100, y: 60 } },\n { id: 'node2', style: { x: 200, y: 60 } },\n { id: 'node3', style: { x: 300, y: 60 } },\n ],\n edges: [\n { source: 'node1', target: 'node2' },\n { source: 'node2', target: 'node3' },\n ],\n },\n node: {\n style: {\n fill: '#E4504D',\n },\n state: {\n active: {\n fill: '#0f0',\n },\n neighborActive: {\n fill: '#FFC40C',\n },\n },\n },\n behaviors: [\n {\n type: 'click-select',\n degree: 1,\n state: 'active',\n neighborState: 'neighborActive',\n enable: (event) => ['node', 'canvas'].includes(event.targetType),\n },\n ],\n});\n\ngraph.render();\n```\n\nSimilarly, if you only want edges to be selected:\n\n```js\n{\n enable: (event) => ['edge', 'canvas'].includes(event.targetType);\n}\n```\n\n### neighborState\n\nThe state applied to elements with n-degree relationships when an element is selected. The value of n is controlled by the degree attribute, for example, degree 1 means directly adjacent elements\n\n```js\nconst graph = new Graph({\n behaviors: [\n {\n type: 'click-select',\n degree: 1,\n // State attached to the directly clicked node\n state: 'active',\n // State attached to adjacent nodes\n neighborState: 'neighborActive',\n },\n ],\n});\n```\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 400,\n height: 200,\n layout: {\n type: 'grid',\n },\n data: {\n nodes: [{ id: 'node1' }, { id: 'node2' }, { id: 'node3' }, { id: 'node4' }, { id: 'node5' }],\n edges: [\n { source: 'node1', target: 'node2' },\n { source: 'node2', target: 'node3' },\n { source: 'node3', target: 'node4' },\n { source: 'node4', target: 'node5' },\n ],\n },\n node: {\n style: {\n fill: '#E4504D',\n },\n state: {\n active: {\n fill: '#0f0',\n },\n neighborActive: {\n fill: '#FFC40C',\n halo: true,\n },\n },\n },\n behaviors: [\n {\n type: 'click-select',\n degree: 1,\n state: 'active',\n neighborState: 'neighborActive',\n },\n ],\n});\n\ngraph.render();\n```\n\n### unselectedState\n\nWhen an element is selected, the state applied to all other elements except the selected element and the spread neighbor elements.\n\nBuilt-in states: `selected` `active` `inactive` `disabled` `highlight`\n\n```js\nconst graph = new Graph({\n behaviors: [\n {\n type: 'click-select',\n degree: 1,\n unselectedState: 'inactive',\n },\n ],\n});\n```\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 400,\n height: 200,\n layout: {\n type: 'grid',\n },\n data: {\n nodes: [{ id: 'node1' }, { id: 'node2' }, { id: 'node3' }, { id: 'node4' }, { id: 'node5' }],\n edges: [\n { source: 'node1', target: 'node2' },\n { source: 'node2', target: 'node3' },\n { source: 'node3', target: 'node4' },\n { source: 'node4', target: 'node5' },\n ],\n },\n node: {\n style: {\n fill: '#E4504D',\n },\n state: {\n active: {\n fill: '#0f0',\n },\n neighborActive: {\n fill: '#FFC40C',\n },\n },\n },\n behaviors: [\n {\n type: 'click-select',\n degree: 1,\n state: 'active',\n neighborState: 'neighborActive',\n unselectedState: 'inactive',\n },\n ],\n});\n\ngraph.render();\n```\n\n## Example\n\n### Click to select nodes and their directly connected nodes\n\n**Clicking a node** will switch from default state to active\n
\n**Adjacent nodes** will switch from default state to neighborActive\n\n```js\nconst graph = new Graph({\n node: {\n style: {\n fill: '#E4504D',\n },\n state: {\n // Selected node state\n active: {\n fill: '#0f0',\n },\n // Adjacent node state\n neighborActive: {\n fill: '#FFC40C',\n },\n },\n },\n behaviors: [\n {\n type: 'click-select',\n degree: 1,\n state: 'active',\n // State attached to adjacent nodes\n neighborState: 'neighborActive',\n // Unselected node state\n unselectedState: 'inactive',\n },\n ],\n});\n```\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 400,\n height: 200,\n layout: {\n type: 'grid',\n },\n data: {\n nodes: [{ id: 'node1' }, { id: 'node2' }, { id: 'node3' }, { id: 'node4' }, { id: 'node5' }],\n edges: [\n { source: 'node1', target: 'node2' },\n { source: 'node2', target: 'node3' },\n { source: 'node3', target: 'node4' },\n { source: 'node4', target: 'node5' },\n ],\n },\n node: {\n style: {\n fill: '#E4504D',\n },\n state: {\n active: {\n fill: '#0f0',\n },\n neighborActive: {\n fill: '#FFC40C',\n },\n },\n },\n behaviors: [\n {\n type: 'click-select',\n degree: 1,\n state: 'active',\n neighborState: 'neighborActive',\n unselectedState: 'inactive',\n },\n ],\n});\n\ngraph.render();\n```\n\n### Practical Example\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n layout: {\n type: 'grid',\n },\n data: {\n nodes: [{ id: 'node1' }, { id: 'node2' }, { id: 'node3' }, { id: 'node4' }, { id: 'node5' }],\n edges: [\n { source: 'node1', target: 'node2' },\n { source: 'node2', target: 'node3' },\n { source: 'node3', target: 'node4' },\n { source: 'node4', target: 'node5' },\n ],\n },\n node: {\n style: {\n fill: '#E4504D',\n },\n state: {\n active: {\n fill: '#0b0',\n },\n },\n },\n behaviors: [\n {\n type: 'click-select',\n degree: 1,\n state: 'active',\n unselectedState: 'inactive',\n multiple: true,\n trigger: ['shift'],\n },\n 'drag-element',\n ],\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/behavior/ClickSelect.zh.md":"---\ntitle: 点击选中 ClickSelect\norder: 3\n---\n\n## 概述\n\n当鼠标点击元素时，会使元素高亮。\n\n## 使用场景\n\n这一交互主要用于：\n\n- 聚焦元素\n- 查看元素详情\n- 查看元素关系\n\n## 在线体验\n\n\n\n## 基本用法\n\n在图配置中添加这一交互：\n\n**1. 快速配置（静态）**\n\n使用字符串形式直接声明，这种方式简洁但仅支持默认配置，且配置后不可动态修改：\n\n```javascript\nconst graph = new Graph({\n // 其他配置...\n behaviors: ['click-select'],\n});\n```\n\n**2. 对象配置（推荐）**\n\n使用对象形式进行配置，支持自定义参数，且可以在运行时动态更新配置：\n\n```javascript\nconst graph = new Graph({\n // 其他配置...\n behaviors: [\n {\n type: 'click-select',\n key: 'click-select-1',\n degree: 2, // 选中扩散范围\n state: 'active', // 选中的状态\n neighborState: 'neighborActive', // 相邻节点附着状态\n unselectedState: 'inactive', // 未选中节点状态\n },\n ],\n});\n```\n\n## 配置项\n\n| 配置项 | 说明 | 类型 | 默认值 | 必选 |\n| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ | -------------- | ---- |\n| type | 交互类型名称。此交互已内置，你可以通过 `type: 'click-select'` 来使用它。 | `click-select` \\| string | `click-select` | ✓ |\n| animation | 是否在元素状态切换时启用动画效果 | boolean | true | |\n| degree | 控制了高亮扩散范围，[示例](#degree) | number \\| (event:[Event](/api/event#事件对象属性)) => number | 0 | |\n| enable | 是否启用点击元素的功能，支持通过函数的方式动态控制是否启用，[示例](#enable) | boolean \\| ((event: [Event](/api/event#事件对象属性)) => boolean) | true | |\n| multiple | 是否允许多选 | boolean | false | |\n| state | 当元素被选中时应用的状态 | string \\| `selected` \\| `active`\\| `inactive`\\| `disabled`\\| `highlight` | `selected` | |\n| neighborState | 当有元素选中时，其相邻 n 度关系的元素应用的状态。n 的值由属性 degree 控制，例如 degree 为 1 时表示直接相邻的元素，[示例](#neighborstate) | string \\| `selected` \\| `active`\\| `inactive`\\| `disabled`\\| `highlight` | `selected` | |\n| unselectedState | 当有元素被选中时，除了选中元素及其受影响的邻居元素外，其他所有元素应用的状态，[示例](#unselectedState) | string \\| `selected` \\| `active`\\| `inactive`\\| `disabled`\\| `highlight` | | |\n| onClick | 点击元素时的回调 | (event: [Event](/api/event#事件对象属性)) => void | | |\n| trigger | 按下该快捷键配合鼠标点击进行多选，按键参考： _MDN Key Values_ | string[] \\| (`Control` \\| `Shift`\\| `Alt` \\| `......`)[] | `['shift']` | |\n\n### degree\n\n控制了高亮扩散范围\n\n- 对于节点来说，`0` 表示只选中当前节点，`1` 表示选中当前节点及其直接相邻的节点和边，以此类推。\n- 对于边来说，`0` 表示只选中当前边，`1` 表示选中当前边及其直接相邻的节点，以此类推。\n\n> 如下示例，当 `degree: 0` 仅高亮红色点;\n> 当 `degree: 1` 高亮红色和橙色点。\n\n\n\n### enable\n\n是否启用点击元素的功能\n\n可以通过函数的方式动态控制是否启用，例如只有节点被选中时才启用。\n\n```js\n{\n //⚠️ 注意，这里需要同时设置节点和画布，否则用户点击画布时将不会监听到事件\n enable: (event) => ['node', 'canvas'].includes(event.targetType);\n}\n```\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 400,\n height: 200,\n data: {\n nodes: [\n { id: 'node1', style: { x: 100, y: 60 } },\n { id: 'node2', style: { x: 200, y: 60 } },\n { id: 'node3', style: { x: 300, y: 60 } },\n ],\n edges: [\n { source: 'node1', target: 'node2' },\n { source: 'node2', target: 'node3' },\n ],\n },\n node: {\n style: {\n fill: '#E4504D',\n },\n state: {\n active: {\n fill: '#0f0',\n },\n neighborActive: {\n fill: '#FFC40C',\n },\n },\n },\n behaviors: [\n {\n type: 'click-select',\n degree: 1,\n state: 'active',\n neighborState: 'neighborActive',\n enable: (event) => ['node', 'canvas'].includes(event.targetType),\n },\n ],\n});\n\ngraph.render();\n```\n\n同理，如果只希望边能被选中：\n\n```js\n{\n enable: (event) => ['edge', 'canvas'].includes(event.targetType);\n}\n```\n\n### neighborState\n\n当有元素选中时，其相邻 n 度关系的元素应用的状态。n 的值由属性 degree 控制，例如 degree 为 1 时表示直接相邻的元素\n\n```js\nconst graph = new Graph({\n behaviors: [\n {\n type: 'click-select',\n degree: 1,\n // 被直接点击的节点附着的状态\n state: 'active',\n // 相邻的节点附着的状态\n neighborState: 'neighborActive',\n },\n ],\n});\n```\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 400,\n height: 200,\n layout: {\n type: 'grid',\n },\n data: {\n nodes: [{ id: 'node1' }, { id: 'node2' }, { id: 'node3' }, { id: 'node4' }, { id: 'node5' }],\n edges: [\n { source: 'node1', target: 'node2' },\n { source: 'node2', target: 'node3' },\n { source: 'node3', target: 'node4' },\n { source: 'node4', target: 'node5' },\n ],\n },\n node: {\n style: {\n fill: '#E4504D',\n },\n state: {\n active: {\n fill: '#0f0',\n },\n neighborActive: {\n fill: '#FFC40C',\n halo: true,\n },\n },\n },\n behaviors: [\n {\n type: 'click-select',\n degree: 1,\n state: 'active',\n neighborState: 'neighborActive',\n },\n ],\n});\n\ngraph.render();\n```\n\n### unselectedState\n\n当有元素被选中时，除了被选中元素和扩散的邻居元素外，其他所有元素应用的状态。\n\n内置状态： `selected` `active` `inactive` `disabled` `highlight`\n\n```js\nconst graph = new Graph({\n behaviors: [\n {\n type: 'click-select',\n degree: 1,\n unselectedState: 'inactive',\n },\n ],\n});\n```\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 400,\n height: 200,\n layout: {\n type: 'grid',\n },\n data: {\n nodes: [{ id: 'node1' }, { id: 'node2' }, { id: 'node3' }, { id: 'node4' }, { id: 'node5' }],\n edges: [\n { source: 'node1', target: 'node2' },\n { source: 'node2', target: 'node3' },\n { source: 'node3', target: 'node4' },\n { source: 'node4', target: 'node5' },\n ],\n },\n node: {\n style: {\n fill: '#E4504D',\n },\n state: {\n active: {\n fill: '#0f0',\n },\n neighborActive: {\n fill: '#FFC40C',\n },\n },\n },\n behaviors: [\n {\n type: 'click-select',\n degree: 1,\n state: 'active',\n neighborState: 'neighborActive',\n unselectedState: 'inactive',\n },\n ],\n});\n\ngraph.render();\n```\n\n## 示例\n\n### 点击选中节点及其直接相连的节点\n\n**点击节点** 会从 默认状态 切换为 active\n
\n**相邻节点** 会从 默认状态 切换为 neighborActive\n\n```js\nconst graph = new Graph({\n node: {\n style: {\n fill: '#E4504D',\n },\n state: {\n // 选中节点状态\n active: {\n fill: '#0f0',\n },\n // 相邻节点状态\n neighborActive: {\n fill: '#FFC40C',\n },\n },\n },\n behaviors: [\n {\n type: 'click-select',\n degree: 1,\n state: 'active',\n // 相邻节点附着状态\n neighborState: 'neighborActive',\n // 未选中节点状态\n unselectedState: 'inactive',\n },\n ],\n});\n```\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 400,\n height: 200,\n layout: {\n type: 'grid',\n },\n data: {\n nodes: [{ id: 'node1' }, { id: 'node2' }, { id: 'node3' }, { id: 'node4' }, { id: 'node5' }],\n edges: [\n { source: 'node1', target: 'node2' },\n { source: 'node2', target: 'node3' },\n { source: 'node3', target: 'node4' },\n { source: 'node4', target: 'node5' },\n ],\n },\n node: {\n style: {\n fill: '#E4504D',\n },\n state: {\n active: {\n fill: '#0f0',\n },\n neighborActive: {\n fill: '#FFC40C',\n },\n },\n },\n behaviors: [\n {\n type: 'click-select',\n degree: 1,\n state: 'active',\n neighborState: 'neighborActive',\n unselectedState: 'inactive',\n },\n ],\n});\n\ngraph.render();\n```\n\n### 实际案例\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n layout: {\n type: 'grid',\n },\n data: {\n nodes: [{ id: 'node1' }, { id: 'node2' }, { id: 'node3' }, { id: 'node4' }, { id: 'node5' }],\n edges: [\n { source: 'node1', target: 'node2' },\n { source: 'node2', target: 'node3' },\n { source: 'node3', target: 'node4' },\n { source: 'node4', target: 'node5' },\n ],\n },\n node: {\n style: {\n fill: '#E4504D',\n },\n state: {\n active: {\n fill: '#0b0',\n },\n },\n },\n behaviors: [\n {\n type: 'click-select',\n degree: 1,\n state: 'active',\n unselectedState: 'inactive',\n multiple: true,\n trigger: ['shift'],\n },\n 'drag-element',\n ],\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/behavior/CollapseExpand.en.md":"---\ntitle: CollapseExpand\norder: 4\n---\n\n## Overview\n\nCollapseExpand is a built-in behavior in G6 used to implement the expand/collapse functionality for nodes or combos. Through double-click (default) or single-click actions, users can flexibly control the expand and collapse states of graph elements, effectively managing the visualization hierarchy of the graph structure and reducing visual complexity.\n\n## Use Cases\n\nThis behavior is mainly used for:\n\n- Managing large hierarchical graphs, enabling layered browsing of tree or network graphs\n- Simplifying the display of complex graphs, expanding areas of interest as needed\n- Hiding branch nodes that are temporarily not needed, focusing on important information\n\n## Online Experience\n\n\n\n## Basic Usage\n\nAdd this behavior in the graph configuration:\n\n**1. Quick Configuration (Static)**\n\nDeclare directly using a string form. This method is simple but only supports default configurations and cannot be dynamically modified after configuration:\n\n```javascript\nconst graph = new Graph({\n // other configurations...\n behaviors: ['collapse-expand'],\n});\n```\n\n**2. Object Configuration (Recommended)**\n\nConfigure using an object form, supporting custom parameters, and allowing dynamic updates to the configuration at runtime:\n\n```javascript\nconst graph = new Graph({\n // other configurations...\n behaviors: [\n {\n type: 'collapse-expand',\n key: 'collapse-expand-1',\n trigger: 'click', // Change the trigger method to single-click\n animation: true, // Enable animation effects\n },\n ],\n});\n```\n\n## Configuration Options\n\n| Option | Description | Type | Default Value | Required |\n| ---------- | --------------------------------------------------- | ------------------------------------------------------------------------ | ----------------- | -------- |\n| type | Behavior type name | `collapse-expand` \\| string | `collapse-expand` | ✓ |\n| animation | Enable expand/collapse animation effects | boolean | true | |\n| enable | Enable expand/collapse functionality | boolean \\| ((event: [/en/api/event#event-object-properties]) => boolean) | true | |\n| trigger | Trigger method, can be single-click or double-click | `click` \\| `dblclick` | `dblclick` | |\n| onCollapse | Callback function when collapse is completed | (id: string) => void | - | |\n| onExpand | Callback function when expand is completed | (id: string) => void | - | |\n| align | Align with the target element to avoid view offset | boolean | true | |\n\n## Code Examples\n\n### Basic Expand/Collapse Functionality\n\n```javascript\nconst graph = new Graph({\n container: 'container',\n width: 800,\n height: 600,\n behaviors: ['collapse-expand'],\n // other configurations...\n});\n```\n\n### Use Single-Click to Trigger Expand/Collapse\n\n```javascript\nconst graph = new Graph({\n // other configurations...\n behaviors: [\n {\n type: 'collapse-expand',\n trigger: 'click', // Change the default double-click trigger to single-click\n },\n ],\n});\n```\n\n### Custom Expand/Collapse Callback\n\n```javascript\nconst graph = new Graph({\n // other configurations...\n behaviors: [\n {\n type: 'collapse-expand',\n onCollapse: (id) => {\n console.log(`Node ${id} has collapsed`);\n // Execute custom logic\n },\n onExpand: (id) => {\n console.log(`Node ${id} has expanded`);\n // Execute custom logic\n },\n },\n ],\n});\n```\n\n### Conditional Enablement of Expand/Collapse Functionality\n\n```javascript\nconst graph = new Graph({\n // other configurations...\n behaviors: [\n {\n type: 'collapse-expand',\n // Enable expand/collapse functionality only when the target is a node type\n enable: (event) => event.targetType === 'node',\n },\n ],\n});\n```\n\n### Disable Animation Effects\n\n```javascript\nconst graph = new Graph({\n // other configurations...\n behaviors: [\n {\n type: 'collapse-expand',\n animation: false, // Disable expand/collapse animation effects\n },\n ],\n});\n```\n\n## FAQ\n\n### 1. How to determine if a node is collapsed?\n\nYou can check the `collapsed` property in the node data:\n\n```javascript\nconst isCollapsed = (nodeId) => {\n const nodeData = graph.getNodeData(nodeId);\n return nodeData?.style?.collapsed === true;\n};\n```\n\n### 2. How to programmatically expand or collapse a node?\n\nIn addition to being triggered by user interaction, you can also directly control using [collapseElement](/en/api/element#graphcollapseelementid-options) or [expandElement](/en/api/element#graphexpandelementid-options):\n\n```javascript\n// Collapse node\ngraph.collapseElement('nodeId', { animation: true });\n\n// Expand node\ngraph.expandElement('nodeId', { animation: true });\n```\n\n## Real Cases\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n data: {\n nodes: [\n { id: 'node1', combo: 'combo1', style: { x: 300, y: 100 } },\n { id: 'node2', combo: 'combo1', style: { x: 300, y: 150 } },\n { id: 'node3', combo: 'combo2', style: { x: 100, y: 100 } },\n { id: 'node4', combo: 'combo2', style: { x: 50, y: 150 } },\n { id: 'node5', combo: 'combo2', style: { x: 150, y: 150 } },\n ],\n edges: [\n { source: 'node1', target: 'node2' },\n { source: 'node3', target: 'node4' },\n { source: 'node3', target: 'node5' },\n ],\n combos: [\n { id: 'combo1', style: { labelText: '双击折叠', collapsed: true } },\n { id: 'combo2', style: { labelText: '单击折叠', collapsed: false } },\n ],\n },\n behaviors: [\n {\n type: 'collapse-expand',\n trigger: 'dblclick',\n enable: (event) => event.targetType === 'combo' && event.target.id === 'combo1',\n },\n {\n type: 'collapse-expand',\n trigger: 'click',\n enable: (event) => event.targetType === 'combo' && event.target.id === 'combo2',\n },\n ],\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/behavior/CollapseExpand.zh.md":"---\ntitle: 展开/收起元素 CollapseExpand\norder: 4\n---\n\n## 概述\n\nCollapseExpand 是 G6 中用于实现节点或组合（Combo）展开/收起功能的内置交互。通过双击（默认）或单击操作，用户可以灵活控制图元素的展开与收起状态，有效管理图结构的可视化层次，降低视觉复杂度。\n\n## 使用场景\n\n这一交互主要用于：\n\n- 管理大型层次结构图，实现树状图或网络图的分层浏览\n- 简化复杂图的展示，按需展开关注区域\n- 隐藏暂时不需要查看的分支节点，聚焦于重要信息\n\n## 在线体验\n\n\n\n## 基本用法\n\n在图配置中添加这一 behavior：\n\n**1. 快速配置（静态）**\n\n使用字符串形式直接声明，这种方式简洁但仅支持默认配置，且配置后不可动态修改：\n\n```javascript\nconst graph = new Graph({\n // 其他配置...\n behaviors: ['collapse-expand'],\n});\n```\n\n**2. 对象配置（推荐）**\n\n使用对象形式进行配置，支持自定义参数，且可以在运行时动态更新配置：\n\n```javascript\nconst graph = new Graph({\n // 其他配置...\n behaviors: [\n {\n type: 'collapse-expand',\n key: 'collapse-expand-1',\n trigger: 'click', // 修改触发方式为单击\n animation: true, // 启用动画效果\n },\n ],\n});\n```\n\n## 配置项\n\n| 配置项 | 说明 | 类型 | 默认值 | 必选 |\n| ---------- | ------------------------------ | ------------------------------------------------------------------------- | ----------------- | ---- |\n| type | 交互类型名称 | `collapse-expand` \\| string | `collapse-expand` | ✓ |\n| animation | 是否启用展开/收起动画效果 | boolean | true | |\n| enable | 是否启用展开/收起功能 | boolean \\| ((event: [IPointerEvent](/api/event#事件对象属性)) => boolean) | true | |\n| trigger | 触发方式，可选单击或双击 | `click` \\| `dblclick` | `dblclick` | |\n| onCollapse | 完成收起时的回调函数 | (id: string) => void | - | |\n| onExpand | 完成展开时的回调函数 | (id: string) => void | - | |\n| align | 是否对准目标元素，避免视图偏移 | boolean | true | |\n\n## 代码示例\n\n### 基础展开/收起功能\n\n```javascript\nconst graph = new Graph({\n container: 'container',\n width: 800,\n height: 600,\n behaviors: ['collapse-expand'],\n // 其他配置...\n});\n```\n\n### 使用单击触发展开/收起\n\n```javascript\nconst graph = new Graph({\n // 其他配置...\n behaviors: [\n {\n type: 'collapse-expand',\n trigger: 'click', // 将默认的双击触发改为单击触发\n },\n ],\n});\n```\n\n### 自定义展开/收起回调\n\n```javascript\nconst graph = new Graph({\n // 其他配置...\n behaviors: [\n {\n type: 'collapse-expand',\n onCollapse: (id) => {\n console.log(`节点 ${id} 已收起`);\n // 执行自定义逻辑\n },\n onExpand: (id) => {\n console.log(`节点 ${id} 已展开`);\n // 执行自定义逻辑\n },\n },\n ],\n});\n```\n\n### 条件性启用展开/收起功能\n\n```javascript\nconst graph = new Graph({\n // 其他配置...\n behaviors: [\n {\n type: 'collapse-expand',\n // 只有当目标是节点类型时才启用展开/收起功能\n enable: (event) => event.targetType === 'node',\n },\n ],\n});\n```\n\n### 关闭动画效果\n\n```javascript\nconst graph = new Graph({\n // 其他配置...\n behaviors: [\n {\n type: 'collapse-expand',\n animation: false, // 关闭展开/收起动画效果\n },\n ],\n});\n```\n\n## 常见问题\n\n### 1. 如何判断一个节点是否处于收起状态？\n\n可以通过检查节点数据中的 `collapsed` 属性：\n\n```javascript\nconst isCollapsed = (nodeId) => {\n const nodeData = graph.getNodeData(nodeId);\n return nodeData?.style?.collapsed === true;\n};\n```\n\n### 2. 如何以编程方式展开或收起节点？\n\n除了通过用户交互触发，你还可以使用 [collapseElement](/api/element#graphcollapseelementid-options) 或 [expandElement](/api/element#graphexpandelementid-options) 直接控制：\n\n```javascript\n// 收起节点\ngraph.collapseElement('nodeId', { animation: true });\n\n// 展开节点\ngraph.expandElement('nodeId', { animation: true });\n```\n\n## 实际案例\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n data: {\n nodes: [\n { id: 'node1', combo: 'combo1', style: { x: 300, y: 100 } },\n { id: 'node2', combo: 'combo1', style: { x: 300, y: 150 } },\n { id: 'node3', combo: 'combo2', style: { x: 100, y: 100 } },\n { id: 'node4', combo: 'combo2', style: { x: 50, y: 150 } },\n { id: 'node5', combo: 'combo2', style: { x: 150, y: 150 } },\n ],\n edges: [\n { source: 'node1', target: 'node2' },\n { source: 'node3', target: 'node4' },\n { source: 'node3', target: 'node5' },\n ],\n combos: [\n { id: 'combo1', style: { labelText: '双击折叠', collapsed: true } },\n { id: 'combo2', style: { labelText: '单击折叠', collapsed: false } },\n ],\n },\n behaviors: [\n {\n type: 'collapse-expand',\n trigger: 'dblclick',\n enable: (event) => event.targetType === 'combo' && event.target.id === 'combo1',\n },\n {\n type: 'collapse-expand',\n trigger: 'click',\n enable: (event) => event.targetType === 'combo' && event.target.id === 'combo2',\n },\n ],\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/behavior/CreateEdge.en.md":"---\ntitle: CreateEdge\norder: 5\n---\n\n## Overview\n\nCreateEdge is a built-in behavior in G6 for interactively creating edges on the canvas. After the user triggers the behavior (click or drag), the edge will follow the mouse movement and connect to the target node to complete the creation. If canceled, it will be automatically removed.\n\nAdditionally, this behavior supports customizing the style of the edge, such as color, line style, arrow, etc., to meet different visualization needs.\n\nThe elements that can be connected by this behavior are `node` and `combo`.\n\n## Usage Scenarios\n\nThis behavior is mainly used for:\n\n- Visualization scenarios that require interactive creation of connections between nodes, such as flowcharts, knowledge graphs, etc.\n\n## Online Experience\n\n\n\n## Basic Usage\n\nAdd this behavior in the graph configuration\n\n```javascript\n// Use default configuration\nconst graph = new Graph({\n // Other configurations...\n behaviors: ['create-edge'], // Directly add, use default configuration\n});\n\n// Or use custom configuration\nconst graph = new Graph({\n // Other configurations\n behaviors: [\n {\n type: 'create-edge',\n trigger: 'click', // Behavior configuration, create edge by clicking\n style: {}, // Custom edge style\n },\n ],\n});\n```\n\n## Configuration Options\n\n| Option | Description | Type | Default | Required |\n| -------- | ----------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | ------------- | -------- |\n| type | Behavior type name | string | `create-edge` | √ |\n| trigger | The way to trigger the creation of a new edge: `click` means click to trigger; `drag` means drag to trigger | `click` \\| `drag` | `drag` | |\n| enable | Whether to enable this behavior | boolean \\| ((event: [Event](/en/api/event#event-object-properties)) => boolean) | true | |\n| onCreate | Callback function for creating an edge, returns edge data | (edge: [EdgeData](/en/manual/data#edge-data-edgedata)) => [EdgeData](/en/manual/data#edge-data-edgedata) | - | |\n| onFinish | Callback function for successfully creating an edge | (edge: [EdgeData](/en/manual/data#edge-data-edgedata)) => void | - | |\n| style | Style of the newly created edge, [configuration options](#style) | See below | - | |\n\n### style\n\nConfigure the style of the newly created edge, for detailed configuration options, please refer to [Element - Edge - General Edge Properties - Style](/en/manual/element/edge/base-edge#style)\n\n```json\n{\n \"style\": {\n \"stroke\": \"red\",\n \"lineWidth\": 2\n }\n}\n```\n\n## Code Examples\n\n### Basic Edge Creation Function\n\n```javascript\nconst graph = new Graph({\n container: 'container',\n width: 800,\n height: 600,\n behaviors: ['create-edge'],\n});\n```\n\n### Custom Edge Creation Function\n\n```javascript\nconst graph = new Graph({\n // Other configurations,\n behaviors: [\n {\n type: 'create-edge',\n style: {\n stroke: 'red',\n lineWidth: 3,\n },\n },\n ],\n});\n```\n\n### Create Edge by Clicking\n\n```javascript\nconst graph = new Graph({\n // Other configurations\n behaviors: [\n {\n type: 'create-edge',\n trigger: 'click',\n },\n ],\n});\n```\n\n## Practical Example\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n data: {\n nodes: [{ id: 'node1' }, { id: 'node2' }, { id: 'node3' }, { id: 'node4' }, { id: 'node5' }],\n edges: [\n { source: 'node1', target: 'node2' },\n { source: 'node1', target: 'node3' },\n { source: 'node1', target: 'node4' },\n { source: 'node2', target: 'node3' },\n { source: 'node3', target: 'node4' },\n { source: 'node4', target: 'node5' },\n ],\n },\n layout: {\n type: 'grid',\n },\n behaviors: [\n {\n type: 'create-edge',\n trigger: 'drag',\n style: {\n fill: 'red',\n lineWidth: 2,\n },\n },\n ],\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/behavior/CreateEdge.zh.md":"---\ntitle: 创建边 CreateEdge\norder: 5\n---\n\n## 概述\n\nCreateEdge 是 G6 中用于实现画布中交互式创建边（Edge）的内置交互。用户触发交互（点击或拖拽）后，边会随鼠标移动，连接到目标节点即完成创建，若取消则自动移除。\n\n此外，该交互支持自定义边的样式，如颜色、线条样式、箭头等，以适应不同的可视化需求。\n\n该交互支持连接的元素为 `node` 和 `combo`。\n\n## 使用场景\n\n这一交互主要用于：\n\n- 需要交互式创建节点间连接关系的可视化场景，如流程图、知识图谱等\n\n## 在线体验\n\n\n\n## 基本用法\n\n在图配置中添加这一交互\n\n```javascript\n// 使用默认配置\nconst graph = new Graph({\n // 其他配置...\n behaviors: ['create-edge'], // 直接添加，使用默认配置\n});\n\n// 或使用自定义配置\nconst graph = new Graph({\n // 其他配置\n behaviors: [\n {\n type: 'create-edge',\n trigger: 'click', // 交互配置，通过点击创建边\n style: {}, // 边自定义样式\n },\n ],\n});\n```\n\n## 配置项\n\n| 配置项 | 说明 | 类型 | 默认值 | 必选 |\n| -------- | ----------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ------------- | ---- |\n| type | 交互类型名称 | string | `create-edge` | √ |\n| trigger | 触发新建边的方式：`click` 表示点击触发；`drag` 表示拖拽触发 | `click` \\| `drag` | `drag` | |\n| enable | 是否启用该交互 | boolean \\| ((event: [Event](/api/event#事件对象属性)) => boolean) | true | |\n| onCreate | 创建边回调函数，返回边数据 | (edge: [EdgeData](/manual/data#边数据edgedata)) => [EdgeData](/manual/data#边数据edgedata) | - | |\n| onFinish | 成功创建边回调函数 | (edge: [EdgeData](/manual/data#边数据edgedata)) => void | - | |\n| style | 新建边的样式，[配置项](#style) | 见下面 | - | |\n\n### style\n\n配置新创建边的样式，详细配置项请参考 [元素 - 边 - 通用边属性 - 样式](/manual/element/edge/base-edge#style)\n\n```json\n{\n \"style\": {\n \"stroke\": \"red\",\n \"lineWidth\": 2\n }\n}\n```\n\n## 代码示例\n\n### 基础创建边功能\n\n```javascript\nconst graph = new Graph({\n container: 'container',\n width: 800,\n height: 600,\n behaviors: ['create-edge'],\n});\n```\n\n### 自定义创建边功能\n\n```javascript\nconst graph = new Graph({\n // 其他配置,\n behaviors: [\n {\n type: 'create-edge',\n style: {\n stroke: red,\n lineWidth: 3,\n },\n },\n ],\n});\n```\n\n### 使用点击创建边\n\n```javascript\nconst graph = new Graph({\n // 其他配置\n behaviors: [\n {\n type: 'create-edge',\n trigger: 'click',\n },\n ],\n});\n```\n\n## 实际案例\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n data: {\n nodes: [{ id: 'node1' }, { id: 'node2' }, { id: 'node3' }, { id: 'node4' }, { id: 'node5' }],\n edges: [\n { source: 'node1', target: 'node2' },\n { source: 'node1', target: 'node3' },\n { source: 'node1', target: 'node4' },\n { source: 'node2', target: 'node3' },\n { source: 'node3', target: 'node4' },\n { source: 'node4', target: 'node5' },\n ],\n },\n layout: {\n type: 'grid',\n },\n behaviors: [\n {\n type: 'create-edge',\n trigger: 'drag',\n style: {\n fill: 'red',\n lineWidth: 2,\n },\n },\n ],\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/behavior/DragCanvas.en.md":"---\ntitle: DragCanvas\norder: 6\n---\n\n## Overview\n\nDragCanvas is a built-in behavior in G6 for implementing canvas dragging functionality, supporting panning the entire canvas by dragging with a mouse or touching the screen. This is the most basic and commonly used navigation behavior in graph visualization, allowing users to freely explore graph content beyond the current viewport.\n\n## Usage Scenarios\n\nThis behavior is mainly used for:\n\n- Navigating and browsing large charts to view content outside the current viewport\n- Adjusting the view focus to move areas of interest to the center of the viewport\n- Combining with zoom interactions to achieve a complete canvas navigation experience\n\n## Online Experience\n\n\n\n## Basic Usage\n\nAdd this behavior in the graph configuration:\n\n**1. Quick Configuration (Static)**\n\nDeclare directly using a string form. This method is simple but only supports default configuration and cannot be dynamically modified after configuration:\n\n```javascript\nconst graph = new Graph({\n // Other configurations...\n behaviors: ['drag-canvas'],\n});\n```\n\n**2. Object Configuration (Recommended)**\n\nConfigure using an object form, supporting custom parameters, and can dynamically update the configuration at runtime:\n\n```javascript\nconst graph = new Graph({\n // Other configurations...\n behaviors: [\n {\n type: 'drag-canvas',\n key: 'drag-canvas-1',\n direction: 'x', // Only allow horizontal dragging\n key: 'drag-behavior', // Specify an identifier for the behavior for dynamic updates\n },\n ],\n});\n```\n\n## Configuration Options\n\n| Option | Description | Type | Default | Required |\n| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------- | -------- |\n| type | Behavior type name | string | `drag-canvas` | ✓ |\n| enable | Whether to enable this behavior | boolean \\| ((event: [Event](/en/api/event#event-object-properties) \\| [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent)) => boolean) | `(event) => 'eventType' in event ? event.targetType === 'canvas': true`(Only enabled when clicking on the canvas) | |\n| animation | Drag animation configuration, only effective when using keyboard movement | [ViewportAnimationEffectTiming](/en/api/graph#viewportanimationeffecttiming) | - | |\n| direction | Allowed drag direction, optional values are:
- Set to `'both'` (default): Allow dragging in any direction
- Set to `'x'`: Only allow horizontal dragging
- Set to `'y'`: Only allow vertical dragging | `'x'` \\| `'y'` \\| `'both'` | `'both'` (no direction restriction) | |\n| range | Draggable viewport range (in viewport size units), [example](#range) | number \\| number[] | Infinity | |\n| sensitivity | Distance to trigger a single keyboard movement | number | 10 | |\n| trigger | Keyboard keys to trigger dragging, [example](#trigger) | object | - | |\n| onFinish | Callback function when dragging is completed | () => void | - | |\n\n### range\n\n`range` is used to control the draggable range of the canvas:\n\n- Set as a single number: Use the same value for all four directions\n- Set as an array: Specify the range for [top, right, bottom, left] directions respectively\n\nFor example:\n\n```javascript\nrange: 2; // Can drag 2 viewport distances in any direction\nrange: [1, 2, 1, 2]; // Can drag 1 viewport up and down, 2 viewports left and right\n```\n\nThe value range for each direction is [0, Infinity], 0 means no dragging, Infinity means unlimited dragging.\n\n### trigger\n\n`trigger` allows you to configure keyboard keys to control canvas movement:\n\n```javascript\n{\n trigger: {\n up: ['ArrowUp'], // Shortcut key for moving up\n down: ['ArrowDown'], // Shortcut key for moving down\n left: ['ArrowLeft'], // Shortcut key for moving left\n right: ['ArrowRight'] // Shortcut key for moving right\n }\n}\n```\n\nYou can also configure combination keys:\n\n```javascript\n{\n trigger: {\n up: ['Control', 'ArrowUp'], // Ctrl + Up Arrow\n down: ['Control', 'ArrowDown'], // Ctrl + Down Arrow\n left: ['Control', 'ArrowLeft'], // Ctrl + Left Arrow\n right: ['Control', 'ArrowRight'] // Ctrl + Right Arrow\n }\n}\n```\n\n## Code Examples\n\n### Basic Dragging Function\n\n```javascript\nconst graph = new Graph({\n container: 'container',\n width: 800,\n height: 600,\n behaviors: ['drag-canvas'],\n});\n```\n\n### Only Allow Horizontal Dragging\n\n```javascript\nconst graph = new Graph({\n // Other configurations...\n behaviors: [\n {\n type: 'drag-canvas',\n direction: 'x', // Only allow horizontal dragging\n },\n ],\n});\n```\n\n### Limit Dragging Range\n\n```javascript\nconst graph = new Graph({\n // Other configurations...\n behaviors: [\n {\n type: 'drag-canvas',\n range: 1.5, // Limit dragging range to 1.5 viewport sizes\n },\n ],\n});\n```\n\n### Control Movement with Keyboard Arrow Keys\n\n```javascript\nconst graph = new Graph({\n // Other configurations...\n behaviors: [\n {\n type: 'drag-canvas',\n trigger: {\n up: ['ArrowUp'],\n down: ['ArrowDown'],\n left: ['ArrowLeft'],\n right: ['ArrowRight'],\n },\n animation: {\n duration: 100, // Add smooth animation effect\n },\n },\n ],\n});\n```\n\n## FAQ\n\n### 1. Difference between DragCanvas and other behaviors\n\n- `DragCanvas` is used for dragging the entire canvas view\n- `DragElement` is used for dragging individual graph elements (nodes/edges/combinations)\n- `ScrollCanvas` is used for scrolling the canvas with the mouse wheel without changing the zoom ratio\n\n## Practical Example\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n layout: {\n type: 'grid',\n },\n data: {\n nodes: [{ id: 'node1' }, { id: 'node2' }, { id: 'node3' }, { id: 'node4' }, { id: 'node5' }],\n edges: [\n { source: 'node1', target: 'node2' },\n { source: 'node1', target: 'node3' },\n { source: 'node1', target: 'node4' },\n { source: 'node2', target: 'node3' },\n { source: 'node3', target: 'node4' },\n { source: 'node4', target: 'node5' },\n ],\n },\n behaviors: ['drag-canvas'],\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/behavior/DragCanvas.zh.md":"---\ntitle: 拖拽画布 DragCanvas\norder: 6\n---\n\n## 概述\n\nDragCanvas 是 G6 中用于实现画布拖拽功能的内置交互，支持通过鼠标或触摸屏幕拖动来平移整个画布。这是图可视化中最基础且常用的导航交互，让用户能够自由探索超出当前视口的图内容。\n\n## 使用场景\n\n这一交互主要用于：\n\n- 导航和浏览大型图表，查看当前视口外的内容\n- 调整视图焦点，将感兴趣的区域移动到视口中心\n- 与缩放交互结合，实现完整的画布导航体验\n\n## 在线体验\n\n\n\n## 基本用法\n\n在图配置中添加这一交互：\n\n**1. 快速配置（静态）**\n\n使用字符串形式直接声明，这种方式简洁但仅支持默认配置，且配置后不可动态修改：\n\n```javascript\nconst graph = new Graph({\n // 其他配置...\n behaviors: ['drag-canvas'],\n});\n```\n\n**2. 对象配置（推荐）**\n\n使用对象形式进行配置，支持自定义参数，且可以在运行时动态更新配置：\n\n```javascript\nconst graph = new Graph({\n // 其他配置...\n behaviors: [\n {\n type: 'drag-canvas',\n key: 'drag-canvas-1',\n direction: 'x', // 只允许水平方向拖拽\n key: 'drag-behavior', // 为交互指定标识符，方便动态更新\n },\n ],\n});\n```\n\n## 配置项\n\n| 配置项 | 说明 | 类型 | 默认值 | 必选 |\n| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ---- |\n| type | 交互类型名称 | string | `drag-canvas` | ✓ |\n| enable | 是否启用该交互 | boolean \\| ((event: [Event](/api/event#事件对象属性) \\| [KeyboardEvent](https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent)) => boolean) | `(event) => 'eventType' in event ? event.targetType === 'canvas': true`(仅在点击画布时启用) | |\n| animation | 拖拽动画配置，仅在使用按键移动时有效 | [ViewportAnimationEffectTiming](/api/graph#viewportanimationeffecttiming) | - | |\n| direction | 允许的拖拽方向，可选值有：
- 设为 `'both'`（默认）：允许在任意方向拖拽
- 设为 `'x'`：只允许水平方向拖拽
- 设为 `'y'`：只允许垂直方向拖拽 | `'x'` \\| `'y'` \\| `'both'` | `'both'` (不限制方向) | |\n| range | 可拖拽的视口范围(以视口大小为单位)，[示例](#range) | number \\| number[] | Infinity | |\n| sensitivity | 触发一次按键移动的距离 | number | 10 | |\n| trigger | 触发拖拽的键盘按键，[示例](#trigger) | object | - | |\n| onFinish | 拖拽完成时的回调函数 | () => void | - | |\n\n### range\n\n`range` 用于控制画布可拖拽的范围：\n\n- 设置为单个数字：四个方向使用相同的值\n- 设置为数组：分别指定 [上, 右, 下, 左] 四个方向的范围\n\n例如：\n\n```javascript\nrange: 2; // 在任何方向上都可以拖拽2个视口的距离\nrange: [1, 2, 1, 2]; // 上下方向可拖拽1个视口，左右方向可拖拽2个视口\n```\n\n每个方向的取值范围是 [0, Infinity]，0表示不能拖拽，Infinity表示无限拖拽。\n\n### trigger\n\n`trigger` 允许你配置键盘按键来控制画布移动：\n\n```javascript\n{\n trigger: {\n up: ['ArrowUp'], // 向上移动的快捷键\n down: ['ArrowDown'], // 向下移动的快捷键\n left: ['ArrowLeft'], // 向左移动的快捷键\n right: ['ArrowRight'] // 向右移动的快捷键\n }\n}\n```\n\n你也可以配置组合键：\n\n```javascript\n{\n trigger: {\n up: ['Control', 'ArrowUp'], // Ctrl + 上箭头\n down: ['Control', 'ArrowDown'], // Ctrl + 下箭头\n left: ['Control', 'ArrowLeft'], // Ctrl + 左箭头\n right: ['Control', 'ArrowRight'] // Ctrl + 右箭头\n }\n}\n```\n\n## 代码示例\n\n### 基础拖拽功能\n\n```javascript\nconst graph = new Graph({\n container: 'container',\n width: 800,\n height: 600,\n behaviors: ['drag-canvas'],\n});\n```\n\n### 只允许水平拖拽\n\n```javascript\nconst graph = new Graph({\n // 其他配置...\n behaviors: [\n {\n type: 'drag-canvas',\n direction: 'x', // 只允许水平拖拽\n },\n ],\n});\n```\n\n### 限制拖拽范围\n\n```javascript\nconst graph = new Graph({\n // 其他配置...\n behaviors: [\n {\n type: 'drag-canvas',\n range: 1.5, // 限制拖拽范围为1.5个视口大小\n },\n ],\n});\n```\n\n### 使用键盘方向键控制移动\n\n```javascript\nconst graph = new Graph({\n // 其他配置...\n behaviors: [\n {\n type: 'drag-canvas',\n trigger: {\n up: ['ArrowUp'],\n down: ['ArrowDown'],\n left: ['ArrowLeft'],\n right: ['ArrowRight'],\n },\n animation: {\n duration: 100, // 添加平滑动画效果\n },\n },\n ],\n});\n```\n\n## 常见问题\n\n### 1. DragCanvas与其他交互的区别\n\n- `DragCanvas` 用于拖拽整个画布视图\n- `DragElement` 用于拖拽单个图元素（节点/边/组合）\n- `ScrollCanvas` 用于滚轮滚动画布，不改变缩放比例\n\n## 实际案例\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n layout: {\n type: 'grid',\n },\n data: {\n nodes: [{ id: 'node1' }, { id: 'node2' }, { id: 'node3' }, { id: 'node4' }, { id: 'node5' }],\n edges: [\n { source: 'node1', target: 'node2' },\n { source: 'node1', target: 'node3' },\n { source: 'node1', target: 'node4' },\n { source: 'node2', target: 'node3' },\n { source: 'node3', target: 'node4' },\n { source: 'node4', target: 'node5' },\n ],\n },\n behaviors: ['drag-canvas'],\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/behavior/DragElement.en.md":"---\ntitle: DragElement\norder: 7\n---\n\n## Overview\n\nDragElement is a built-in behavior in G6 for implementing **element dragging** functionality. It has the following core features:\n\n1. **Support for multiple element types**: Supports dragging of both nodes and combos simultaneously\n2. **Intelligent multi-selection**: Supports dragging multiple selected elements at the same time\n3. **Visual feedback**: Provides various visual feedback mechanisms such as ghost nodes, edge visibility, mouse styles, etc.\n4. **Flexible drag effects**: Supports various drag operation effects such as move, link, free drag, etc.\n5. **Parent-child relationship handling**: Automatically handles element hierarchy during dragging, especially when dealing with combo structures\n\n## Online Experience\n\n\n\n## Basic Usage\n\nAdd this behavior in the graph configuration:\n\n**1. Quick Configuration (Static)**\n\nDeclare directly using a string form. This method is simple but only supports default configuration and cannot be dynamically modified after configuration:\n\n```javascript\nconst graph = new Graph({\n // Other configurations...\n behaviors: ['drag-element'],\n});\n```\n\n**2. Object Configuration (Recommended)**\n\nConfigure using an object form, supporting custom parameters, and can dynamically update the configuration at runtime:\n\n```javascript\nconst graph = new Graph({\n // Other configurations...\n behaviors: [\n {\n type: 'drag-element',\n key: 'drag-element-1',\n enableAnimation: true,\n dropEffect: 'move',\n shadow: true, // Enable ghost node\n },\n ],\n});\n```\n\n## Configuration Options\n\n| Option | Description | Type | Default | Required |\n| ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | ---------------------------------------------- | -------- |\n| type | Behavior type name | string | `drag-element` | ✓ |\n| key | Unique identifier for the behavior, used for subsequent operations | string | - | |\n| enable | Whether to enable the drag function, by default nodes and combos can be dragged | boolean \\| ((event: IElementDragEvent) => boolean) | `['node', 'combo'].includes(event.targetType)` | |\n| animation | Whether to enable drag animation | boolean | true | |\n| state | Identifier for the selected state of nodes, when multi-selection is enabled, it will find the selected nodes based on this state | string | `selected` | |\n| dropEffect | Defines the operation effect after dragging ends, optional values are:
- `link`: Set the dragged element as a child of the target element
- `move`: Move the element and automatically update the size of the parent element (such as combo)
- `none`: Only update the position of the drag target without performing other operations | `link` \\| `move` \\| `none` | `move` | |\n| hideEdge | Controls the display state of edges during dragging, optional values are:
- `none`: Do not hide any edges
- `out`: Hide edges with the current node as the source node
- `in`: Hide edges with the current node as the target node
- `both`: Hide all edges related to the current node
- `all`: Hide all edges in the graph
⚠️ Note: When `shadow` (ghost node) is enabled, the `hideEdge` configuration will not take effect. | `none` \\| `all` \\| `in` \\| `out` \\| `both` | `none` | |\n| shadow | Whether to enable ghost nodes, which use a shape to follow the mouse movement. [Customize ghost node style](#shadow-style-configuration) ⚠️Note: React nodes do not support enabling | boolean | false | |\n| cursor | Customize the mouse style during dragging, [configuration options](#cursor) | { default?: Cursor; grab: Cursor; grabbing: Cursor } | - | |\n| trigger | Press this shortcut key in combination with mouse perform drag element **Key reference:** _MDN Key Values_. If set to an **empty array**, it means drag element can be performed with mouse without pressing other keys
⚠️ Note, setting `trigger` to `['drag']` will cause the `drag-canvas` behavior to fail. The two cannot be configured simultaneously. | string[] \\| (`Control` \\| `Shift`\\| `Alt` \\| `......`)[] | [`shift`] | |\n\n### cursor\n\n`cursor` is used to customize the mouse pointer style during dragging:\n\n- `default`: Pointer style in default state\n- `grab`: Pointer style when hovering over a draggable element\n- `grabbing`: Pointer style when dragging\n\nOptional values are: `auto` | `default` | `none` | `context-menu` | `help` | `pointer` | `progress` | `wait` | `cell` | `crosshair` | `text` | `vertical-text` | `alias` | `copy` | `move` | `no-drop` | `not-allowed` | `grab` | `grabbing` | `all-scroll` | `col-resize` | `row-resize` | `n-resize` | `e-resize` | `s-resize` | `w-resize` | `ne-resize` | `nw-resize` | `se-resize` | `sw-resize` | `ew-resize` | `ns-resize` | `nesw-resize` | `nwse-resize` | `zoom-in` | `zoom-out`\n\nExample configuration:\n\n```js\ncursor: {\n default: 'default', // Use normal pointer by default\n grab: 'grab', // Show grab pointer when draggable\n grabbing: 'grabbing' // Show grabbing pointer when dragging\n}\n```\n\n### shadow Style Configuration\n\nWhen `shadow: true` is enabled, you can customize the style of the ghost node with the following properties:\n\n| Option | Description | Type | Default |\n| -------------------- | --------------------------------- | ----------------------------------- | ------------------------------------------- |\n| shadowFill | Ghost node fill color | string | `#F3F9FF` |\n| shadowFillOpacity | Ghost node fill color opacity | number | 0.5 |\n| shadowStroke | Ghost node stroke color | string | `#1890FF` |\n| shadowStrokeOpacity | Ghost node stroke opacity | number | 0.9 |\n| shadowLineDash | Ghost node dash configuration | number[] | [5, 5] |\n| shadowZIndex | Ghost node rendering level | number | 100 |\n| shadowWidth | Ghost node width | number | Width of the target element's bounding box |\n| shadowHeight | Ghost node height | number | Height of the target element's bounding box |\n| shadowOpacity | Overall opacity of the ghost node | number | |\n| shadowLineWidth | Ghost node line width | number | |\n| shadowLineCap | Ghost node line cap style | `'butt'` \\| `'round'` \\| `'square'` | |\n| shadowLineJoin | Ghost node line join style | `'miter'` \\| `'round'` \\| `'bevel'` | |\n| shadowLineDashOffset | Ghost node dash offset | number | |\n| shadowCursor | Ghost node mouse style | string | |\n| shadowVisibility | Ghost node visibility | `'visible'` \\| `'hidden'` | |\n\nExample configuration:\n\n```javascript\n{\n type: 'drag-element',\n shadow: true,\n // Customize ghost node style\n shadowFill: '#E8F3FF',\n shadowFillOpacity: 0.4,\n shadowStroke: '#1890FF',\n shadowStrokeOpacity: 0.8,\n shadowLineDash: [4, 4],\n shadowZIndex: 99\n}\n```\n\n> Note: The ghost node style inherits from [BaseStyleProps](/en/manual/element/shape/properties#baseshapestyle), the above configuration items are obtained by adding the `shadow` prefix to the property name.\n\n## Code Examples\n\n### Multi-selection Dragging\n\nNeed to cooperate with the `click-select` behavior to achieve multi-selection, and then associate the selected state through the `state` parameter:\n\n```javascript\nconst graph = new Graph({\n behaviors: [\n {\n type: 'click-select',\n multiple: true,\n state: 'selected',\n },\n {\n type: 'drag-element',\n state: 'selected', // All nodes in the selected state will be moved simultaneously during dragging\n },\n ],\n});\n```\n","packages/site/docs/manual/behavior/DragElement.zh.md":"---\ntitle: 拖拽元素 DragElement\norder: 7\n---\n\n## 概述\n\nDragElement 是 G6 中用于实现 **元素拖拽** 功能的内置交互。它具有以下核心特性：\n\n1. **多元素类型支持**：可以同时支持节点（Node）和组合（Combo）的拖拽\n2. **智能多选**：支持同时拖拽多个选中状态的元素\n3. **视觉反馈**：提供幽灵节点、边的显隐、鼠标样式等多种视觉反馈机制\n4. **灵活的拖拽效果**：支持移动、链接、自由拖拽等多种拖拽操作效果\n5. **父子关系处理**：自动处理拖拽过程中的元素层级关系，特别是在处理 Combo 结构时\n\n## 在线体验\n\n\n\n## 基本用法\n\n在图配置中添加这一交互：\n\n**1. 快速配置（静态）**\n\n使用字符串形式直接声明，这种方式简洁但仅支持默认配置，且配置后不可动态修改：\n\n```javascript\nconst graph = new Graph({\n // 其他配置...\n behaviors: ['drag-element'],\n});\n```\n\n**2. 对象配置（推荐）**\n\n使用对象形式进行配置，支持自定义参数，且可以在运行时动态更新配置：\n\n```javascript\nconst graph = new Graph({\n // 其他配置...\n behaviors: [\n {\n type: 'drag-element',\n key: 'drag-element-1',\n enableAnimation: true,\n dropEffect: 'move',\n shadow: true, // 启用拖拽幽灵节点\n },\n ],\n});\n```\n\n## 配置项\n\n| 配置项 | 说明 | 类型 | 默认值 | 必选 |\n| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | ---------------------------------------------- | ---- |\n| type | 交互类型名称 | string | `drag-element` | ✓ |\n| key | 交互唯一标识符，用于后续操作交互 | string | - | |\n| enable | 是否启用拖拽功能，默认可以拖拽节点和 Combo | boolean \\| ((event: IElementDragEvent) => boolean) | `['node', 'combo'].includes(event.targetType)` | |\n| animation | 是否启用拖拽动画 | boolean | true | |\n| state | 节点选中状态的标识，启用多选时会基于该状态查找选中的节点 | string | `selected` | |\n| dropEffect | 定义拖拽结束后的操作效果，可选值有：
- `link`: 将拖拽元素设置为目标元素的子元素
- `move`: 移动元素并自动更新父元素（如 Combo）的尺寸
- `none`: 仅更新拖拽目标的位置，不执行其他操作 | `link` \\| `move` \\| `none` | `move` | |\n| hideEdge | 控制拖拽过程中边的显示状态，可选值有：
- `none`: 不隐藏任何边
- `out`: 隐藏以当前节点为源节点的边
- `in`: 隐藏以当前节点为目标节点的边
- `both`: 隐藏与当前节点相关的所有边
- `all`: 隐藏图中所有边
⚠️ 注意：当启用 `shadow`（幽灵节点）时，`hideEdge` 配置将不生效。 | `none` \\| `all` \\| `in` \\| `out` \\| `both` | `none` | |\n| shadow | 是否启用幽灵节点，即用一个图形代替节点跟随鼠标移动。[自定义幽灵节点样式](#shadow-样式配置) ⚠️注意：React 节点不支持启用 | boolean | false | |\n| cursor | 自定义鼠标样式，[配置项](#cursor) | { default?: Cursor; grab: Cursor; grabbing: Cursor } | - | |\n| trigger | 同时按下快捷键才能拖拽元素 **按键参考：** _MDN Key Values_ 。若设为**空数组**时则表示不需要按下其他按键配合
⚠️ 注意，`trigger` 设置为 `['drag']` 时会导致 `drag-canvas` 行为失效。两者不可同时配置。 | string[] \\| (`Control` \\| `Shift`\\| `Alt` \\| `......`)[] | [] | |\n\n### cursor\n\n`cursor` 用于自定义拖拽过程中的鼠标指针样式：\n\n- `default`: 默认状态下的指针样式\n- `grab`: 鼠标悬停在可拖拽元素上时的指针样式\n- `grabbing`: 正在拖拽时的指针样式\n\n可选值有：`auto` | `default` | `none` | `context-menu` | `help` | `pointer` | `progress` | `wait` | `cell` | `crosshair` | `text` | `vertical-text` | `alias` | `copy` | `move` | `no-drop` | `not-allowed` | `grab` | `grabbing` | `all-scroll` | `col-resize` | `row-resize` | `n-resize` | `e-resize` | `s-resize` | `w-resize` | `ne-resize` | `nw-resize` | `se-resize` | `sw-resize` | `ew-resize` | `ns-resize` | `nesw-resize` | `nwse-resize` | `zoom-in` | `zoom-out`\n\n示例配置：\n\n```js\ncursor: {\n default: 'default', // 默认使用普通指针\n grab: 'grab', // 可拖拽时显示抓取指针\n grabbing: 'grabbing' // 拖拽中显示抓取中指针\n}\n```\n\n### shadow 样式配置\n\n当启用 `shadow: true` 时，可以通过以下属性自定义幽灵节点的样式：\n\n| 配置项 | 说明 | 类型 | 默认值 |\n| -------------------- | ---------------------- | ----------------------------------- | -------------------- |\n| shadowFill | 幽灵节点填充色 | string | `#F3F9FF` |\n| shadowFillOpacity | 幽灵节点填充色透明度 | number | 0.5 |\n| shadowStroke | 幽灵节点描边颜色 | string | `#1890FF` |\n| shadowStrokeOpacity | 幽灵节点描边透明度 | number | 0.9 |\n| shadowLineDash | 幽灵节点虚线配置 | number[] | [5, 5] |\n| shadowZIndex | 幽灵节点渲染层级 | number | 100 |\n| shadowWidth | 幽灵节点宽度 | number | 目标元素的包围盒宽度 |\n| shadowHeight | 幽灵节点高度 | number | 目标元素的包围盒高度 |\n| shadowOpacity | 幽灵节点整体透明度 | number | |\n| shadowLineWidth | 幽灵节点线宽度 | number | |\n| shadowLineCap | 幽灵节点线段端点样式 | `'butt'` \\| `'round'` \\| `'square'` | |\n| shadowLineJoin | 幽灵节点线段连接处样式 | `'miter'` \\| `'round'` \\| `'bevel'` | |\n| shadowLineDashOffset | 幽灵节点虚线偏移量 | number | |\n| shadowCursor | 幽灵节点鼠标样式 | string | |\n| shadowVisibility | 幽灵节点可见性 | `'visible'` \\| `'hidden'` | |\n\n示例配置：\n\n```javascript\n{\n type: 'drag-element',\n shadow: true,\n // 自定义幽灵节点样式\n shadowFill: '#E8F3FF',\n shadowFillOpacity: 0.4,\n shadowStroke: '#1890FF',\n shadowStrokeOpacity: 0.8,\n shadowLineDash: [4, 4],\n shadowZIndex: 99\n}\n```\n\n> 注意：幽灵节点样式继承自 [BaseStyleProps](/manual/element/shape/properties#baseshapestyle)，上述配置项是在属性名前添加 `shadow` 前缀得到的。\n\n## 代码示例\n\n### 多选推拽\n\n需要配合 `click-select` 行为实现多选，然后通过 `state` 参数关联选中状态：\n\n```javascript\nconst graph = new Graph({\n behaviors: [\n {\n type: 'click-select',\n multiple: true,\n state: 'selected',\n },\n {\n type: 'drag-element',\n state: 'selected', // 拖拽时会同时移动所有 selected 状态的节点\n },\n ],\n});\n```\n","packages/site/docs/manual/behavior/DragElementForce.en.md":"---\ntitle: DragElementForce\norder: 8\n---\n\n## Overview\n\nDragElementForce is a built-in behavior in G6 for implementing node dragging under `d3-force` and `d3-force-3d` layouts. During dragging, the layout is **recalculated in real-time**, allowing the graph layout to dynamically adjust to accommodate the new position of the nodes.\n\n
![\"Effect](\"https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*I5uDQZWTzMsAAAAAAAAAAAAADmJ7AQ/original\")
\n\n## Basic Usage\n\nAdd this behavior in the graph configuration:\n\n**1. Quick Configuration (Static)**\n\nDeclare directly using a string form. This method is simple but only supports default configuration and cannot be dynamically modified after configuration:\n\n```javascript\nconst graph = new Graph({\n // Other configurations...\n behaviors: ['drag-element-force'],\n});\n```\n\n**2. Object Configuration (Recommended)**\n\nConfigure using an object form, supporting custom parameters, and can dynamically update the configuration at runtime:\n\n```javascript\nconst graph = new Graph({\n // Other configurations...\n behaviors: [\n {\n type: 'drag-element-force',\n key: 'drag-element-force-1',\n fixed: true, // Fix node position after dragging\n },\n ],\n});\n```\n\n## Configuration Options\n\n| Option | Description | Type | Default | Required |\n| ------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | ---------------------------------------------- | -------- |\n| type | Behavior type name, set `type: 'drag-element-force'` to enable this behavior | string | `drag-element-force` | ✓ |\n| key | Unique identifier for the behavior, used for subsequent operations | string | - | |\n| fixed | Whether to keep the node position fixed after dragging ends, boolean values represent: - true: After dragging ends, the node's position will remain fixed and not be affected by the layout algorithm
- false: After dragging ends, the node's position will continue to be affected by the layout algorithm | boolean | false | |\n| enable | Whether to enable the drag function, by default nodes and combos can be dragged | boolean \\| ((event: IElementDragEvent) => boolean) | `['node', 'combo'].includes(event.targetType)` | |\n| state | Identifier for the selected state of nodes, when multi-selection is enabled, it will find the selected nodes based on this state | string | `selected` | |\n| hideEdge | Controls the display state of edges during dragging, optional values are:
- `none`: Do not hide any edges
- `out`: Hide edges with the current node as the source node
- `in`: Hide edges with the current node as the target node
- `both`: Hide all edges related to the current node
- `all`: Hide all edges in the graph
⚠️ Note: When `shadow` (ghost node) is enabled, the `hideEdge` configuration will not take effect. | `none` \\| `all` \\| `in` \\| `out` \\| `both` | `none` | |\n| cursor | Customize the mouse style during dragging, [example](#cursor) | { default?: Cursor; grab: Cursor; grabbing: Cursor } | - | |\n| trigger | Press this shortcut key in combination with mouse perform drag element **Key reference:** _MDN Key Values_. If set to an **empty array**, it means drag element can be performed with mouse without pressing other keys
⚠️ Note, setting `trigger` to `['drag']` will cause the `drag-canvas` behavior to fail. The two cannot be configured simultaneously. | string[] \\| (`Control` \\| `Shift`\\| `Alt` \\| `......`)[] | [`shift`] | |\n\n### cursor\n\n`cursor` is used to customize the mouse pointer style during dragging:\n\n- `default`: Pointer style in default state\n- `grab`: Pointer style when hovering over a draggable element\n- `grabbing`: Pointer style when dragging\n\nOptional values are: `auto` | `default` | `none` | `context-menu` | `help` | `pointer` | `progress` | `wait` | `cell` | `crosshair` | `text` | `vertical-text` | `alias` | `copy` | `move` | `no-drop` | `not-allowed` | `grab` | `grabbing` | `all-scroll` | `col-resize` | `row-resize` | `n-resize` | `e-resize` | `s-resize` | `w-resize` | `ne-resize` | `nw-resize` | `se-resize` | `sw-resize` | `ew-resize` | `ns-resize` | `nesw-resize` | `nwse-resize` | `zoom-in` | `zoom-out`\n\nExample configuration:\n\n```js\ncursor: {\n default: 'default', // Use normal pointer by default\n grab: 'grab', // Show grab pointer when draggable\n grabbing: 'grabbing' // Show grabbing pointer when dragging\n}\n```\n\n## FAQ\n\n### 1. What is the difference between DragElementForce and DragElement?\n\n- `DragElementForce` is specifically used for `d3-force` or `d3-force-3d` layouts, and recalculates the layout in real-time during dragging\n- `DragElement` is a general drag interaction and does not trigger layout recalculation\n\n## Practical Example\n\n### Mesh Effect\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nfunction getData(size = 10) {\n const nodes = Array.from({ length: size * size }, (_, i) => ({ id: `${i}` }));\n const edges = [];\n for (let y = 0; y < size; ++y) {\n for (let x = 0; x < size; ++x) {\n if (y > 0) edges.push({ source: `${(y - 1) * size + x}`, target: `${y * size + x}` });\n if (x > 0) edges.push({ source: `${y * size + (x - 1)}`, target: `${y * size + x}` });\n }\n }\n return { nodes, edges };\n}\n\nconst graph = new Graph({\n data: getData(),\n layout: {\n type: 'd3-force',\n manyBody: {\n strength: -30,\n },\n link: {\n strength: 1,\n distance: 20,\n iterations: 10,\n },\n },\n node: {\n style: {\n size: 10,\n fill: '#000',\n },\n },\n edge: {\n style: {\n stroke: '#000',\n },\n },\n behaviors: [{ type: 'drag-element-force' }, 'zoom-canvas'],\n});\n\ngraph.render();\n\nwindow.addPanel((gui) => {\n gui.add({ msg: 'Try to drag nodes' }, 'msg').name('Tips').disable();\n});\n```\n\n### Fix Dragged Nodes\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst data = {\n nodes: new Array(10).fill(0).map((_, i) => ({ id: `${i}`, label: `${i}` })),\n edges: [\n { source: '0', target: '1' },\n { source: '0', target: '2' },\n { source: '0', target: '3' },\n { source: '0', target: '4' },\n { source: '0', target: '5' },\n { source: '0', target: '7' },\n { source: '0', target: '8' },\n { source: '0', target: '9' },\n { source: '2', target: '3' },\n { source: '4', target: '5' },\n { source: '4', target: '6' },\n { source: '5', target: '6' },\n ],\n};\n\nconst graph = new Graph({\n container: 'container',\n data,\n node: {\n style: {\n labelText: (d) => d.label,\n labelPlacement: 'middle',\n labelFill: '#fff',\n },\n },\n layout: {\n type: 'd3-force',\n link: {\n distance: 100,\n strength: 2,\n },\n collide: {\n radius: 40,\n },\n },\n behaviors: [\n {\n type: 'drag-element-force',\n fixed: true,\n },\n ],\n});\n\ngraph.render();\n```\n\n## Shadow Style\n\n### shadow{[BaseStyleProps](https://g.antv.antgroup.com/api/basic/display-object#%E7%BB%98%E5%9B%BE%E5%B1%9E%E6%80%A7)}\n\n
An expression like icon{TextStyleProps} indicates that properties of the TextStyleProps type are prefixed with icon in camelCase format.
\n\nTextStyleProps includes the following properties:\n\n- fill\n- fontSize\n- fontWeight\n- ...\n\nicon{TextStyleProps} means you need to use the following property names:\n\n- iconFill\n- iconFontSize\n- iconFontWeight\n- ...\n\n\n\n## 基本用法\n\n在图配置中添加这一交互：\n\n**1. 快速配置（静态）**\n\n使用字符串形式直接声明，这种方式简洁但仅支持默认配置，且配置后不可动态修改：\n\n```javascript\nconst graph = new Graph({\n // 其他配置...\n behaviors: ['drag-element-force'],\n});\n```\n\n**2. 对象配置（推荐）**\n\n使用对象形式进行配置，支持自定义参数，且可以在运行时动态更新配置：\n\n```javascript\nconst graph = new Graph({\n // 其他配置...\n behaviors: [\n {\n type: 'drag-element-force',\n key: 'drag-element-force-1',\n fixed: true, // 拖拽后固定节点位置\n },\n ],\n});\n```\n\n## 配置项\n\n| 配置项 | 说明 | 类型 | 默认值 | 必选 |\n| ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | ---------------------------------------------- | ---- |\n| type | 交互类型名称，这里设置 `type: 'drag-element-force'` 启用此交互 | string | `drag-element-force` | ✓ |\n| key | 交互唯一标识符，用于后续操作交互 | string | - | |\n| fixed | 在拖拽结束后，节点是否保持固定位置，布尔值代表：- true: 在拖拽结束后，节点的位置将保持固定，不受布局算法的影响
- false: 在拖拽结束后，节点的位置将继续受到布局算法的影响 | boolean | false | |\n| enable | 是否启用拖拽功能，默认可以拖拽节点和 Combo | boolean \\| ((event: IElementDragEvent) => boolean) | `['node', 'combo'].includes(event.targetType)` | |\n| state | 节点选中状态的标识，启用多选时会基于该状态查找选中的节点 | string | `selected` | |\n| hideEdge | 控制拖拽过程中边的显示状态，可选值有：
- `none`: 不隐藏任何边
- `out`: 隐藏以当前节点为源节点的边
- `in`: 隐藏以当前节点为目标节点的边
- `both`: 隐藏与当前节点相关的所有边
- `all`: 隐藏图中所有边
⚠️ 注意：当启用 `shadow`（幽灵节点）时，`hideEdge` 配置将不生效。 | `none` \\| `all` \\| `in` \\| `out` \\| `both` | `none` | |\n| cursor | 自定义鼠标样式，[示例](#cursor) | { default?: Cursor; grab: Cursor; grabbing: Cursor } | - | |\n| trigger | 同时按下快捷键才能拖拽元素 **按键参考：** _MDN Key Values_ 。若设为**空数组**时则表示不需要按下其他按键配合
⚠️ 注意，`trigger` 设置为 `['drag']` 时会导致 `drag-canvas` 行为失效。两者不可同时配置。 | string[] \\| (`Control` \\| `Shift`\\| `Alt` \\| `......`)[] | [] | |\n\n### cursor\n\n`cursor` 用于自定义拖拽过程中的鼠标指针样式：\n\n- `default`: 默认状态下的指针样式\n- `grab`: 鼠标悬停在可拖拽元素上时的指针样式\n- `grabbing`: 正在拖拽时的指针样式\n\n可选值有：`auto` | `default` | `none` | `context-menu` | `help` | `pointer` | `progress` | `wait` | `cell` | `crosshair` | `text` | `vertical-text` | `alias` | `copy` | `move` | `no-drop` | `not-allowed` | `grab` | `grabbing` | `all-scroll` | `col-resize` | `row-resize` | `n-resize` | `e-resize` | `s-resize` | `w-resize` | `ne-resize` | `nw-resize` | `se-resize` | `sw-resize` | `ew-resize` | `ns-resize` | `nesw-resize` | `nwse-resize` | `zoom-in` | `zoom-out`\n\n示例配置：\n\n```js\ncursor: {\n default: 'default', // 默认使用普通指针\n grab: 'grab', // 可拖拽时显示抓取指针\n grabbing: 'grabbing' // 拖拽中显示抓取中指针\n}\n```\n\n## 常见问题\n\n### 1. DragElementForce 和 DragElement 有什么区别？\n\n- `DragElementForce` 专门用于 `d3-force` 或 `d3-force-3d` 布局，拖拽时会实时重新计算布局\n- `DragElement` 是通用的拖拽交互，不会触发布局重新计算\n\n## 实际案例\n\n### 网格效果\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nfunction getData(size = 10) {\n const nodes = Array.from({ length: size * size }, (_, i) => ({ id: `${i}` }));\n const edges = [];\n for (let y = 0; y < size; ++y) {\n for (let x = 0; x < size; ++x) {\n if (y > 0) edges.push({ source: `${(y - 1) * size + x}`, target: `${y * size + x}` });\n if (x > 0) edges.push({ source: `${y * size + (x - 1)}`, target: `${y * size + x}` });\n }\n }\n return { nodes, edges };\n}\n\nconst graph = new Graph({\n data: getData(),\n layout: {\n type: 'd3-force',\n manyBody: {\n strength: -30,\n },\n link: {\n strength: 1,\n distance: 20,\n iterations: 10,\n },\n },\n node: {\n style: {\n size: 10,\n fill: '#000',\n },\n },\n edge: {\n style: {\n stroke: '#000',\n },\n },\n behaviors: [{ type: 'drag-element-force' }, 'zoom-canvas'],\n});\n\ngraph.render();\n\nwindow.addPanel((gui) => {\n gui.add({ msg: 'Try to drag nodes' }, 'msg').name('Tips').disable();\n});\n```\n\n### 固定被拖拽的节点\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst data = {\n nodes: new Array(10).fill(0).map((_, i) => ({ id: `${i}`, label: `${i}` })),\n edges: [\n { source: '0', target: '1' },\n { source: '0', target: '2' },\n { source: '0', target: '3' },\n { source: '0', target: '4' },\n { source: '0', target: '5' },\n { source: '0', target: '7' },\n { source: '0', target: '8' },\n { source: '0', target: '9' },\n { source: '2', target: '3' },\n { source: '4', target: '5' },\n { source: '4', target: '6' },\n { source: '5', target: '6' },\n ],\n};\n\nconst graph = new Graph({\n container: 'container',\n data,\n node: {\n style: {\n labelText: (d) => d.label,\n labelPlacement: 'middle',\n labelFill: '#fff',\n },\n },\n layout: {\n type: 'd3-force',\n link: {\n distance: 100,\n strength: 2,\n },\n collide: {\n radius: 40,\n },\n },\n behaviors: [\n {\n type: 'drag-element-force',\n fixed: true,\n },\n ],\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/behavior/FixElementSize.en.md":"---\ntitle: FixElementSize\norder: 9\n---\n\n## Overview\n\nFixElementSize is a built-in interaction provided by G6, used to **maintain the size of certain elements within nodes unchanged during the zooming process.** It enhances visual consistency and operability during zooming.\nBy listening to viewport changes, it automatically scales elements marked as \"fixed size\" to ensure they maintain a relatively constant display size at different zoom levels. It supports global enablement and also allows control over specific elements or nodes as needed.\n\n## Use Cases\n\nThis interaction is mainly used for:\n\n- Graphical elements or embedded components (buttons, labels, etc.) that need to maintain a fixed visual size\n\n## Online Experience\n\n\n\n## Basic Usage\n\nAdd this interaction in the graph configuration\n\n**1. Quick Configuration (Static)**\n\nDeclare directly using a string form. This method is simple but only supports default configuration and cannot be dynamically modified after configuration:\n\n```javascript\nconst graph = new Graph({\n // Other configurations...\n behaviors: ['fix-element-size'],\n});\n```\n\n**2. Object Configuration (Recommended)**\n\nConfigure using an object form, supporting custom parameters, and can dynamically update the configuration at runtime:\n\n```javascript\nconst graph = new Graph({\n // Other configurations...\n behaviors: [\n {\n type: 'fix-element-size',\n enable: true, // Enable this interaction\n state: 'selected', // State of elements to fix size\n reset: true, // Restore style when elements are redrawn\n },\n ],\n});\n```\n\n## Configuration Options\n\n| Option | Description | Type | Default | Required |\n| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | -------- |\n| type | Interaction type name | string | `fix-element-size` | ✓ |\n| enable | Whether to enable this interaction, [example](#enable) | boolean \\| ((event: [Event](/api/event#event-object-properties)) => boolean) | true | |\n| reset | Whether to restore style when elements are redrawn | boolean | `false` | |\n| state | Specify the state of elements to fix size | string | \"\" | |\n| node | Node configuration item, used to define which attributes maintain a fixed visual size. If not specified (i.e., undefined), the entire node will be fixed, [example](#node) | [FixShapeConfig](#fixshapeconfig) \\| FixShapeConfig[] | | |\n| nodeFilter | Node filter, used to filter which nodes maintain a fixed size during zooming | (datum: [NodeData](/manual/data#nodedata)) => boolean | `() => true` | |\n| edge | Edge configuration item, used to define which attributes maintain a fixed visual size. By default, the lineWidth and labelFontSize attributes are fixed, usage is the same as [node configuration item](#node) | [FixShapeConfig](#fixshapeconfig) \\| FixShapeConfig[] | `[ shape: 'key', fields: ['lineWidth'] , shape: 'halo', fields: ['lineWidth'] , shape: 'label' ]` | |\n| edgeFilter | Edge filter, used to filter which edges maintain a fixed size during zooming | (datum: [EdgeData](/manual/data#edgedata)) => boolean | `() => true` | |\n| combo | Combo configuration item, used to define which attributes maintain a fixed visual size. By default, the entire Combo will be fixed, usage is the same as [node configuration item](#node) | [FixShapeConfig](#fixshapeconfig) \\| FixShapeConfig[] | | |\n| comboFilter | Combo filter, used to filter which Combos maintain a fixed size during zooming | (datum: [ComboData](/manual/data#combodata)) => boolean | `() => true` | |\n\n### enable\n\nWhether to enable the fixed element size interaction. By default, it is enabled when zooming out the canvas\n\nBy default, it is enabled when zooming out the canvas, set `enable: (event) => event.data.scale < 1`; if you want to enable it when zooming in, set `enable: (event) => event.data.scale > 1`; if you want to enable it when both zooming in and out, set `enable: true`\n\n### node\n\nNode configuration item, used to define which attributes maintain a fixed visual size. If not specified (i.e., undefined), the entire node will be fixed\n\n**Example**\n\nIf you want to fix the lineWidth of the main shape of the node during zooming, you can configure it like this:\n\n```ts\n{\n node: [{ shape: 'key', fields: ['lineWidth'] }];\n}\n```\n\nIf you want to keep the size of the element label unchanged during zooming, you can configure it like this:\n\n```ts\n{\n shape: 'label';\n}\n```\n\n### FixShapeConfig\n\n| Parameter | Description | Type | Default | Required |\n| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------ | ------- | -------- |\n| shape | Specify the shape to fix size, it can be the class name of the shape, or a function that receives all shapes constituting the element and returns the target shape | string \\| ((shapes: DisplayObject[]) => DisplayObject) | - | ✓ |\n| fields | Specify the fields of the shape to fix size. If not specified, the entire shape size is fixed by default | string[] | - | ✘ |\n\n## Practical Example\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst data = {\n nodes: [\n { id: 'node0', size: 50, label: '0', style: { x: 326, y: 268 }, states: ['selected'] },\n { id: 'node1', size: 30, label: '1', style: { x: 280, y: 384 }, states: ['selected'] },\n { id: 'node2', size: 30, label: '2', style: { x: 234, y: 167 } },\n { id: 'node3', size: 30, label: '3', style: { x: 391, y: 368 } },\n { id: 'node4', size: 30, label: '4', style: { x: 444, y: 209 } },\n { id: 'node5', size: 30, label: '5', style: { x: 378, y: 157 } },\n { id: 'node6', size: 15, label: '6', style: { x: 229, y: 400 } },\n { id: 'node7', size: 15, label: '7', style: { x: 281, y: 440 } },\n { id: 'node8', size: 15, label: '8', style: { x: 188, y: 119 } },\n { id: 'node9', size: 15, label: '9', style: { x: 287, y: 157 } },\n { id: 'node10', size: 15, label: '10', style: { x: 185, y: 200 } },\n { id: 'node11', size: 15, label: '11', style: { x: 238, y: 110 } },\n { id: 'node12', size: 15, label: '12', style: { x: 239, y: 221 } },\n { id: 'node13', size: 15, label: '13', style: { x: 176, y: 160 } },\n { id: 'node14', size: 15, label: '14', style: { x: 389, y: 423 } },\n { id: 'node15', size: 15, label: '15', style: { x: 441, y: 341 } },\n { id: 'node16', size: 15, label: '16', style: { x: 442, y: 398 } },\n ],\n edges: [\n { source: 'node0', target: 'node1', label: '0-1', states: ['selected'] },\n { source: 'node0', target: 'node2', label: '0-2' },\n { source: 'node0', target: 'node3', label: '0-3' },\n { source: 'node0', target: 'node4', label: '0-4' },\n { source: 'node0', target: 'node5', label: '0-5' },\n { source: 'node1', target: 'node6', label: '1-6' },\n { source: 'node1', target: 'node7', label: '1-7' },\n { source: 'node2', target: 'node8', label: '2-8' },\n { source: 'node2', target: 'node9', label: '2-9' },\n { source: 'node2', target: 'node10', label: '2-10' },\n { source: 'node2', target: 'node11', label: '2-11' },\n { source: 'node2', target: 'node12', label: '2-12' },\n { source: 'node2', target: 'node13', label: '2-13' },\n { source: 'node3', target: 'node14', label: '3-14' },\n { source: 'node3', target: 'node15', label: '3-15' },\n { source: 'node3', target: 'node16', label: '3-16' },\n ],\n};\n\nconst graph = new Graph({\n container: 'container',\n data,\n node: {\n style: {\n labelText: (d) => d.label,\n size: (d) => d.size,\n lineWidth: 1,\n },\n },\n edge: { style: { labelText: (d) => d.label } },\n behaviors: [\n 'zoom-canvas',\n 'drag-canvas',\n {\n key: 'fix-element-size',\n type: 'fix-element-size',\n enable: (event) => event.data.scale < 1,\n state: 'selected',\n reset: true,\n },\n { type: 'click-select', key: 'click-select', multiple: true },\n ],\n autoFit: 'center',\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/behavior/FixElementSize.zh.md":"---\ntitle: 缩放画布时固定元素大小 FixElementSize\norder: 9\n---\n\n## 概述\n\nFixElementSize 是 G6 提供的一种内置交互，用于在视图缩放过程中，**保持节点中某些元素的尺寸不随缩放变化。** 提升缩放过程中的视觉一致性与可操作性。\n通过监听视口变化，自动对标记为“固定尺寸”的元素进行缩放补偿，确保它们在不同缩放级别下保持相对恒定的显示尺寸。支持全局启用，也支持按需控制具体元素或节点的适配行为。\n\n## 使用场景\n\n这一交互主要用于：\n\n- 需要固定视觉大小的图形元素或嵌入式组件（按钮、标签等）\n\n## 在线体验\n\n\n\n## 基本用法\n\n在图配置中添加这一交互\n\n**1. 快速配置（静态）**\n\n使用字符串形式直接声明，这种方式简洁但仅支持默认配置，且配置后不可动态修改：\n\n```javascript\nconst graph = new Graph({\n // 其他配置...\n behaviors: ['fix-element-size'],\n});\n```\n\n**2. 对象配置（推荐）**\n\n使用对象形式进行配置，支持自定义参数，且可以在运行时动态更新配置：\n\n```javascript\nconst graph = new Graph({\n // 其他配置...\n behaviors: [\n {\n type: 'fix-element-size',\n enable: true, // 开启该交互\n state: 'selected', // 要固定大小的元素状态\n reset: true, // 元素重绘时还原样式\n },\n ],\n});\n```\n\n## 配置项\n\n| 配置项 | 说明 | 类型 | 默认值 | 必选 |\n| ----------- | ----------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | ---- |\n| type | 交互类型名称 | string | `fix-element-size` | √ |\n| enable | 是否启用该交互，[示例](#enable) | boolean \\| ((event: [Event](/api/event#事件对象属性)) => boolean) | true | |\n| reset | 元素重绘时是否还原样式 | boolean | `false` | |\n| state | 指定要固定大小的元素状态 | string | \"\" | |\n| node | 节点配置项，用于定义哪些属性在视觉上保持固定大小。若未指定（即为 undefined），则整个节点将被固定，[示例](#node) | [FixShapeConfig](#fixshapeconfig) \\| FixShapeConfig[] | | |\n| nodeFilter | 节点过滤器，用于过滤哪些节点在缩放过程中保持固定大小 | (datum: [NodeData](/manual/data#节点数据nodedata)) => boolean | `() => true` | |\n| edge | 边配置项，用于定义哪些属性在视觉上保持固定大小。默认固定 lineWidth、labelFontSize 属性，用法同[node配置项](#node) | [FixShapeConfig](#fixshapeconfig) \\| FixShapeConfig[] | `[ shape: 'key', fields: ['lineWidth'] , shape: 'halo', fields: ['lineWidth'] , shape: 'label' ]` | |\n| edgeFilter | 边过滤器，用于过滤哪些边在缩放过程中保持固定大小 | (datum: [EdgeData](/manual/data#边数据edgedata)) => boolean | `() => true` | |\n| combo | Combo 配置项，用于定义哪些属性在视觉上保持固定大小。默认整个 Combo 将被固定，用法同[node配置项](#node) | [FixShapeConfig](#fixshapeconfig) \\| FixShapeConfig[] | | |\n| comboFilter | Combo 过滤器，用于过滤哪些 Combo 在缩放过程中保持固定大小 | (datum: [ComboData](/manual/data#组合数据combodata)) => boolean | `() => true` | |\n\n### enable\n\n是否启用固定元素大小交互。默认在缩小画布时启用\n\n默认在缩小画布时启用，设置 `enable: (event) => event.data.scale < 1`；如果希望在放大画布时启用，设置 `enable: (event) => event.data.scale > 1`；如果希望在放大缩小画布时都启用，设置 `enable: true`\n\n### node\n\n节点配置项，用于定义哪些属性在视觉上保持固定大小。若未指定（即为 undefined），则整个节点将被固定\n\n**示例**\n\n如果在缩放过程中希望固定节点主图形的 lineWidth，可以这样配置：\n\n```ts\n{\n node: [{ shape: 'key', fields: ['lineWidth'] }];\n}\n```\n\n如果在缩放过程中想保持元素标签大小不变，可以这样配置：\n\n```ts\n{\n shape: 'label';\n}\n```\n\n### FixShapeConfig\n\n| 参数 | 描述 | 类型 | 默认值 | 必选 |\n| ------ | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------ | ------ | ---- |\n| shape | 指定要固定大小的图形，可以是图形的类名字，或者是一个函数，该函数接收构成元素的所有图形并返回目标图形 | string \\| ((shapes: DisplayObject[]) => DisplayObject) | - | ✓ |\n| fields | 指定要固定大小的图形属性字段。如果未指定，则默认固定整个图形的大小 | string[] | - | ✘ |\n\n## 实际案例\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst data = {\n nodes: [\n { id: 'node0', size: 50, label: '0', style: { x: 326, y: 268 }, states: ['selected'] },\n { id: 'node1', size: 30, label: '1', style: { x: 280, y: 384 }, states: ['selected'] },\n { id: 'node2', size: 30, label: '2', style: { x: 234, y: 167 } },\n { id: 'node3', size: 30, label: '3', style: { x: 391, y: 368 } },\n { id: 'node4', size: 30, label: '4', style: { x: 444, y: 209 } },\n { id: 'node5', size: 30, label: '5', style: { x: 378, y: 157 } },\n { id: 'node6', size: 15, label: '6', style: { x: 229, y: 400 } },\n { id: 'node7', size: 15, label: '7', style: { x: 281, y: 440 } },\n { id: 'node8', size: 15, label: '8', style: { x: 188, y: 119 } },\n { id: 'node9', size: 15, label: '9', style: { x: 287, y: 157 } },\n { id: 'node10', size: 15, label: '10', style: { x: 185, y: 200 } },\n { id: 'node11', size: 15, label: '11', style: { x: 238, y: 110 } },\n { id: 'node12', size: 15, label: '12', style: { x: 239, y: 221 } },\n { id: 'node13', size: 15, label: '13', style: { x: 176, y: 160 } },\n { id: 'node14', size: 15, label: '14', style: { x: 389, y: 423 } },\n { id: 'node15', size: 15, label: '15', style: { x: 441, y: 341 } },\n { id: 'node16', size: 15, label: '16', style: { x: 442, y: 398 } },\n ],\n edges: [\n { source: 'node0', target: 'node1', label: '0-1', states: ['selected'] },\n { source: 'node0', target: 'node2', label: '0-2' },\n { source: 'node0', target: 'node3', label: '0-3' },\n { source: 'node0', target: 'node4', label: '0-4' },\n { source: 'node0', target: 'node5', label: '0-5' },\n { source: 'node1', target: 'node6', label: '1-6' },\n { source: 'node1', target: 'node7', label: '1-7' },\n { source: 'node2', target: 'node8', label: '2-8' },\n { source: 'node2', target: 'node9', label: '2-9' },\n { source: 'node2', target: 'node10', label: '2-10' },\n { source: 'node2', target: 'node11', label: '2-11' },\n { source: 'node2', target: 'node12', label: '2-12' },\n { source: 'node2', target: 'node13', label: '2-13' },\n { source: 'node3', target: 'node14', label: '3-14' },\n { source: 'node3', target: 'node15', label: '3-15' },\n { source: 'node3', target: 'node16', label: '3-16' },\n ],\n};\n\nconst graph = new Graph({\n container: 'container',\n data,\n node: {\n style: {\n labelText: (d) => d.label,\n size: (d) => d.size,\n lineWidth: 1,\n },\n },\n edge: { style: { labelText: (d) => d.label } },\n behaviors: [\n 'zoom-canvas',\n 'drag-canvas',\n {\n key: 'fix-element-size',\n type: 'fix-element-size',\n enable: (event) => event.data.scale < 1,\n state: 'selected',\n reset: true,\n },\n { type: 'click-select', key: 'click-select', multiple: true },\n ],\n autoFit: 'center',\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/behavior/FocusElement.en.md":"---\ntitle: FocusElement\norder: 10\n---\n\n## Overview\n\nFocusElement is a built-in behavior in G6 used to implement the element focusing feature, allowing elements to be focused to the center of the view by clicking on them. This behavior helps users quickly locate and focus on specific graph elements.\n\n## Use Cases\n\n- Quickly center the focused nodes or edges in the display\n\n## Online Experience\n\n\n\n## Basic Usage\n\nAdd this behavior in the graph configuration:\n\n**1. Quick Configuration (Static)**\n\nDeclare directly using a string form:\n\n```javascript\nconst graph = new Graph({\n // Other configurations...\n behaviors: ['focus-element'],\n});\n```\n\n**2. Object Configuration (Recommended)**\n\nConfigure using an object form, supporting custom parameters:\n\n```javascript\nconst graph = new Graph({\n // Other configurations...\n behaviors: [\n {\n type: 'focus-element',\n animation: {\n duration: 500,\n easing: 'ease-in',\n },\n },\n ],\n});\n```\n\n## Configuration Options\n\n| Option | Description | Type | Default | Required |\n| --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- | -------------------------------------- | -------- |\n| type | Behavior type name | string | `focus-element` | ✓ |\n| animation | Focus animation settings | [ViewportAnimationEffectTiming](#viewportanimationeffecttiming) | `{ duration: 500, easing: 'ease-in' }` | |\n| enable | Whether to enable the focus feature | boolean \\| ((event: IElementEvent) => boolean) | true | |\n| trigger | Press this shortcut key in combination with mouse perform foucs element **Key reference:** _MDN Key Values_. If set to an **empty array**, it means drag element can be performed with mouse without pressing other keys
| string[] \\| (`Control` \\| `Shift`\\| `Alt` \\| `......`)[] | [`shift`] | |\n\n### ViewportAnimationEffectTiming\n\n```typescript\ntype ViewportAnimationEffectTiming =\n | boolean // true to enable default animation, false to disable animation\n | {\n easing?: string; // Animation easing function: 'ease-in-out', 'ease-in', 'ease-out', 'linear'\n duration?: number; // Animation duration (milliseconds)\n };\n```\n\n## Code Examples\n\n### Basic Focus Feature\n\n```javascript\nconst graph = new Graph({\n container: 'container',\n width: 800,\n height: 600,\n behaviors: ['focus-element'],\n});\n```\n\n### Custom Animation Effects\n\n```javascript\nconst graph = new Graph({\n // Other configurations...\n behaviors: [\n {\n type: 'focus-element',\n animation: {\n duration: 800,\n easing: 'ease-in-out',\n },\n },\n ],\n});\n```\n\n### Conditional Focus Enablement\n\n```javascript\nconst graph = new Graph({\n // Other configurations...\n behaviors: [\n {\n type: 'focus-element',\n enable: (event) => {\n // Enable focus only for nodes, not edges\n return event.target.type === 'node';\n },\n },\n ],\n});\n```\n\n## Practical Example\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst data = {\n nodes: [\n { id: 'node1', combo: 'combo1', style: { x: 110, y: 150 } },\n { id: 'node2', combo: 'combo1', style: { x: 190, y: 150 } },\n { id: 'node3', combo: 'combo2', style: { x: 150, y: 260 } },\n ],\n edges: [{ source: 'node1', target: 'node2' }],\n combos: [{ id: 'combo1', combo: 'combo2' }, { id: 'combo2' }],\n};\n\nconst graph = new Graph({\n container: 'container',\n node: {\n style: { labelText: (d) => d.id },\n },\n data,\n behaviors: ['collapse-expand', 'focus-element'],\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/behavior/FocusElement.zh.md":"---\ntitle: 聚焦元素 FocusElement\norder: 10\n---\n\n## 概述\n\nFocusElement 是 G6 中用于实现元素聚焦功能的内置交互，支持通过点击元素将其聚焦到视图中心。这个交互可以帮助用户快速定位和关注特定的图元素。\n\n## 使用场景\n\n- 快速将关注的节点或边居中显示\n\n## 在线体验\n\n\n\n## 基本用法\n\n在图配置中添加这一交互：\n\n**1. 快速配置（静态）**\n\n使用字符串形式直接声明：\n\n```javascript\nconst graph = new Graph({\n // 其他配置...\n behaviors: ['focus-element'],\n});\n```\n\n**2. 对象配置（推荐）**\n\n使用对象形式进行配置，支持自定义参数：\n\n```javascript\nconst graph = new Graph({\n // 其他配置...\n behaviors: [\n {\n type: 'focus-element',\n animation: {\n duration: 500,\n easing: 'ease-in',\n },\n },\n ],\n});\n```\n\n## 配置项\n\n| 配置项 | 说明 | 类型 | 默认值 | 必选 |\n| --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- | -------------------------------------- | ---- |\n| type | 交互类型名称 | string | `focus-element` | ✓ |\n| animation | 聚焦动画效果设置 | [ViewportAnimationEffectTiming](#viewportanimationeffecttiming) | `{ duration: 500, easing: 'ease-in' }` | |\n| enable | 是否启用聚焦功能 | boolean \\| ((event: IElementEvent) => boolean) | true | |\n| trigger | 同时按下快捷键才能聚焦元素 **按键参考：** _MDN Key Values_ 。若设为**空数组**时则表示不需要按下其他按键配合
| string[] \\| (`Control` \\| `Shift`\\| `Alt` \\| `......`)[] | [] | |\n\n### ViewportAnimationEffectTiming\n\n```typescript\ntype ViewportAnimationEffectTiming =\n | boolean // true 启用默认动画，false 禁用动画\n | {\n easing?: string; // 动画缓动函数：'ease-in-out'、'ease-in'、'ease-out'、'linear'\n duration?: number; // 动画持续时间(毫秒)\n };\n```\n\n## 代码示例\n\n### 基础聚焦功能\n\n```javascript\nconst graph = new Graph({\n container: 'container',\n width: 800,\n height: 600,\n behaviors: ['focus-element'],\n});\n```\n\n### 自定义动画效果\n\n```javascript\nconst graph = new Graph({\n // 其他配置...\n behaviors: [\n {\n type: 'focus-element',\n animation: {\n duration: 800,\n easing: 'ease-in-out',\n },\n },\n ],\n});\n```\n\n### 条件性启用聚焦\n\n```javascript\nconst graph = new Graph({\n // 其他配置...\n behaviors: [\n {\n type: 'focus-element',\n enable: (event) => {\n // 只对节点启用聚焦，边不聚焦\n return event.target.type === 'node';\n },\n },\n ],\n});\n```\n\n## 实际案例\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst data = {\n nodes: [\n { id: 'node1', combo: 'combo1', style: { x: 110, y: 150 } },\n { id: 'node2', combo: 'combo1', style: { x: 190, y: 150 } },\n { id: 'node3', combo: 'combo2', style: { x: 150, y: 260 } },\n ],\n edges: [{ source: 'node1', target: 'node2' }],\n combos: [{ id: 'combo1', combo: 'combo2' }, { id: 'combo2' }],\n};\n\nconst graph = new Graph({\n container: 'container',\n node: {\n style: { labelText: (d) => d.id },\n },\n data,\n behaviors: ['collapse-expand', 'focus-element'],\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/behavior/HoverActivate.en.md":"---\ntitle: HoverActivate\norder: 11\n---\n\n## Overview\n\nHoverActivate is a built-in behavior in G6 used to implement the hover activation effect on elements. When the mouse hovers over nodes or edges, it automatically triggers visual feedback such as highlighting and displaying. This behavior is an important means of enhancing data exploration in graph visualization, helping users quickly focus on target elements and obtain related information.\n\n## Use Cases\n\nThis behavior is mainly used for:\n\n- Quickly locating elements of interest in complex relationship graphs\n- Displaying additional information of nodes through hover\n- Highlighting connection paths by activating edges when analyzing relationships between nodes\n\n## Online Experience\n\n\n\n## Basic Usage\n\nAdd this behavior in the graph configuration:\n\n**1. Quick Configuration (Static)**\n\nDeclare directly using a string form. This method is simple but only supports default configuration and cannot be dynamically modified after configuration:\n\n```javascript\nconst graph = new Graph({\n // Other configurations...\n behaviors: ['hover-activate'],\n});\n```\n\n**2. Object Configuration (Recommended)**\n\nConfigure using an object form, supporting custom parameters, and can dynamically update the configuration at runtime:\n\n```javascript\nconst graph = new Graph({\n // Other configurations...\n behaviors: [\n {\n type: 'hover-activate',\n key: 'hover-activate-1', // Specify an identifier for the behavior for dynamic updates\n },\n ],\n});\n```\n\n## Configuration Options\n\n| Option | Description | Type | Default | Required |\n| ------------- | ------------------------------------------- | ---------------------------------------------- | ---------------- | -------- |\n| type | Behavior type name | string | `hover-activate` | ✓ |\n| animation | Whether to enable animation | boolean | true | |\n| enable | Whether to enable hover feature | boolean \\| ((event: IPointerEvent) => boolean) | true | |\n| degree | Degree of relationship to activate elements | number \\| ((event: IPointerEvent) => number); | 0 | |\n| direction | Specify edge direction | `both` \\| `in` \\| `out` | `both` | |\n| state | State of activated elements | string | `active` | |\n| inactiveState | State of inactive elements | string | - | |\n| onHover | Callback when element is hovered | (event: IPointerEvent) => void | - | |\n| onHoverEnd | Callback when hover ends | (event: IPointerEvent) => void | - | |\n\n### enable\n\n`enable` is used to control whether to enable hover highlighting of elements, and can receive a function for dynamic control\n\nFor example: Enable hover highlighting only for nodes\n\n```typescript\nconst graph = new Graph({\n // Other configurations...\n behaviors: [\n {\n type: 'hover-activate',\n enable: (e) => {\n if (e.targetType === 'node') {\n return true;\n }\n return false;\n },\n },\n ],\n});\n```\n\n## Code Examples\n\n### Basic Hover Usage\n\n```typescript\nconst graph = new Graph({\n // Other configurations...\n behaviors: ['hover-activate'],\n});\n```\n\n### Node Trigger Highlight\n\n```typescript\nconst graph = new Graph({\n // Other configurations...\n behaviors: [\n {\n type: 'hover-activate',\n enable: (e) => {\n if (e.targetType === 'node') {\n return true;\n }\n return false;\n },\n },\n ],\n});\n```\n\n### Flowchart Node Hover Next Node Highlight\n\n```typescript\nconst graph = new Graph({\n // Other configurations...\n behaviors: [\n {\n type: 'hover-activate',\n degree: 1,\n direction: 'out',\n enable: (e) => {\n if (e.targetType === 'node') {\n return true;\n }\n return false;\n },\n },\n ],\n});\n```\n\n## Practical Example\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst format = (data) => {\n const { nodes, edges } = data;\n return {\n nodes: nodes.map(({ id, ...node }) => ({ id, data: node })),\n edges: edges.map(({ id, source, target, ...edge }) => ({ id, source, target, data: edge })),\n };\n};\n\nfetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/xiaomi.json')\n .then((res) => res.json())\n .then((data) => {\n const graph = new Graph({\n container: 'container',\n autoFit: 'view',\n data: format(data),\n behaviors: ['hover-activate'],\n layout: {\n type: 'force',\n preventOverlap: true,\n nodeSize: 24,\n },\n animation: false,\n });\n\n graph.render();\n });\n```\n","packages/site/docs/manual/behavior/HoverActivate.zh.md":"---\ntitle: 悬停激活 HoverActivate\norder: 11\n---\n\n## 概述\n\nHoverActivate 是 G6 中用于实现元素悬停激活效果的内置交互，当鼠标悬停在节点或边上时，会自动触发高亮、显示等视觉反馈。该交互是图可视化中增强数据探索的重要手段，有助于用户快速聚焦目标元素并获取相关信息。\n\n## 使用场景\n\n这一交互主要用于：\n\n- 在复杂关系图中快速定位关注元素\n- 通过悬停信息展示节点额外信息\n- 分析节点间关联关系时，通过激活边凸显连接路径\n\n## 在线体验\n\n\n\n## 基本用法\n\n在图配置中添加这一交互：\n\n**1. 快速配置（静态）**\n\n使用字符串形式直接声明，这种方式简洁但仅支持默认配置，且配置后不可动态修改：\n\n```javascript\nconst graph = new Graph({\n // 其他配置...\n behaviors: ['hover-activate'],\n});\n```\n\n**2. 对象配置（推荐）**\n\n使用对象形式进行配置，支持自定义参数，且可以在运行时动态更新配置：\n\n```javascript\nconst graph = new Graph({\n // 其他配置...\n behaviors: [\n {\n type: 'hover-activate',\n key: 'hover-activate-1', // 为交互指定标识符，方便动态更新\n },\n ],\n});\n```\n\n## 配置项\n\n| 配置项 | 说明 | 类型 | 默认值 | 必选 |\n| ------------- | -------------------- | ---------------------------------------------- | ---------------- | ---- |\n| type | 交互类型名称 | string | `hover-activate` | ✓ |\n| animation | 是否开启动画效果 | boolean | true | |\n| enable | 是否开启悬浮元素功能 | boolean \\| ((event: IPointerEvent) => boolean) | true | |\n| degree | 激活元素的n度关系 | number \\| ((event: IPointerEvent) => number); | 0 | |\n| direction | 指定边方向 | `both` \\| `in` \\| `out` | `both` | |\n| state | 激活元素的状态 | string | `active` | |\n| inactiveState | 不激活元素的状态 | string | - | |\n| onHover | 当元素被悬停时的回调 | (event: IPointerEvent) => void | - | |\n| onHoverEnd | 当悬停结束时的回调 | (event: IPointerEvent) => void | - | |\n\n### enable\n\n`enable` 用于控制是否开启元素的悬浮高亮，可接收一个函数来动态控制\n\n例如：只有节点开启悬浮高亮\n\n```typescript\nconst graph = new Graph({\n // 其他配置...\n behaviors: [\n {\n type: 'hover-activate',\n enable: (e) => {\n if (e.targetType === 'node') {\n return true;\n }\n return false;\n },\n },\n ],\n});\n```\n\n## 代码示例\n\n### 基础悬浮用法\n\n```typescript\nconst graph = new Graph({\n // 其他配置...\n behaviors: ['hover-activate'],\n});\n```\n\n### 节点触发高亮\n\n```typescript\nconst graph = new Graph({\n // 其他配置...\n behaviors: [\n {\n type: 'hover-activate',\n enable: (e) => {\n if (e.targetType === 'node') {\n return true;\n }\n return false;\n },\n },\n ],\n});\n```\n\n### 流程图移入节点 下一步节点高亮\n\n```typescript\nconst graph = new Graph({\n // 其他配置...\n behaviors: [\n {\n type: 'hover-activate',\n degree: 1,\n direction: 'out',\n enable: (e) => {\n if (e.targetType === 'node') {\n return true;\n }\n return false;\n },\n },\n ],\n});\n```\n\n## 实际案例\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst format = (data) => {\n const { nodes, edges } = data;\n return {\n nodes: nodes.map(({ id, ...node }) => ({ id, data: node })),\n edges: edges.map(({ id, source, target, ...edge }) => ({ id, source, target, data: edge })),\n };\n};\n\nfetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/xiaomi.json')\n .then((res) => res.json())\n .then((data) => {\n const graph = new Graph({\n container: 'container',\n autoFit: 'view',\n data: format(data),\n behaviors: ['hover-activate'],\n layout: {\n type: 'force',\n preventOverlap: true,\n nodeSize: 24,\n },\n animation: false,\n });\n\n graph.render();\n });\n```\n","packages/site/docs/manual/behavior/LassoSelect.en.md":"---\ntitle: LassoSelect\norder: 12\n---\n\n## Overview\n\nClick and drag the mouse to draw an **irregular** box to enclose elements, and the elements within the selected range will be selected.\n\n## Use Cases\n\nThis behavior is mainly used for:\n\n- Quickly selecting a batch of elements, making it easier to avoid elements you don't want to select\n- Quickly deselecting a batch of elements, making it easier to avoid elements you want to keep\n\n## Online Experience\n\n\n\n## Basic Usage\n\nAdd this behavior in the graph configuration:\n\n**1. Quick Configuration (Static)**\n\nDeclare directly using a string form. This method is simple but only supports default configuration and cannot be dynamically modified after configuration:\n\n```javascript\nconst graph = new Graph({\n // Other configurations...\n behaviors: ['lasso-select'],\n});\n```\n\n**2. Object Configuration (Recommended)**\n\nConfigure using an object form, supporting custom parameters, and can dynamically update the configuration at runtime:\n\n```javascript\nconst graph = new Graph({\n // Other configurations...\n behaviors: [\n {\n type: 'lasso-select',\n key: 'lasso-select',\n immediately: true, // Elements are immediately selected when the box encloses them\n trigger: ['shift', 'alt', 'control'], // Use multiple keys for selection\n },\n ],\n});\n```\n\n## Configuration Options\n\n| Option | Description | Type | Default | Required |\n| --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ------------------------- | -------- |\n| type | Behavior type name. This plugin is built-in, you can use it by `type: 'lasso-select'`. | `lasso-select` \\| string | `lasso-select` | ✓ |\n| animation | Whether to enable animation | boolean | false | |\n| enable | Whether to enable lasso selection | boolean \\| ((event: [Event](/api/event#event-object-properties)) => boolean) | true | |\n| enableElements | Types of elements that can be selected | ( `node` \\| `edge` \\| `combo` )[] | [`node`, `combo`, `edge`] | |\n| [immediately](#immediately) | Whether to select immediately, only effective when [selection mode](#mode) is `default` | boolean | false | |\n| [mode](#mode) | Selection mode | `union` \\| `intersect` \\| `diff` \\| `default` | `default` | |\n| onSelect | Callback for selected element state | (states:Record<string,string\\|string[]>) =>Record<string,string\\|string[]> | | |\n| state | State to switch to when selected | string \\| `selected` \\| `active` \\| `inactive` \\| `disabled` \\| `highlight` | `selected` | |\n| [style](#style) | Style of the box during selection | RectStyleProps extends BaseStyleProps | [Default](#style) | |\n| trigger | Press this shortcut key along with mouse click to select **Key reference:** _MDN Key Values_ | string[] \\| (`Control` \\| `Shift`\\| `Alt` \\| `......`)[] | [`shift`] | |\n\n### immediately\n\nWhether to select immediately, only effective when selection mode is `default`\n\n```js\nconst graph = new Graph({\n behaviors: [\n {\n type: 'lasso-select',\n key: 'lasso-select',\n immediately: true, // Elements are immediately selected when the box encloses them\n trigger: [], // No need for other keys, just click and drag the mouse to select\n },\n ],\n});\n```\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 400,\n height: 200,\n data: {\n nodes: [\n { id: 'node-1', style: { x: 100, y: 50 } },\n { id: 'node-2', style: { x: 260, y: 50 } },\n { id: 'node-3', style: { x: 280, y: 100 } },\n ],\n edges: [\n { source: 'node-1', target: 'node-2' },\n { source: 'node-1', target: 'node-3' },\n { source: 'node-2', target: 'node-3' },\n ],\n },\n node: {\n style: { fill: '#7e3feb' },\n },\n edge: {\n stroke: '#8b9baf',\n },\n behaviors: [\n {\n type: 'lasso-select',\n key: 'lasso-select',\n immediately: true, // Immediate selection\n trigger: [],\n },\n ],\n plugins: [{ type: 'grid-line', size: 30 }],\n});\n\ngraph.render();\n```\n\n### mode\n\nSelection mode\n\n- `union`: Keep the current state of selected elements and add the specified state.\n- `intersect`: Retain the specified state if the selected elements already have it; otherwise, clear the state.\n- `diff`: Toggle the specified state of the selected elements.\n- `default`: Clear the current state of selected elements and add the specified state.\n\n```js\nconst graph = new Graph({\n behaviors: [\n {\n type: 'lasso-select',\n key: 'lasso-select',\n mode: 'default', // Selection mode, default selection mode\n },\n ],\n});\n```\n\n```js | ob { pin: false }\ncreateGraph(\n {\n data: {\n nodes: [\n { id: 'node-1', style: { x: 200, y: 100 } },\n { id: 'node-2', style: { x: 360, y: 100 } },\n { id: 'node-3', style: { x: 280, y: 220 } },\n ],\n edges: [\n { source: 'node-1', target: 'node-2' },\n { source: 'node-1', target: 'node-3' },\n { source: 'node-2', target: 'node-3' },\n ],\n },\n node: {\n style: { fill: '#7e3feb' },\n state: {\n custom: { fill: '#ffa940' },\n },\n },\n edge: {\n stroke: '#8b9baf',\n state: {\n custom: { stroke: '#ffa940' },\n },\n },\n behaviors: [\n {\n type: 'lasso-select',\n key: 'lasso-select',\n trigger: [],\n immediately: true,\n },\n ],\n plugins: [{ type: 'grid-line', size: 30 }],\n animation: true,\n },\n { width: 600, height: 300 },\n (gui, graph) => {\n const options = {\n key: 'lasso-select',\n type: 'lasso-select',\n animation: false,\n enable: true,\n enableElements: ['node', 'edge', 'combo'],\n mode: 'default',\n state: 'selected',\n };\n const optionFolder = gui.addFolder('lassoSelect Options');\n optionFolder.add(options, 'type').disable(true);\n\n optionFolder.add(options, 'state', ['active', 'selected', 'custom']);\n optionFolder.add(options, 'mode', ['union', 'intersect', 'diff', 'default']);\n // .onChange((e) => {\n // immediately.show(e === 'default');\n // });\n\n optionFolder.onChange(({ property, value }) => {\n graph.updateBehavior({\n key: 'lasso-select',\n [property]: value,\n });\n graph.render();\n });\n },\n);\n```\n\n### style\n\n| Property | Description | Type | Default |\n| ----------------- | ----------------------- | ---------------------------------------- | --------- |\n| cursor | Mouse style | string | |\n| fill | Fill color | string \\| Pattern \\| null | `#1677FF` |\n| fillOpacity | Fill opacity | number \\| string | 0.1 |\n| isBillboard | Billboard mode | boolean | |\n| isSizeAttenuation | Size attenuation | boolean | |\n| lineCap | Line cap style | `butt` \\| `round` \\| `square` | |\n| lineDash | Dash line config | number \\| string \\| (string \\| number)[] | |\n| lineDashOffset | Dash line offset | number | |\n| lineJoin | Line join style | `miter` \\| `round` \\| `bevel` | |\n| lineWidth | Line width | number \\| string | 1 |\n| opacity | Overall opacity | number \\| string | |\n| radius | Rectangle corner radius | number \\| string \\| number[] | |\n| shadowBlur | Shadow blur level | number | |\n| shadowColor | Shadow color | string | |\n| shadowOffsetX | Shadow X offset | number | |\n| shadowOffsetY | Shadow Y offset | number | |\n| stroke | Stroke color | string \\| Pattern \\| null | `#1677FF` |\n| strokeOpacity | Stroke opacity | number \\| string | |\n| visibility | Visibility | `visible` \\| `hidden` | |\n| zIndex | Rendering level | number | 2 |\n\n**Example**:\n\n```js\nconst graph = new Graph({\n behaviors: [\n {\n type: 'lasso-select',\n key: 'lasso-select',\n style: {\n width: 0,\n height: 0,\n lineWidth: 4,\n lineDash: [2, 2], // Dashed outline\n // RGB super colorful box\n fill: 'linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%)',\n stroke: 'pink',\n fillOpacity: 0.2,\n zIndex: 2,\n pointerEvents: 'none',\n },\n },\n ],\n});\n```\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 600,\n height: 300,\n data: {\n nodes: [\n { id: 'node-1', style: { x: 200, y: 100 } },\n { id: 'node-2', style: { x: 360, y: 100 } },\n { id: 'node-3', style: { x: 280, y: 220 } },\n ],\n edges: [\n { source: 'node-1', target: 'node-2' },\n { source: 'node-1', target: 'node-3' },\n { source: 'node-2', target: 'node-3' },\n ],\n },\n node: {\n style: { fill: '#7e3feb' },\n },\n edge: {\n stroke: '#8b9baf',\n },\n behaviors: [\n {\n type: 'lasso-select',\n key: 'lasso-select',\n trigger: [],\n immediately: true,\n style: {\n width: 0,\n height: 0,\n lineWidth: 4,\n lineDash: [2, 2], // Dashed outline\n // RGB super colorful box\n fill: 'linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%)',\n stroke: 'pink',\n fillOpacity: 0.2,\n zIndex: 2,\n pointerEvents: 'none',\n },\n },\n ],\n plugins: [{ type: 'grid-line', size: 30 }],\n animation: true,\n});\n\ngraph.render();\n```\n\n### trigger\n\nPress this shortcut key along with mouse click to select, if set to an **empty array**, it means mouse click to select without needing to press other keys.\n\nNote that setting `trigger` to `['drag']` will cause the `drag-canvas` behavior to be disabled. They cannot be configured simultaneously.\n\n### Practical Example\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n data: {\n nodes: [\n { id: 'node-1', style: { x: 200, y: 250 } },\n { id: 'node-2', style: { x: 250, y: 200 } },\n { id: 'node-3', style: { x: 300, y: 250 } },\n { id: 'node-4', style: { x: 250, y: 300 } },\n ],\n edges: [\n { source: 'node-1', target: 'node-2' },\n { source: 'node-2', target: 'node-3' },\n { source: 'node-3', target: 'node-4' },\n { source: 'node-4', target: 'node-1' },\n ],\n },\n behaviors: [\n {\n key: 'lasso-select',\n type: 'lasso-select',\n enable: true,\n animation: false,\n mode: 'default', // union intersect diff default\n state: 'selected', // 'active', 'selected', 'inactive', ...\n trigger: [], // ['Shift', 'Alt', 'Control', 'Drag', 'Meta', ...]\n style: {\n width: 0,\n height: 0,\n lineWidth: 4,\n lineDash: [2, 2],\n fill: 'linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%)',\n stroke: 'pink',\n fillOpacity: 0.2,\n zIndex: 2,\n pointerEvents: 'none',\n },\n },\n ],\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/behavior/LassoSelect.zh.md":"---\ntitle: 套索选择 LassoSelect\norder: 12\n---\n\n## 概述\n\n鼠标点击拖出一个 **不规则的** 框框笼罩元素，精准框选范围内的元素会被选中。\n\n## 使用场景\n\n这一交互主要用于：\n\n- 快速选中一批元素，并且更容易的避开不想选的元素\n- 快速取消选中一批元素，并且更容易的避开想保留的元素\n\n## 在线体验\n\n\n\n## 基本用法\n\n在图配置中添加这一交互：\n\n**1. 快速配置（静态）**\n\n使用字符串形式直接声明，这种方式简洁但仅支持默认配置，且配置后不可动态修改：\n\n```javascript\nconst graph = new Graph({\n // 其他配置...\n behaviors: ['lasso-select'],\n});\n```\n\n**2. 对象配置（推荐）**\n\n使用对象形式进行配置，支持自定义参数，且可以在运行时动态更新配置：\n\n```javascript\nconst graph = new Graph({\n // 其他配置...\n behaviors: [\n {\n type: 'lasso-select',\n key: 'lasso-select',\n immediately: true, // 可以看到框框笼罩过去时，元素立即被框选了\n trigger: ['shift', 'alt', 'control'], // 配合多种按键进行框选\n },\n ],\n});\n```\n\n## 配置项\n\n| 配置项 | 说明 | 类型 | 默认值 | 必选 |\n| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ------------------------- | ---- |\n| type | 交互类型名称。此插件已内置，你可以通过 `type: 'lasso-select'` 来使用它。 | `lasso-select` \\| string | `lasso-select` | ✓ |\n| animation | 是否启用动画 | boolean | false | |\n| enable | 是否启用框选功能 | boolean \\| ((event: [Event](/api/event#事件对象属性)) => boolean) | true | |\n| enableElements | 可框选的元素类型 | ( `node` \\| `edge` \\| `combo` )[] | [`node`, `combo`, `edge`] | |\n| [immediately](#immediately) | 是否及时框选, 仅在[框选模式 mode](#mode)为 `default` 时生效 | boolean | false | |\n| [mode](#mode) | 框选的选择模式 | `union` \\| `intersect` \\| `diff` \\| `default` | `default` | |\n| onSelect | 框选元素状态回调 | (states:Record<string,string\\|string[]>) =>Record<string,string\\|string[]> | | |\n| state | 被选中时切换到该状态 | string \\| `selected` \\| `active` \\| `inactive` \\| `disabled` \\| `highlight` | `selected` | |\n| [style](#style) | 框选时的 框样式 | RectStyleProps extends BaseStyleProps | [默认值](#style) | |\n| trigger | 按下该快捷键配合鼠标点击进行框选 **按键参考：** _MDN Key Values_ | string[] \\| (`Control` \\| `Shift`\\| `Alt` \\| `......`)[] | [`shift`] | |\n\n### immediately\n\n是否及时框选, 仅在框选模式为 `default` 时生效\n\n```js\nconst graph = new Graph({\n behaviors: [\n {\n type: 'lasso-select',\n key: 'lasso-select',\n immediately: true, // 可以看到框框笼罩过去时，元素立即被框选了\n trigger: [], // 不需要配合其他按键，点击鼠标拖动即可框选\n },\n ],\n});\n```\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 400,\n height: 200,\n data: {\n nodes: [\n { id: 'node-1', style: { x: 100, y: 50 } },\n { id: 'node-2', style: { x: 260, y: 50 } },\n { id: 'node-3', style: { x: 280, y: 100 } },\n ],\n edges: [\n { source: 'node-1', target: 'node-2' },\n { source: 'node-1', target: 'node-3' },\n { source: 'node-2', target: 'node-3' },\n ],\n },\n node: {\n style: { fill: '#7e3feb' },\n },\n edge: {\n stroke: '#8b9baf',\n },\n behaviors: [\n {\n type: 'lasso-select',\n key: 'lasso-select',\n immediately: true, // 立即框选\n trigger: [],\n },\n ],\n plugins: [{ type: 'grid-line', size: 30 }],\n});\n\ngraph.render();\n```\n\n### mode\n\n框选的选择模式\n\n- `union`：保持已选元素的当前状态，并添加指定的 state 状态。\n- `intersect`：如果已选元素已有指定的 state 状态，则保留；否则清除该状态。\n- `diff`：对已选元素的指定 state 状态进行取反操作。\n- `default`：清除已选元素的当前状态，并添加指定的 state 状态。\n\n```js\nconst graph = new Graph({\n behaviors: [\n {\n type: 'lasso-select',\n key: 'lasso-select',\n mode: 'default', // 框选模式, 默认框选模式\n },\n ],\n});\n```\n\n```js | ob { pin: false }\ncreateGraph(\n {\n data: {\n nodes: [\n { id: 'node-1', style: { x: 200, y: 100 } },\n { id: 'node-2', style: { x: 360, y: 100 } },\n { id: 'node-3', style: { x: 280, y: 220 } },\n ],\n edges: [\n { source: 'node-1', target: 'node-2' },\n { source: 'node-1', target: 'node-3' },\n { source: 'node-2', target: 'node-3' },\n ],\n },\n node: {\n style: { fill: '#7e3feb' },\n state: {\n custom: { fill: '#ffa940' },\n },\n },\n edge: {\n stroke: '#8b9baf',\n state: {\n custom: { stroke: '#ffa940' },\n },\n },\n behaviors: [\n {\n type: 'lasso-select',\n key: 'lasso-select',\n trigger: [],\n immediately: true,\n },\n ],\n plugins: [{ type: 'grid-line', size: 30 }],\n animation: true,\n },\n { width: 600, height: 300 },\n (gui, graph) => {\n const options = {\n key: 'lasso-select',\n type: 'lasso-select',\n animation: false,\n enable: true,\n enableElements: ['node', 'edge', 'combo'],\n mode: 'default',\n state: 'selected',\n };\n const optionFolder = gui.addFolder('lassoSelect Options');\n optionFolder.add(options, 'type').disable(true);\n\n optionFolder.add(options, 'state', ['active', 'selected', 'custom']);\n optionFolder.add(options, 'mode', ['union', 'intersect', 'diff', 'default']);\n // .onChange((e) => {\n // immediately.show(e === 'default');\n // });\n\n optionFolder.onChange(({ property, value }) => {\n graph.updateBehavior({\n key: 'lasso-select',\n [property]: value,\n });\n graph.render();\n });\n },\n);\n```\n\n### style\n\n| 属性 | 描述 | 类型 | 默认值 |\n| ----------------- | ------------------ | ---------------------------------------- | --------- |\n| cursor | 鼠标样式 | string | |\n| fill | 填充颜色 | string \\| Pattern \\| null | `#1677FF` |\n| fillOpacity | 填充透明度 | number \\| string | 0.1 |\n| isBillboard | 是否启用公告牌模式 | boolean | |\n| isSizeAttenuation | 是否启用大小衰减 | boolean | |\n| lineCap | 线段端点样式 | `butt` \\| `round` \\| `square` | |\n| lineDash | 虚线配置 | number \\| string \\| (string \\| number)[] | |\n| lineDashOffset | 虚线偏移量 | number | |\n| lineJoin | 线段连接处样式 | `miter` \\| `round` \\| `bevel` | |\n| lineWidth | 线宽度 | number \\| string | 1 |\n| opacity | 整体透明度 | number \\| string | |\n| radius | 矩形圆角半径 | number \\| string \\| number[] | |\n| shadowBlur | 阴影模糊程度 | number | |\n| shadowColor | 阴影颜色 | string | |\n| shadowOffsetX | 阴影 X 方向偏移 | number | |\n| shadowOffsetY | 阴影 Y 方向偏移 | number | |\n| stroke | 描边颜色 | string \\| Pattern \\| null | `#1677FF` |\n| strokeOpacity | 描边透明度 | number \\| string | |\n| visibility | 可见性 | `visible` \\| `hidden` | |\n| zIndex | 渲染层级 | number | 2 |\n\n**示例**：\n\n```js\nconst graph = new Graph({\n behaviors: [\n {\n type: 'lasso-select',\n key: 'lasso-select',\n style: {\n width: 0,\n height: 0,\n lineWidth: 4,\n lineDash: [2, 2], // 虚线外框\n // rgb超级炫彩框框\n fill: 'linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%)',\n stroke: 'pink',\n fillOpacity: 0.2,\n zIndex: 2,\n pointerEvents: 'none',\n },\n },\n ],\n});\n```\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 600,\n height: 300,\n data: {\n nodes: [\n { id: 'node-1', style: { x: 200, y: 100 } },\n { id: 'node-2', style: { x: 360, y: 100 } },\n { id: 'node-3', style: { x: 280, y: 220 } },\n ],\n edges: [\n { source: 'node-1', target: 'node-2' },\n { source: 'node-1', target: 'node-3' },\n { source: 'node-2', target: 'node-3' },\n ],\n },\n node: {\n style: { fill: '#7e3feb' },\n },\n edge: {\n stroke: '#8b9baf',\n },\n behaviors: [\n {\n type: 'lasso-select',\n key: 'lasso-select',\n trigger: [],\n immediately: true,\n style: {\n width: 0,\n height: 0,\n lineWidth: 4,\n lineDash: [2, 2], // 虚线外框\n // rgb超级炫彩框框\n fill: 'linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%)',\n stroke: 'pink',\n fillOpacity: 0.2,\n zIndex: 2,\n pointerEvents: 'none',\n },\n },\n ],\n plugins: [{ type: 'grid-line', size: 30 }],\n animation: true,\n});\n\ngraph.render();\n```\n\n### trigger\n\n按下该快捷键配合鼠标点击进行框选，若设为**空数组**时则表示鼠标点击进行框选，不需要按下其他按键配合。\n\n注意，`trigger` 设置为 `['drag']` 时会导致 `drag-canvas` 行为失效。两者不可同时配置。\n\n### 实际案例\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n data: {\n nodes: [\n { id: 'node-1', style: { x: 200, y: 250 } },\n { id: 'node-2', style: { x: 250, y: 200 } },\n { id: 'node-3', style: { x: 300, y: 250 } },\n { id: 'node-4', style: { x: 250, y: 300 } },\n ],\n edges: [\n { source: 'node-1', target: 'node-2' },\n { source: 'node-2', target: 'node-3' },\n { source: 'node-3', target: 'node-4' },\n { source: 'node-4', target: 'node-1' },\n ],\n },\n behaviors: [\n {\n key: 'lasso-select',\n type: 'lasso-select',\n enable: true,\n animation: false,\n mode: 'default', // union intersect diff default\n state: 'selected', // 'active', 'selected', 'inactive', ...\n trigger: [], // ['Shift', 'Alt', 'Control', 'Drag', 'Meta', ...]\n style: {\n width: 0,\n height: 0,\n lineWidth: 4,\n lineDash: [2, 2],\n fill: 'linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%)',\n stroke: 'pink',\n fillOpacity: 0.2,\n zIndex: 2,\n pointerEvents: 'none',\n },\n },\n ],\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/behavior/OptimizeViewportTransform.en.md":"---\ntitle: OptimizeViewportTransform\norder: 13\n---\n\n## Overview\n\nOptimizeViewportTransform is a built-in behavior in G6 used to enhance the performance of large-scale graph behaviors.\n\nThis behavior implements a **selective rendering strategy**, temporarily hiding non-critical visual elements during viewport transformations (such as dragging, zooming, scrolling, etc.) to significantly reduce rendering computation load, improve frame rate, and response speed. After the viewport transformation operation ends, the system automatically restores the visibility of all elements after a set delay to ensure complete visual presentation.\n\nThis behavior is implemented based on the [event system](/en/api/event) by listening to the `GraphEvent.BEFORE_TRANSFORM` and `GraphEvent.AFTER_TRANSFORM` events, precisely capturing the start and end timing of viewport transformations, and dynamically controlling element visibility. Therefore, it must be used in conjunction with viewport operation behaviors (such as `drag-canvas`, `zoom-canvas`, or `scroll-canvas`) to be effective.\n\n## Use Cases\n\nThis behavior is mainly used for:\n\n- Smooth behavior of large-scale graphs (thousands of nodes/edges)\n- Performance-sensitive application scenarios\n\n## Basic Usage\n\nAdd this behavior in the graph configuration:\n\n**1. Quick Configuration (Static)**\n\nDeclare directly using a string form. This method is simple but only supports default configuration and cannot be dynamically modified after configuration:\n\n```javascript\nconst graph = new Graph({\n // Other configurations...\n behaviors: ['optimize-viewport-transform'],\n});\n```\n\n**2. Object Configuration (Recommended)**\n\nConfigure using an object form, supporting custom parameters, and can dynamically update the configuration at runtime:\n\n```javascript\nconst graph = new Graph({\n // Other configurations...\n behaviors: [\n {\n type: 'optimize-viewport-transform',\n key: 'optimize-viewport-transform-1', // Specify an identifier for the behavior for dynamic updates\n debounce: 300, // Set a longer debounce time\n },\n ],\n});\n```\n\n## Configuration Options\n\n| Option | Description | Type | Default | Required |\n| -------- | -------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | ----------------------------- | -------- |\n| type | Behavior type name | string | `optimize-viewport-transform` | ✓ |\n| enable | Whether to enable this behavior | boolean \\| ((event: Event) => boolean) | true | |\n| debounce | How long after the operation ends to restore the visibility of all elements (milliseconds) | number | 200 | |\n| shapes | Specify the graphical elements that should remain visible during canvas operations, [configuration options](#shapes) | function | `(type) => type === 'node'` | |\n\n### Shapes\n\n`shapes` is used to specify the graphical elements that need to remain visible during canvas operations. By default, nodes are always visible, while edges and combos are temporarily hidden during canvas operations to improve performance.\n\n```javascript\n{\n shapes: (type, shape) => {\n // Dynamically decide whether to remain visible based on element type and graphical object\n if (type === 'node') return true; // All nodes remain visible\n if (type === 'edge' && shape.get('importante')) return true; // Important edges remain visible\n return false; // Other graphics are hidden\n };\n}\n```\n\n[Example](#keep-specific-elements-visible)\n\n## Code Examples\n\n### Basic Optimization Functionality\n\n```javascript\nconst graph = new Graph({\n container: 'container',\n width: 800,\n height: 600,\n behaviors: ['drag-canvas', 'zoom-canvas', 'optimize-viewport-transform'],\n});\n```\n\n### Custom Debounce Time\n\n```javascript\nconst graph = new Graph({\n // Other configurations...\n behaviors: [\n 'drag-canvas',\n 'zoom-canvas',\n {\n type: 'optimize-viewport-transform',\n debounce: 500, // Set a longer debounce time, restoring visibility of all elements 0.5 seconds after the operation stops\n },\n ],\n});\n```\n\n### Keep Specific Elements Visible\n\n```javascript\nconst graph = new Graph({\n // Other configurations...\n node: {\n style: {\n labelText: 'Drag Canvas!',\n },\n },\n behaviors: [\n 'drag-canvas',\n 'zoom-canvas',\n {\n type: 'optimize-viewport-transform',\n shapes: (type, shape) => {\n if (type === 'node' && shape.className === 'key') return true;\n return false;\n },\n },\n ],\n});\n```\n\n> 👇 Try dragging the canvas to see the effect\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 200,\n data: {\n nodes: [{ id: 'node-1', style: { x: 100, y: 100 } }],\n },\n node: {\n style: {\n labelText: 'Drag Canvas!',\n },\n },\n behaviors: [\n 'drag-canvas',\n {\n type: 'optimize-viewport-transform',\n shapes: (type, shape) => {\n if (type === 'node' && shape.className === 'key') return true;\n return false;\n },\n },\n ],\n});\n\ngraph.render();\n```\n\n### Dynamically Enable/Disable Optimization Based on Graph Element Count\n\nYou can dynamically decide whether to enable optimization based on the number of graph elements:\n\n```javascript\nconst graph = new Graph({\n // Other configurations...\n behaviors: [\n 'drag-canvas',\n 'zoom-canvas',\n function () {\n // Enable optimization when exceeding 500 elements\n const enable = graph.getNodeData().length + graph.getEdgeData().length > 500;\n return {\n type: 'optimize-viewport-transform',\n key: 'optimize-behavior',\n enable,\n };\n },\n ],\n});\n```\n\n## FAQ\n\n### 1. When should this behavior be used?\n\nWhen the graph contains a large number of nodes and edges (usually more than 500 elements), using this behavior can significantly improve operational smoothness. It is especially useful in environments with high performance requirements or limited hardware performance.\n\n## Practical Example\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n layout: {\n type: 'grid',\n },\n data: {\n nodes: [{ id: 'node1' }, { id: 'node2' }, { id: 'node3' }, { id: 'node4' }, { id: 'node5' }],\n edges: [\n { source: 'node1', target: 'node2' },\n { source: 'node1', target: 'node3' },\n { source: 'node1', target: 'node4' },\n { source: 'node2', target: 'node3' },\n { source: 'node3', target: 'node4' },\n { source: 'node4', target: 'node5' },\n ],\n },\n node: {\n style: {\n labelText: (datum) => datum.id,\n },\n },\n behaviors: ['zoom-canvas', 'drag-canvas', 'scroll-canvas', 'optimize-viewport-transform'],\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/behavior/OptimizeViewportTransform.zh.md":"---\ntitle: 优化视口变换 OptimizeViewportTransform\norder: 13\n---\n\n## 概述\n\nOptimizeViewportTransform 是 G6 中用于提升大规模图表交互性能的内置交互。\n\n该交互通过实现**选择性渲染策略**，在视口变换过程中（即用户进行拖拽、缩放、滚动等操作时）临时隐藏非关键视觉元素，从而显著降低渲染计算负载，提高帧率和响应速度。当视口变换操作结束后，系统会在设定的延迟时间后自动恢复所有元素的可见性，确保完整的视觉呈现。\n\n此交互基于 [事件系统](/api/event) 实现，通过监听 `GraphEvent.BEFORE_TRANSFORM` 和 `GraphEvent.AFTER_TRANSFORM` 事件，精确捕捉视口变换的开始和结束时机，进而执行元素可见性的动态控制。因此，必须与视口操作类交互（如 `drag-canvas`、`zoom-canvas` 或 `scroll-canvas`）配合使用才能发挥作用。\n\n## 使用场景\n\n这一交互主要用于：\n\n- 大规模图表（上千节点/边）的流畅交互\n- 性能敏感的应用场景\n\n## 基本用法\n\n在图配置中添加这一交互：\n\n**1. 快速配置（静态）**\n\n使用字符串形式直接声明，这种方式简洁但仅支持默认配置，且配置后不可动态修改：\n\n```javascript\nconst graph = new Graph({\n // 其他配置...\n behaviors: ['optimize-viewport-transform'],\n});\n```\n\n**2. 对象配置（推荐）**\n\n使用对象形式进行配置，支持自定义参数，且可以在运行时动态更新配置：\n\n```javascript\nconst graph = new Graph({\n // 其他配置...\n behaviors: [\n {\n type: 'optimize-viewport-transform',\n key: 'optimize-viewport-transform-1', // 为交互指定标识符，方便动态更新\n debounce: 300, // 设置更长的防抖时间\n },\n ],\n});\n```\n\n## 配置项\n\n| 配置项 | 说明 | 类型 | 默认值 | 必选 |\n| -------- | ------------------------------------------------------------- | -------------------------------------- | ----------------------------- | ---- |\n| type | 交互类型名称 | string | `optimize-viewport-transform` | ✓ |\n| enable | 是否启用该交互 | boolean \\| ((event: Event) => boolean) | true | |\n| debounce | 操作结束后多长时间恢复显示所有元素（毫秒） | number | 200 | |\n| shapes | 指定在操作画布过程中始终保持可见的图形元素，[配置项](#shapes) | function | `(type) => type === 'node'` | |\n\n### Shapes\n\n`shapes` 用于指定在画布操作过程中需要保持可见的图形元素。默认情况下，节点始终可见，而边和组合在操作画布时会被临时隐藏以提升性能。\n\n```javascript\n{\n shapes: (type, shape) => {\n // 根据元素类型和图形对象动态决定是否保持可见\n if (type === 'node') return true; // 所有节点保持可见\n if (type === 'edge' && shape.get('importante')) return true; // 重要的边保持可见\n return false; // 其他图形隐藏\n };\n}\n```\n\n[示例](#保持特定元素可见)\n\n## 代码示例\n\n### 基础优化功能\n\n```javascript\nconst graph = new Graph({\n container: 'container',\n width: 800,\n height: 600,\n behaviors: ['drag-canvas', 'zoom-canvas', 'optimize-viewport-transform'],\n});\n```\n\n### 自定义防抖时间\n\n```javascript\nconst graph = new Graph({\n // 其他配置...\n behaviors: [\n 'drag-canvas',\n 'zoom-canvas',\n {\n type: 'optimize-viewport-transform',\n debounce: 500, // 设置更长的防抖时间，在操作停止后0.5秒才恢复显示所有元素\n },\n ],\n});\n```\n\n### 保持特定元素可见\n\n```javascript\nconst graph = new Graph({\n // 其他配置...\n node: {\n style: {\n labelText: 'Drag Canvas!',\n },\n },\n behaviors: [\n 'drag-canvas',\n 'zoom-canvas',\n {\n type: 'optimize-viewport-transform',\n shapes: (type, shape) => {\n if (type === 'node' && shape.className === 'key') return true;\n return false;\n },\n },\n ],\n});\n```\n\n> 👇 试试拖拽一下画布，看看效果吧\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 200,\n data: {\n nodes: [{ id: 'node-1', style: { x: 100, y: 100 } }],\n },\n node: {\n style: {\n labelText: 'Drag Canvas!',\n },\n },\n behaviors: [\n 'drag-canvas',\n {\n type: 'optimize-viewport-transform',\n shapes: (type, shape) => {\n if (type === 'node' && shape.className === 'key') return true;\n return false;\n },\n },\n ],\n});\n\ngraph.render();\n```\n\n### 根据图表元素数量动态启用/禁用优化\n\n可以根据图表元素数量动态决定是否启用优化：\n\n```javascript\nconst graph = new Graph({\n // 其他配置...\n behaviors: [\n 'drag-canvas',\n 'zoom-canvas',\n function () {\n // 超出500个元素时启用优化\n const enable = graph.getNodeData().length + graph.getEdgeData().length > 500;\n return {\n type: 'optimize-viewport-transform',\n key: 'optimize-behavior',\n enable,\n };\n },\n ],\n});\n```\n\n## 常见问题\n\n### 1. 什么情况下应该使用此交互？\n\n当图表包含大量节点和边（通常超过500个元素）时，使用此交互可以显著提升操作流畅度。在性能要求高或硬件性能有限的环境中尤其有用。\n\n## 实际案例\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n layout: {\n type: 'grid',\n },\n data: {\n nodes: [{ id: 'node1' }, { id: 'node2' }, { id: 'node3' }, { id: 'node4' }, { id: 'node5' }],\n edges: [\n { source: 'node1', target: 'node2' },\n { source: 'node1', target: 'node3' },\n { source: 'node1', target: 'node4' },\n { source: 'node2', target: 'node3' },\n { source: 'node3', target: 'node4' },\n { source: 'node4', target: 'node5' },\n ],\n },\n node: {\n style: {\n labelText: (datum) => datum.id,\n },\n },\n behaviors: ['zoom-canvas', 'drag-canvas', 'scroll-canvas', 'optimize-viewport-transform'],\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/behavior/ScrollCanvas.en.md":"---\ntitle: ScrollCanvas\norder: 14\n---\n\n## Overview\n\nScrollCanvas is a built-in behavior in G6 used to implement the canvas scrolling feature, supporting panning the canvas using the mouse wheel or keyboard arrow keys. This interaction is particularly useful for browsing larger charts, allowing users to explore different areas of the chart without changing the zoom level.\n\n## Use Cases\n\nThis behavior is mainly used for:\n\n- Browsing large chart content that exceeds the visible area\n- Exploring different parts of the graph while maintaining the current zoom level\n- Precisely adjusting the view position, especially when precise scrolling is needed in one-dimensional directions\n\n## Online Experience\n\n\n\n## Basic Usage\n\nAdd this behavior in the graph configuration:\n\n**1. Quick Configuration (Static)**\n\nDeclare directly using a string form. This method is simple but only supports default configuration and cannot be dynamically modified after configuration:\n\n```javascript\nconst graph = new Graph({\n // Other configurations...\n behaviors: ['scroll-canvas'],\n});\n```\n\n**2. Object Configuration (Recommended)**\n\nConfigure using an object form, supporting custom parameters, and can dynamically update the configuration at runtime:\n\n```javascript\nconst graph = new Graph({\n // Other configurations...\n behaviors: [\n {\n type: 'scroll-canvas',\n key: 'scroll-canvas-1', // Specify an identifier for the behavior for dynamic updates\n sensitivity: 1.5, // Set sensitivity\n direction: 'y', // Allow only vertical scrolling\n },\n ],\n});\n```\n\n## Configuration Options\n\n| Option | Description | Type | Default | Required |\n| -------------- | ----------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------- |\n| type | Behavior type name | string | `scroll-canvas` | ✓ |\n| enable | Whether to enable this behavior | boolean \\| ((event: [WheelEvent](https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent) \\| [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent)) => boolean) | true | |\n| direction | Allowed scrolling direction, [configuration options](#direction) | `'x'` \\| `'y'` \\| `undefined` | `undefined` (no direction limit) | |\n| range | Scrollable viewport range (in viewport size units), [configuration options](#range) | number \\| number[] | 1 | |\n| sensitivity | Scrolling sensitivity, the larger the value, the faster the scrolling | number | 1 | |\n| trigger | Keyboard shortcuts to trigger scrolling, [configuration options](#trigger) | object | - | |\n| onFinish | Callback function when scrolling is finished | () => void | - | |\n| preventDefault | Whether to prevent the browser's default event | boolean | true | |\n\n### Direction\n\n`direction` is used to limit the scrolling direction:\n\n- Not set or set to `undefined`: Allow scrolling in any direction\n- Set to `'x'`: Allow only horizontal scrolling\n- Set to `'y'`: Allow only vertical scrolling\n\nThis is useful in specific visualization scenarios, such as in timeline charts where only horizontal scrolling may be needed.\n\n### Range\n\n`range` is used to control the scrollable range of the canvas:\n\n- Set to a single number: Use the same value for all four directions\n- Set to an array: Specify the range for [top, right, bottom, left] directions respectively\n\nFor example:\n\n```javascript\nrange: 2; // Can scroll 2 viewport distances in any direction\nrange: [1, 2, 1, 2]; // Can scroll 1 viewport up and down, 2 viewports left and right\n```\n\nThe value range for each direction is [0, Infinity], where 0 means no scrolling, and Infinity means unlimited scrolling.\n\n### Trigger\n\n`trigger` allows you to configure keyboard arrow keys to control canvas scrolling:\n\n```javascript\n{\n trigger: {\n up: ['ArrowUp'], // Shortcut key for scrolling up\n down: ['ArrowDown'], // Shortcut key for scrolling down\n left: ['ArrowLeft'], // Shortcut key for scrolling left\n right: ['ArrowRight'] // Shortcut key for scrolling right\n }\n}\n```\n\nYou can also configure combination keys:\n\n```javascript\n{\n trigger: {\n up: ['Control', 'ArrowUp'], // Ctrl + Up Arrow\n down: ['Control', 'ArrowDown'], // Ctrl + Down Arrow\n left: ['Control', 'ArrowLeft'], // Ctrl + Left Arrow\n right: ['Control', 'ArrowRight'] // Ctrl + Right Arrow\n }\n}\n```\n\n## Code Examples\n\n### Basic Scrolling Functionality\n\n```javascript\nconst graph = new Graph({\n container: 'container',\n width: 800,\n height: 600,\n behaviors: ['scroll-canvas'],\n});\n```\n\n### Allow Only Horizontal Scrolling\n\n```javascript\nconst graph = new Graph({\n // Other configurations...\n behaviors: [\n {\n type: 'scroll-canvas',\n direction: 'x', // Allow only horizontal scrolling\n },\n ],\n});\n```\n\n### Custom Scrolling Sensitivity and Range\n\n```javascript\nconst graph = new Graph({\n // Other configurations...\n behaviors: [\n {\n type: 'scroll-canvas',\n sensitivity: 1.8, // Increase scrolling sensitivity\n range: [0.5, 2, 0.5, 2], // Smaller limits up and down, larger limits left and right\n },\n ],\n});\n```\n\n### Control Scrolling with Keyboard Arrow Keys\n\n```javascript\nconst graph = new Graph({\n // Other configurations...\n behaviors: [\n {\n type: 'scroll-canvas',\n trigger: {\n up: ['ArrowUp'],\n down: ['ArrowDown'],\n left: ['ArrowLeft'],\n right: ['ArrowRight'],\n },\n },\n ],\n});\n```\n\n## FAQ\n\n### 1. What is the difference between ScrollCanvas and ZoomCanvas?\n\n- `ScrollCanvas` is used to pan the canvas without changing the zoom level\n- `ZoomCanvas` is used to zoom the canvas, changing the view's zoom level\n\nThey are often used together to provide complete canvas navigation functionality:\n\n```javascript\nconst graph = new Graph({\n // Other configurations...\n behaviors: ['drag-canvas', 'zoom-canvas', 'scroll-canvas'],\n});\n```\n\n### Practical Example\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n layout: {\n type: 'grid',\n },\n data: {\n nodes: [{ id: 'node1' }, { id: 'node2' }, { id: 'node3' }, { id: 'node4' }, { id: 'node5' }],\n edges: [\n { source: 'node1', target: 'node2' },\n { source: 'node1', target: 'node3' },\n { source: 'node1', target: 'node4' },\n { source: 'node2', target: 'node3' },\n { source: 'node3', target: 'node4' },\n { source: 'node4', target: 'node5' },\n ],\n },\n behaviors: ['scroll-canvas'],\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/behavior/ScrollCanvas.zh.md":"---\ntitle: 滚动画布 ScrollCanvas\norder: 14\n---\n\n## 概述\n\nScrollCanvas 是 G6 中用于实现画布滚动功能的内置交互，支持通过鼠标滚轮或键盘方向键平移画布。这种交互方式对于浏览较大的图表特别有用，能让用户在不改变缩放比例的情况下探索图表的不同区域。\n\n## 使用场景\n\n这一交互主要用于：\n\n- 浏览超出可视区域的大型图表内容\n- 在保持当前缩放比例的情况下探索图的不同部分\n- 精确调整查看位置，尤其是在一维方向上需要精确滚动时\n\n## 在线体验\n\n\n\n## 基本用法\n\n在图配置中添加这一交互：\n\n**1. 快速配置（静态）**\n\n使用字符串形式直接声明，这种方式简洁但仅支持默认配置，且配置后不可动态修改：\n\n```javascript\nconst graph = new Graph({\n // 其他配置...\n behaviors: ['scroll-canvas'],\n});\n```\n\n**2. 对象配置（推荐）**\n\n使用对象形式进行配置，支持自定义参数，且可以在运行时动态更新配置：\n\n```javascript\nconst graph = new Graph({\n // 其他配置...\n behaviors: [\n {\n type: 'scroll-canvas',\n key: 'scroll-canvas-1', // 为交互指定标识符，方便动态更新\n sensitivity: 1.5, // 设置灵敏度\n direction: 'y', // 只允许垂直方向滚动\n },\n ],\n});\n```\n\n## 配置项\n\n| 配置项 | 说明 | 类型 | 默认值 | 必选 |\n| -------------- | ---------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ | ---- |\n| type | 交互类型名称 | string | `scroll-canvas` | ✓ |\n| enable | 是否启用该交互 | boolean \\| ((event: [WheelEvent](https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent) \\| [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent)) => boolean) | true | |\n| direction | 允许的滚动方向，[配置项](#direction) | `'x'` \\| `'y'` \\| `undefined` | `undefined` (不限制方向) | |\n| range | 可滚动的视口范围(以视口大小为单位)，[配置项](#range) | number \\| number[] | 1 | |\n| sensitivity | 滚动灵敏度，值越大滚动速度越快 | number | 1 | |\n| trigger | 触发滚动的键盘快捷键，[配置项](#trigger) | object | - | |\n| onFinish | 滚动完成时的回调函数 | () => void | - | |\n| preventDefault | 是否阻止浏览器默认事件 | boolean | true | |\n\n### Direction\n\n`direction` 用于限制滚动的方向：\n\n- 不设置或设为 `undefined`：允许在任意方向滚动\n- 设为 `'x'`：只允许水平方向滚动\n- 设为 `'y'`：只允许垂直方向滚动\n\n这在特定的可视化场景下很有用，例如在时间轴图表中可能只需要水平滚动。\n\n### Range\n\n`range` 用于控制画布可滚动的范围：\n\n- 设置为单个数字：四个方向使用相同的值\n- 设置为数组：分别指定 [上, 右, 下, 左] 四个方向的范围\n\n例如：\n\n```javascript\nrange: 2; // 在任何方向上都可以滚动2个视口的距离\nrange: [1, 2, 1, 2]; // 上下方向可滚动1个视口，左右方向可滚动2个视口\n```\n\n每个方向的取值范围是 [0, Infinity]，0表示不能滚动，Infinity表示无限滚动。\n\n### Trigger\n\n`trigger` 允许你配置键盘方向键来控制画布滚动：\n\n```javascript\n{\n trigger: {\n up: ['ArrowUp'], // 向上滚动的快捷键\n down: ['ArrowDown'], // 向下滚动的快捷键\n left: ['ArrowLeft'], // 向左滚动的快捷键\n right: ['ArrowRight'] // 向右滚动的快捷键\n }\n}\n```\n\n你也可以配置组合键：\n\n```javascript\n{\n trigger: {\n up: ['Control', 'ArrowUp'], // Ctrl + 上箭头\n down: ['Control', 'ArrowDown'], // Ctrl + 下箭头\n left: ['Control', 'ArrowLeft'], // Ctrl + 左箭头\n right: ['Control', 'ArrowRight'] // Ctrl + 右箭头\n }\n}\n```\n\n## 代码示例\n\n### 基础滚动功能\n\n```javascript\nconst graph = new Graph({\n container: 'container',\n width: 800,\n height: 600,\n behaviors: ['scroll-canvas'],\n});\n```\n\n### 只允许水平滚动\n\n```javascript\nconst graph = new Graph({\n // 其他配置...\n behaviors: [\n {\n type: 'scroll-canvas',\n direction: 'x', // 只允许水平滚动\n },\n ],\n});\n```\n\n### 自定义滚动灵敏度和范围\n\n```javascript\nconst graph = new Graph({\n // 其他配置...\n behaviors: [\n {\n type: 'scroll-canvas',\n sensitivity: 1.8, // 提高滚动灵敏度\n range: [0.5, 2, 0.5, 2], // 上下方向限制较小，左右方向限制较大\n },\n ],\n});\n```\n\n### 使用键盘方向键控制滚动\n\n```javascript\nconst graph = new Graph({\n // 其他配置...\n behaviors: [\n {\n type: 'scroll-canvas',\n trigger: {\n up: ['ArrowUp'],\n down: ['ArrowDown'],\n left: ['ArrowLeft'],\n right: ['ArrowRight'],\n },\n },\n ],\n});\n```\n\n## 常见问题\n\n### 1. ScrollCanvas 和 ZoomCanvas 有什么区别？\n\n- `ScrollCanvas` 用于平移画布，不改变缩放比例\n- `ZoomCanvas` 用于缩放画布，改变视图的缩放比例\n\n两者常结合使用，提供完整的画布导航功能：\n\n```javascript\nconst graph = new Graph({\n // 其他配置...\n behaviors: ['drag-canvas', 'zoom-canvas', 'scroll-canvas'],\n});\n```\n\n### 实际案例\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n layout: {\n type: 'grid',\n },\n data: {\n nodes: [{ id: 'node1' }, { id: 'node2' }, { id: 'node3' }, { id: 'node4' }, { id: 'node5' }],\n edges: [\n { source: 'node1', target: 'node2' },\n { source: 'node1', target: 'node3' },\n { source: 'node1', target: 'node4' },\n { source: 'node2', target: 'node3' },\n { source: 'node3', target: 'node4' },\n { source: 'node4', target: 'node5' },\n ],\n },\n behaviors: ['scroll-canvas'],\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/behavior/ZoomCanvas.en.md":"---\ntitle: ZoomCanvas\nordeR: 15\n---\n\n## Overview\n\nZoomCanvas is a built-in behavior in G6 used to implement the canvas zooming feature, supporting zooming in and out of the canvas using the mouse wheel or keyboard shortcuts. This is one of the most commonly used interactions in graph visualization, helping users view both the overall structure and local details of the graph.\n\n## Use Cases\n\nThis behavior is mainly used for:\n\n- Browsing large-scale graph data, freely switching between the whole and details\n- Focusing on specific areas for detailed analysis\n\n## Online Experience\n\n\n\n## Basic Usage\n\nAdd this behavior in the graph configuration:\n\n**1. Quick Configuration (Static)**\n\nDeclare directly using a string form. This method is simple but only supports default configuration and cannot be dynamically modified after configuration:\n\n```javascript\nconst graph = new Graph({\n // Other configurations...\n behaviors: ['zoom-canvas'],\n});\n```\n\n**2. Object Configuration (Recommended)**\n\nConfigure using an object form, supporting custom parameters, and can dynamically update the configuration at runtime:\n\n```javascript\nconst graph = new Graph({\n // Other configurations...\n behaviors: [\n {\n type: 'zoom-canvas',\n key: 'zoom-canvas-1', // Specify an identifier for the behavior for dynamic updates\n sensitivity: 1.5, // Set sensitivity\n },\n ],\n});\n```\n\n## Configuration Options\n\n| Option | Description | Type | Default | Required |\n| -------------- | ------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------- | ------------------- | -------- |\n| type | Behavior type name | string | `zoom-canvas` | ✓ |\n| animation | Zoom animation effect settings | [ViewportAnimationEffectTiming](/manual/graph/option#viewportanimationeffecttiming) | `{ duration: 200 }` | |\n| enable | Whether to enable this behavior | boolean \\| ((event: Event) => boolean) | true | |\n| origin | Zoom center point (viewport coordinates) | [Point](/api/viewport#point) | - | |\n| onFinish | Callback function when zooming is finished | () => void | - | |\n| preventDefault | Whether to prevent the browser's default event | boolean | true | |\n| sensitivity | Zoom sensitivity, the larger the value, the faster the zoom | number | 1 | |\n| trigger | How to trigger zooming, supports mouse wheel and keyboard shortcuts, [configuration options](#trigger) | string[] \\| object | - | |\n\n### Trigger\n\n`trigger` has two usage methods, suitable for different scenarios:\n\n#### Method 1: Modifier keys combined with the mouse wheel\n\nIf you want to trigger zooming only when certain keys are pressed while scrolling the mouse wheel, you can configure it like this:\n\n```javascript\n{\n trigger: ['Control']; // Hold down the Control key and scroll the mouse wheel to zoom\n}\n```\n\nCommon modifier keys include:\n\n- `Control`\n- `Shift`\n- `Alt`\n\n> Not sure what value corresponds to a keyboard key? Refer to [MDN Key Values](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values).\n\n#### Method 2: Pure keyboard shortcuts\n\nIf you want to control zooming entirely using the keyboard, you can set up key combinations:\n\n```javascript\n{\n trigger: {\n zoomIn: ['Control', '+'], // Zoom in shortcut\n zoomOut: ['Control', '-'], // Zoom out shortcut\n reset: ['Control', '0'] // Reset zoom ratio shortcut\n }\n}\n```\n\n## Code Examples\n\n### Basic Zoom Functionality\n\n```javascript\nconst graph = new Graph({\n container: 'container',\n width: 800,\n height: 600,\n behaviors: ['zoom-canvas'],\n});\n```\n\n### Custom Zoom Center\n\n```javascript\nconst graph = new Graph({\n // Other configurations...\n behaviors: [\n function () {\n return {\n type: 'zoom-canvas',\n origin: this.getCanvasCenter(), // Zoom with the viewport center as the origin\n };\n },\n ],\n});\n```\n\n### Custom Zoom Sensitivity\n\n```javascript\nconst graph = new Graph({\n // Other configurations...\n behaviors: [\n {\n type: 'zoom-canvas',\n sensitivity: 0.8, // Lower sensitivity for smoother zoom changes\n },\n ],\n});\n```\n\n### Zoom with Shift + Mouse Wheel\n\n```javascript\nconst graph = new Graph({\n // Other configurations...\n behaviors: [\n {\n type: 'zoom-canvas',\n trigger: ['Shift'], // Hold down the Shift key and scroll to zoom\n },\n ],\n});\n```\n\n### Control Zoom with Keyboard Shortcuts\n\n```javascript\nconst graph = new Graph({\n // Other configurations...\n behaviors: [\n {\n type: 'zoom-canvas',\n trigger: {\n zoomIn: ['Control', '='], // Ctrl + = to zoom in\n zoomOut: ['Control', '-'], // Ctrl + - to zoom out\n reset: ['Control', '0'], // Ctrl + 0 to reset\n },\n },\n ],\n});\n```\n\n### Supports pinch-to-zoom on mobile devices\n\n```javascript\nconst graph = new Graph({\n // 其他配置...\n behaviors: [\n {\n type: 'zoom-canvas',\n // Other configurations for the PC side...\n },\n function () {\n return {\n type: 'zoom-canvas',\n trigger: ['pinch'],\n sensitivity: 0.8, // Lower sensitivity for smoother zoom changes\n origin: this.getCanvasCenter(), // Zoom with the viewport center as the origin\n };\n },\n ],\n});\n```\n\n## FAQ\n\n### 1. What if the canvas zoom exceeds the expected range?\n\nTo avoid excessive zooming in or out, you can set zoom limits:\n\n```javascript\nconst graph = new Graph({\n // Other configurations...\n zoomRange: [0.5, 3], // Allow zooming out to 50% and zooming in to 300%\n behaviors: ['zoom-canvas'],\n});\n```\n\n### 2. How to use it with other interactions?\n\nZooming and dragging are common combinations for a complete navigation experience:\n\n```javascript\nconst graph = new Graph({\n // Other configurations...\n behaviors: ['drag-canvas', 'zoom-canvas'],\n});\n```\n\n### 3. Conflicts when using two-finger touchpad input and scroll-canvas simultaneously\n\nOn a touchpad, both two-finger swipe (for scrolling) and pinch (for zooming) gestures are often interpreted as `wheel` events.\n\nBecause both `zoom-canvas` and `scroll-canvas` respond to `wheel` events by default, using them together can cause conflicts, such as a single gesture triggering both scrolling and zooming.\n\nYou can resolve this by checking the `event.ctrlKey` property. On most platforms, a pinch gesture sets `event.ctrlKey` to `true`, while a swipe does not. This allows you to conditionally enable `zoom-canvas` only for pinch gestures.\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\nconst graph = new Graph({\n container: 'container',\n layout: {\n type: 'grid',\n },\n data: {\n nodes: [{ id: 'node1' }, { id: 'node2' }, { id: 'node3' }],\n },\n behaviors: [\n 'scroll-canvas',\n {\n key: 'custom-zoom-canvas',\n type: 'zoom-canvas',\n enable: (event) => {\n return event.ctrlKey; // When ctrlKey is true, it performs a two-finger pinch or spread operation; when false, it performs a two-finger swipe operation.\n },\n },\n ],\n});\ngraph.render();\n```\n\n## Practical Example\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n layout: {\n type: 'grid',\n },\n data: {\n nodes: [{ id: 'node1' }, { id: 'node2' }, { id: 'node3' }, { id: 'node4' }, { id: 'node5' }],\n edges: [\n { source: 'node1', target: 'node2' },\n { source: 'node1', target: 'node3' },\n { source: 'node1', target: 'node4' },\n { source: 'node2', target: 'node3' },\n { source: 'node3', target: 'node4' },\n { source: 'node4', target: 'node5' },\n ],\n },\n behaviors: ['zoom-canvas'],\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/behavior/ZoomCanvas.zh.md":"---\ntitle: 缩放画布 ZoomCanvas\nordeR: 15\n---\n\n## 概述\n\nZoomCanvas 是 G6 中用于实现画布缩放功能的内置交互，支持通过鼠标滚轮或键盘快捷键调整画布缩放比例。这是图可视化中最常用的交互之一，能帮助用户查看图的整体结构和局部细节。\n\n## 使用场景\n\n这一交互主要用于：\n\n- 浏览大规模图数据，在整体与细节之间自由切换\n- 聚焦到特定区域进行详细分析\n\n## 在线体验\n\n\n\n## 基本用法\n\n在图配置中添加这一交互：\n\n**1. 快速配置（静态）**\n\n使用字符串形式直接声明，这种方式简洁但仅支持默认配置，且配置后不可动态修改：\n\n```javascript\nconst graph = new Graph({\n // 其他配置...\n behaviors: ['zoom-canvas'],\n});\n```\n\n**2. 对象配置（推荐）**\n\n使用对象形式进行配置，支持自定义参数，且可以在运行时动态更新配置：\n\n```javascript\nconst graph = new Graph({\n // 其他配置...\n behaviors: [\n {\n type: 'zoom-canvas',\n key: 'zoom-canvas-1', // 为交互指定标识符，方便动态更新\n sensitivity: 1.5, // 设置灵敏度\n },\n ],\n});\n```\n\n## 配置项\n\n| 配置项 | 说明 | 类型 | 默认值 | 必选 |\n| -------------- | -------------------------------------------------------- | ----------------------------------------------------------------------------------- | ------------------- | ---- |\n| type | 交互类型名称 | string | `zoom-canvas` | ✓ |\n| animation | 缩放动画效果设置 | [ViewportAnimationEffectTiming](/manual/graph/option#viewportanimationeffecttiming) | `{ duration: 200 }` | |\n| enable | 是否启用该交互 | boolean \\| ((event: Event) => boolean) | true | |\n| origin | 缩放中心点(视口坐标) | [Point](/api/viewport#point) | - | |\n| onFinish | 缩放完成时的回调函数 | () => void | - | |\n| preventDefault | 是否阻止浏览器默认事件 | boolean | true | |\n| sensitivity | 缩放灵敏度，值越大缩放速度越快 | number | 1 | |\n| trigger | 触发缩放的方式，支持滚轮和键盘快捷键，[配置项](#trigger) | string[] \\| object | - | |\n\n### Trigger\n\n`trigger`有两种使用方式，分别适用于不同场景：\n\n#### 方式一：与滚轮结合的修饰键\n\n当你希望只有在按下某些键的同时滚动滚轮才触发缩放时，可以这样配置：\n\n```javascript\n{\n trigger: ['Control']; // 按住 Control 键同时滚动鼠标滚轮才能缩放\n}\n```\n\n常见的修饰键有：\n\n- `Control`\n- `Shift`\n- `Alt`\n\n> 不知道键盘按键对应什么值？请参考 [MDN Key Values](https://developer.mozilla.org/zh-CN/docs/Web/API/UI_Events/Keyboard_event_key_values)。\n\n#### 方式二：纯键盘快捷键\n\n当你希望完全使用键盘控制缩放操作时，可以设置组合键：\n\n```javascript\n{\n trigger: {\n zoomIn: ['Control', '+'], // 放大快捷键\n zoomOut: ['Control', '-'], // 缩小快捷键\n reset: ['Control', '0'] // 重置缩放比例快捷键\n }\n}\n```\n\n## 代码示例\n\n### 基础缩放功能\n\n```javascript\nconst graph = new Graph({\n container: 'container',\n width: 800,\n height: 600,\n behaviors: ['zoom-canvas'],\n});\n```\n\n### 自定义缩放中心\n\n```javascript\nconst graph = new Graph({\n // 其他配置...\n behaviors: [\n function () {\n return {\n type: 'zoom-canvas',\n origin: this.getCanvasCenter(), // 以视口中心为原点进行缩放\n };\n },\n ],\n});\n```\n\n### 自定义缩放灵敏度\n\n```javascript\nconst graph = new Graph({\n // 其他配置...\n behaviors: [\n {\n type: 'zoom-canvas',\n sensitivity: 0.8, // 降低灵敏度，缩放变化更平缓\n },\n ],\n});\n```\n\n### 使用Shift+滚轮进行缩放\n\n```javascript\nconst graph = new Graph({\n // 其他配置...\n behaviors: [\n {\n type: 'zoom-canvas',\n trigger: ['Shift'], // 按住 Shift 键同时滚动才能缩放\n },\n ],\n});\n```\n\n### 使用键盘快捷键控制缩放\n\n```javascript\nconst graph = new Graph({\n // 其他配置...\n behaviors: [\n {\n type: 'zoom-canvas',\n trigger: {\n zoomIn: ['Control', '='], // Ctrl + = 放大\n zoomOut: ['Control', '-'], // Ctrl + - 缩小\n reset: ['Control', '0'], // Ctrl + 0 重置\n },\n },\n ],\n});\n```\n\n### 支持移动端双指缩放\n\n```javascript\nconst graph = new Graph({\n // 其他配置...\n behaviors: [\n {\n type: 'zoom-canvas',\n // PC 端其他配置...\n },\n function () {\n return {\n type: 'zoom-canvas',\n trigger: ['pinch'],\n sensitivity: 0.8, // 降低灵敏度，缩放变化更平缓\n origin: this.getCanvasCenter(), // 以视口中心为原点进行缩放\n };\n },\n ],\n});\n```\n\n## 常见问题\n\n### 1. 画布缩放超出了预期范围怎么办？\n\n为避免缩放过大或过小，可以设置缩放限制：\n\n```javascript\nconst graph = new Graph({\n // 其他配置...\n zoomRange: [0.5, 3], // 允许缩小到50%和放大到300%\n behaviors: ['zoom-canvas'],\n});\n```\n\n### 2. 如何与其他交互结合使用？\n\n缩放与拖拽是常见的组合，实现完整的导航体验：\n\n```javascript\nconst graph = new Graph({\n // 其他配置...\n behaviors: ['drag-canvas', 'zoom-canvas'],\n});\n```\n\n### 3. 触控板双指操作下，与 scroll-canvas 同时使用时的冲突\n\n在触控板上，双指滑动（用于滚动）和双指捏合（用于缩放）手势通常都会被解析为 `wheel` 事件。\n\n由于 `zoom-canvas` 和 `scroll-canvas` 默认都会响应 `wheel` 事件，当它们同时使用时会产生冲突，例如一个手势会同时触发滚动和缩放。\n\n你可以通过检查 `event.ctrlKey` 属性来解决这个问题。在多数平台上，捏合手势会使 `event.ctrlKey` 为 `true`，而滑动则不会。这允许你有条件地仅为捏合手势启用 `zoom-canvas`。\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\nconst graph = new Graph({\n container: 'container',\n layout: {\n type: 'grid',\n },\n data: {\n nodes: [{ id: 'node1' }, { id: 'node2' }, { id: 'node3' }],\n },\n behaviors: [\n 'scroll-canvas',\n {\n key: 'custom-zoom-canvas',\n type: 'zoom-canvas',\n enable: (event) => {\n return event.ctrlKey; // ctrlKey 为 true 时，是双指捏合或扩张操作，false 时是双指滑动操作\n },\n },\n ],\n});\ngraph.render();\n```\n\n## 实际案例\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n layout: {\n type: 'grid',\n },\n data: {\n nodes: [{ id: 'node1' }, { id: 'node2' }, { id: 'node3' }, { id: 'node4' }, { id: 'node5' }],\n edges: [\n { source: 'node1', target: 'node2' },\n { source: 'node1', target: 'node3' },\n { source: 'node1', target: 'node4' },\n { source: 'node2', target: 'node3' },\n { source: 'node3', target: 'node4' },\n { source: 'node4', target: 'node5' },\n ],\n },\n behaviors: ['zoom-canvas'],\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/behavior/custom-behavior.en.md":"---\ntitle: Custom Behavior\norder: 16\n---\n\n## Overview\n\nCustom behavior allows users to define one or more related interaction behaviors as a complete interaction based on the comprehensive [event mechanism](/en/api/event) provided by G6, thereby achieving interaction logic that fits business scenarios.\n\n### Execution Logic of Behavior\n\nTypically:\n\n1. Listen for user interaction events\n\n2. Update the canvas or perform other operations based on the events\n\nFor example, the `DragCanvas` behavior listens for pointer drag events and updates the camera position based on the drag distance.\n\n### Difference Between Behavior and Plugin\n\n- Both behavior and plugin base classes are derived from the [BaseExtension](https://github.com/antvis/G6/blob/v5/packages/g6/src/registry/extension/index.ts) base class within G6, so the implementation methods for behavior and plugin are basically the same.\n- However, based on the concept of visualization, behavior is usually used to handle user interaction events, while plugins are usually used to handle canvas rendering logic, additional component rendering, etc.\n\n:::info{title=Tip}\nDue to conceptual distinctions, behavior instances cannot be obtained, while plugin instances can be obtained ([getPluginInstance](/en/api/plugin#graphgetplugininstancekey)).\n:::\n\n## When to Use Custom Behavior?\n\n- **Purpose**:\n\n When users need to implement interaction logic that fits business scenarios, we usually need to cooperate with G6's event system to respond to related events and execute the required interaction logic.\n\n- **Without Custom Behavior**:\n\n If custom behavior is not used, users need to perform a series of event listening and response processing through `graph.on` after creating a Graph instance, making code logic processing and orchestration extremely difficult.\n\n- **Advantages of Behavior**:\n\n Each behavior is an independent code module, and the existence of the behavior system facilitates users to decouple business logic, avoid code bloat, and facilitate subsequent maintenance.\n\n- **Conclusion**:\n\n > 1. When users need to implement any interaction logic, they should first consider custom behavior.\n > 2. When built-in behavior cannot fully meet business needs, users can also adjust and modify through custom behavior (inheriting built-in behavior).\n >\n > _(If the features supported by built-in behavior are more general, or if there are bugs in built-in behavior, you are welcome to submit issues or PRs on [Github](https://github.com/antvis/G6))_\n\n## Implementing Behavior\n\nThe implementation of a behavior is quite flexible, and you can implement your behavior in your preferred style.\n\nBelow is a simple custom behavior implementation. When the user clicks on the canvas, a node is added to the canvas (the fill color of the added node can be defined through behavior configuration):\n\n```typescript\nimport type { BaseBehaviorOptions, RuntimeContext, IPointerEvent } from '@antv/g6';\nimport { BaseBehavior, CanvasEvent } from '@antv/g6';\n\ninterface ClickAddNodeOptions extends BaseBehaviorOptions {\n fill: string;\n}\n\nexport class ClickAddNode extends BaseBehavior
- \n
- \n packages\n
- \n
- \n g6\n G6 Core Implementation\n
- \n
- \n __tests__\n Testing and Development Environment\n
- \n
- \n assets\n Test Static Resources\n \n
- \n bugs\n Bugfix Test Case\n \n
- \n dataset\n Test Dataset\n \n
- \n demos\n Development Demos\n \n
- \n snapshots\n Test Snapshots\n \n
- \n perf\n Performance Test Case\n \n
- \n perf-report\n Performance Test Reports\n \n
- \n unit\n Test Cases\n \n
- \n utils\n Test Utility Functions\n \n
\n - \n src\n
- \n
- \n animations\n Animation Executors and Built-in Animations \n \n
- \n behaviors\n Built-in Interactions \n \n
- \n constants\n Constants and Enumeration Values \n \n
- \n elements\n Built-in Elements\n
- \n
- \n combos\n Built-in Combos\n \n
- \n edges\n Built-in Edges\n \n
- \n nodes\n Built-in Nodes\n \n
- \n shapes\n Composite Shapes\n \n
\n - \n layouts\n Layout References and Encapsulation \n \n
- \n palettes\n Built-in Palettes \n \n
- \n plugins\n Built-in Plugins \n \n
- \n registry\n Registry Module \n \n
- \n runtime\n Graph and Core Controller \n \n
- \n spec\n Specification Type Definitions \n \n
- \n themes\n Built-in Themes \n \n
- \n transforms\n Built-in Data Transformations \n \n
- \n types\n Type Definitions \n \n
- \n utils\n Utility Functions \n \n
- \n exports.ts\n Export Items \n \n
- \n preset.ts\n Pre-operations\n \n
\n - \n vite.config.js\n Development Environment Vite Configuration\n \n
\n - \n __tests__\n Testing and Development Environment\n
- \n g6-extension-3d/src\n 3D Extension\n
- \n
- \n behaviors\n 3D Behaviors\n \n
- \n elements\n 3D Elements\n \n
- \n plugins\n 3D Plugins\n \n
- \n renderer.ts\n 3D Renderer\n \n
\n - \n g6-extension-react/src\n React Node Extension\n
- \n
- \n elements\n React Elements\n \n
- \n graph\n React Graph Encapsulation\n \n
\n - \n site\n Official Website and Documentation\n
- \n
- \n docs\n Tutorials and API\n \n
- \n examples\n Graph Examples\n \n
- \n .dumirc.ts\n Configuration File\n \n
\n
\n\n - \n g6\n G6 Core Implementation\n
![](\"https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*39j5TKAePWsAAAAAAAAAAAAADmJ7AQ/original\"/)
\n\nIf it is confirmed that this modification is correct, then please manually delete the corresponding benchmark screenshots and regenerate the screenshots:\n\n**Regenerate all screenshots**:\n\n1. Delete all files in the `packages/g6/__tests__/unit/snapshots` directory\n2. Execute `pnpm test`\n\n**Regenerate a single screenshot**:\n\n1. Delete the corresponding file in the `packages/g6/__tests__/snapshots` directory (test cases in the `unit` directory will generate the corresponding directory under `snapshots`)\n2. Execute `npx jest __tests__/unit/xx/xxx.spec.ts`\n\n## Code Standards\n\nThe G6 code adheres to the following standards:\n\n- eslint:recommended\n- @typescript-eslint/recommended\n- jsdoc/recommended-error\n\n## Commit Conventions\n\nG6 adopts the [Conventional Commits](https://www.conventionalcommits.org/) specification, and the commit message format is as follows:\n\n```\n- \n
- \n packages\n
- \n
- \n g6\n G6 核心实现\n
- \n
- \n __tests__\n 测试及开发环境\n
- \n
- \n assets\n 测试静态资源\n \n
- \n bugs\n Bug 修复测试用例\n \n
- \n dataset\n 测试数据集\n \n
- \n demos\n 开发示例\n \n
- \n snapshots\n 测试截图\n \n
- \n perf\n 性能测试用例\n \n
- \n perf-report\n 性能测试报告\n \n
- \n unit\n 测试用例\n \n
- \n utils\n 测试工具函数\n \n
\n - \n src\n
- \n
- \n animations\n 动画执行器及内置动画 \n \n
- \n behaviors\n 内置交互 \n \n
- \n constants\n 常量及枚举值 \n \n
- \n elements\n 内置元素\n
- \n
- \n combos\n 内置组合\n \n
- \n edges\n 内置边\n \n
- \n nodes\n 内置节点\n \n
- \n shapes\n 复合图形\n \n
\n - \n layouts\n 布局引用及封装 \n \n
- \n palettes\n 内置色板 \n \n
- \n plugins\n 内置插件 \n \n
- \n registry\n 注册模块 \n \n
- \n runtime\n Graph 及核心控制器 \n \n
- \n spec\n Specification 类型定义 \n \n
- \n themes\n 内置主题 \n \n
- \n transforms\n 内置数据转换 \n \n
- \n types\n 类型定义 \n \n
- \n utils\n 工具函数 \n \n
- \n exports.ts\n 导出项 \n \n
- \n preset.ts\n 预操作\n \n
\n - \n vite.config.js\n 开发环境 Vite 配置\n \n
\n - \n __tests__\n 测试及开发环境\n
- \n g6-extension-3d/src\n 3D 扩展\n
- \n
- \n behaviors\n 3D 交互\n \n
- \n elements\n 3D 元素\n \n
- \n plugins\n 3D 插件\n \n
- \n renderer.ts\n 3D 渲染器\n \n
\n - \n g6-extension-react/src\n React 节点扩展\n
- \n
- \n elements\n React 元素\n \n
- \n graph\n React Graph 封装\n \n
\n - \n site\n 官网及文档\n
- \n
- \n docs\n 教程及 API\n \n
- \n examples\n 图表示例\n \n
- \n .dumirc.ts\n 配置文件\n \n
\n
\n\n - \n g6\n G6 核心实现\n
\n\n如果确认本次修改是正确的，那么请手动删除对应的基准截图，并重新生成截图：\n\n**重新生成全部截图**：\n\n1. 删除 `packages/g6/__tests__/unit/snapshots` 目录下的所有文件\n2. 执行 `pnpm test`\n\n**重新生成单个截图**：\n\n1. 删除 `packages/g6/__tests__/snapshots` 目录下对应的文件（`unit`目录下测试用例会在`snapshots`下生成对应的目录）\n2. 执行 `npx jest __tests__/unit/xx/xxx.spec.ts`\n\n## 代码规范\n\nG6 编码尊循以下规范：\n\n- eslint:recommended\n- @typescript-eslint/recommended\n- jsdoc/recommended-error\n\n## 提交规范\n\nG6 采用 [Conventional Commits](https://www.conventionalcommits.org/) 规范，提交信息格式如下：\n\n```\n![](\"https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*z-OxR4MAdUwAAAAAAAAAAAAADmJ7AQ/original\")
\n\n- `key`: The main graphic of the combo, representing the primary shape of the combo, such as circle, rectangle, etc.\n- `label`: Text label, usually used to display the combo's name or description\n- `halo`: Graphic displaying halo effect around the main graphic\n- `badge`: Badge displayed at the top-right corner of the combo by default\n\nThe following style configurations will be explained by atomic graphics:\n\n### Main Graphic Style\n\nThe main graphic is the core part of the combo, defining the basic shape and appearance of the combo. Here are common configuration scenarios:\n\n#### Basic Style Configuration\n\nSet the basic appearance of the combo:\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 100,\n autoFit: 'center',\n data: {\n nodes: [{ id: 'node1', combo: 'combo1' }],\n combos: [{ id: 'combo1' }],\n },\n combo: {\n style: {\n fill: '#5B8FF9', // Blue fill\n stroke: '#1A1A1A', // Dark stroke\n lineWidth: 2,\n fillOpacity: 0.2,\n },\n },\n});\n\ngraph.render();\n```\n\n#### Transparency and Shadow Effects\n\nAdd transparency and shadow effects to combos:\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 100,\n autoFit: 'center',\n data: {\n nodes: [{ id: 'node1', combo: 'combo1' }],\n combos: [{ id: 'combo1' }],\n },\n combo: {\n style: {\n fill: '#61DDAA',\n fillOpacity: 0.15,\n shadowColor: 'rgba(97, 221, 170, 0.4)',\n shadowBlur: 12,\n shadowOffsetX: 2,\n shadowOffsetY: 4,\n stroke: '#F0F0F0',\n lineWidth: 1,\n },\n },\n});\n\ngraph.render();\n```\n\n#### Dashed Border Style\n\nCreate combos with dashed borders:\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 100,\n autoFit: 'center',\n data: {\n nodes: [{ id: 'node1', combo: 'combo1' }],\n combos: [{ id: 'combo1' }],\n },\n combo: {\n style: {\n fill: '#FFF1F0',\n fillOpacity: 0.1,\n stroke: '#F5222D',\n lineWidth: 2,\n lineDash: [6, 4],\n lineCap: 'round',\n },\n },\n});\n\ngraph.render();\n```\n\nHere is the complete main graphic style configuration:\n\n| Property | Description | Type | Default | Required |\n| ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- | --------- | -------- |\n| collapsed | Whether the current combo is collapsed | boolean | false | |\n| cursor | Combo mouse hover style, [options](#cursor) | string | default | |\n| fill | Combo fill color | string | `#99ADD1` | |\n| fillOpacity | Combo fill opacity | number \\| string | 0.04 | |\n| increasedLineWidthForHitTesting | When lineWidth is small, the interactive area becomes small. Sometimes we want to increase this area to make \"thin lines\" easier to pick | number | 0 | |\n| lineCap | Combo stroke end cap style | `round` \\| `square` \\| `butt` | `butt` | |\n| lineDash | Combo stroke dash style | number[] | - | |\n| lineDashOffset | Combo stroke dash offset | number | - | |\n| lineJoin | Combo stroke join style | `round` \\| `bevel` \\| `miter` | `miter` | |\n| lineWidth | Combo stroke width | number | 1 | |\n| opacity | Combo opacity | number \\| string | 1 | |\n| pointerEvents | How combo responds to pointer events, [options](#pointerevents) | string | `auto` | |\n| shadowBlur | Combo shadow blur | number | - | |\n| shadowColor | Combo shadow color | string | - | |\n| shadowOffsetX | Combo shadow offset in x direction | number \\| string | - | |\n| shadowOffsetY | Combo shadow offset in y direction | number \\| string | - | |\n| shadowType | Combo shadow type | `inner` \\| `outer` | `outer` | |\n| size | Combo size, quick setting for combo width and height, [options](#size) | number \\| number[] | - | |\n| stroke | Combo stroke color | string | `#99ADD1` | |\n| strokeOpacity | Combo stroke opacity | number \\| string | 1 | |\n| transform | Transform property allows you to rotate, scale, skew or translate the given combo | string | - | |\n| transformOrigin | Rotation and scaling center, also called transformation center | string | - | |\n| visibility | Whether combo is visible | `visible` \\| `hidden` | `visible` | |\n| x | Combo x coordinate | number | 0 | |\n| y | Combo y coordinate | number | 0 | |\n| z | Combo z coordinate | number | 0 | |\n| zIndex | Combo rendering layer | number | 0 | |\n\n#### Size\n\nCombo size, quick setting for combo width and height, supports three configuration methods:\n\n- number: Indicates that combo width and height are the same as the specified value\n- [number, number]: Indicates that combo width and height are represented by array elements in order for combo width and height\n- [number, number, number]: Indicates that combo width, height, and depth are represented by array elements in order\n\n#### PointerEvents\n\nThe `pointerEvents` property controls how graphics respond to interaction events. Refer to [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events).\n\nAvailable values: `visible` | `visiblepainted` | `visiblestroke` | `non-transparent-pixel` | `visiblefill` | `visible` | `painted` | `fill` | `stroke` | `all` | `none` | `auto` | `inherit` | `initial` | `unset`\n\nIn short, `fill`, `stroke`, and `visibility` can independently or in combination affect pick testing behavior. Currently supports the following keywords:\n\n- **`auto`**: Default value, equivalent to `visiblepainted`\n- **`none`**: Will never be the target of responding events\n- **`visiblepainted`**: Will respond to events only when the following conditions are met:\n - `visibility` is set to `visible`, i.e., the graphic is visible\n - Triggered in the graphic fill area and `fill` takes a non-`none` value; or triggered in the graphic stroke area and `stroke` takes a non-`none` value\n- **`visiblefill`**: Will respond to events only when the following conditions are met:\n - `visibility` is set to `visible`, i.e., the graphic is visible\n - Triggered in the graphic fill area, not affected by the `fill` value\n- **`visiblestroke`**: Will respond to events only when the following conditions are met:\n - `visibility` is set to `visible`, i.e., the graphic is visible\n - Triggered in the graphic stroke area, not affected by the `stroke` value\n- **`visible`**: Will respond to events only when the following conditions are met:\n - `visibility` is set to `visible`, i.e., the graphic is visible\n - Triggered in the graphic fill or stroke area, not affected by `fill` and `stroke` values\n- **`painted`**: Will respond to events only when the following conditions are met:\n - Triggered in the graphic fill area and `fill` takes a non-`none` value; or triggered in the graphic stroke area and `stroke` takes a non-`none` value\n - Not affected by `visibility` value\n- **`fill`**: Will respond to events only when the following conditions are met:\n - Triggered in the graphic fill area, not affected by the `fill` value\n - Not affected by `visibility` value\n- **`stroke`**: Will respond to events only when the following conditions are met:\n - Triggered in the graphic stroke area, not affected by the `stroke` value\n - Not affected by `visibility` value\n- **`all`**: Will respond to events as long as entering the graphic fill and stroke areas, not affected by `fill`, `stroke`, `visibility` values\n\n**Usage Examples:**\n\n```js\n// Example 1: Only stroke area responds to events\nconst graph = new Graph({\n combo: {\n style: {\n fill: 'none',\n stroke: '#000',\n lineWidth: 2,\n pointerEvents: 'stroke', // Only stroke responds to events\n },\n },\n});\n\n// Example 2: Does not respond to events at all\nconst graph = new Graph({\n combo: {\n style: {\n pointerEvents: 'none', // Combo does not respond to any events\n },\n },\n});\n```\n\n#### Cursor\n\nAvailable values: `auto` | `default` | `none` | `context-menu` | `help` | `pointer` | `progress` | `wait` | `cell` | `crosshair` | `text` | `vertical-text` | `alias` | `copy` | `move` | `no-drop` | `not-allowed` | `grab` | `grabbing` | `all-scroll` | `col-resize` | `row-resize` | `n-resize` | `e-resize` | `s-resize` | `w-resize` | `ne-resize` | `nw-resize` | `se-resize` | `sw-resize` | `ew-resize` | `ns-resize` | `nesw-resize` | `nwse-resize` | `zoom-in` | `zoom-out`\n\n### Style When Expanded\n\nMain graphic style when the combo is expanded\n\n| Attribute | Description | Type | Default | Required |\n| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | --------- | -------- |\n| collapsed | Whether the combo is currently collapsed | boolean | false | |\n| cursor | Combo mouse hover style, [configuration item](#cursor) | string | default | |\n| fill | Combo fill color | string | `#99ADD1` | |\n| fillOpacity | Combo fill color opacity | number string | 0.04 | |\n| increasedLineWidthForHitTesting | When lineWidth is small, the interactive area also becomes smaller. Sometimes we want to enlarge this area to make \"thin lines\" easier to pick up | number | 0 | |\n| lineCap | Combo stroke end style | `round` `square` `butt` | `butt` | |\n| lineDash | Combo stroke dash style | number[] | - | |\n| lineDashOffset | Combo stroke dash offset | number | - | |\n| lineJoin | Combo stroke join style | `round` `bevel` `miter` | `miter` | |\n| lineWidth | Combo stroke width | number | 1 | |\n| opacity | Combo opacity | number string | 1 | |\n| shadowBlur | Combo shadow blur | number | - | |\n| shadowColor | Combo shadow color | string | - | |\n| shadowOffsetX | Combo shadow offset in the x-axis direction | number string | - | |\n| shadowOffsetY | Combo shadow offset in the y-axis direction | number string | - | |\n| shadowType | Combo shadow type | `inner` `outer` | `outer` | |\n| stroke | Combo stroke color | string | `#99add1` | |\n| strokeOpacity | Combo stroke color opacity | number string | 1 | |\n| visibility | Whether the combo is visible | `visible` `hidden` | `visible` | |\n| x | Combo x coordinate | number | 0 | |\n| y | Combo y coordinate | number | 0 | |\n| z | Combo z coordinate | number | 0 | |\n| zIndex | Combo rendering layer | number | 0 | |\n| `{styleProps}` | More graphic configurations, refer to [BaseStyleProps](https://g.antv.antgroup.com/api/basic/display-object#绘图属性) configuration items | [BaseStyleProps](https://g.antv.antgroup.com/api/basic/display-object#绘图属性) | - | |\n\n#### Cursor\n\nOptional values are: `auto` | `default` | `none` | `context-menu` | `help` | `pointer` | `progress` | `wait` | `cell` | `crosshair` | `text` | `vertical-text` | `alias` | `copy` | `move` | `no-drop` | `not-allowed` | `grab` | `grabbing` | `all-scroll` | `col-resize` | `row-resize` | `n-resize` | `e-resize` | `s-resize` | `w-resize` | `ne-resize` | `nw-resize` | `se-resize` | `sw-resize` | `ew-resize` | `ns-resize` | `nesw-resize` | `nwse-resize` | `zoom-in` | `zoom-out`\n\n**Example:**\n\n```js {5-7}\nconst graph = new Graph({\n // Other configurations...\n combo: {\n style: {\n fill: '#1783FF', // Fill color\n stroke: '#000', // Stroke color\n lineWidth: 2, // Stroke width\n },\n },\n});\n```\n\nThe effect is as follows:\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 240,\n height: 100,\n autoFit: 'center',\n data: {\n nodes: [{ id: 'node1', combo: 'combo1' }],\n combos: [{ id: 'combo1' }],\n },\n combo: {\n style: { fill: '#1783FF', stroke: '#000', lineWidth: 2 },\n },\n});\n\ngraph.render();\n```\n\n### Style When Collapsed\n\nEffective when `collapsed` is `true`\n\n| Attribute | Description | Type | Default | Required |\n| ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | ---------------------------------------- | -------- |\n| collapsedCursor | Mouse hover style when the combo is collapsed, [configuration item](#cursor) | string | Same as the cursor when expanded | |\n| collapsedFill | Fill color when the combo is collapsed | string | Same as the fill when expanded | |\n| collapsedFillOpacity | Fill color opacity when the combo is collapsed | number string | 1 | |\n| collapsedIncreasedLineWidthForHitTesting | When the combo is collapsed, if lineWidth is small, the interactive area also becomes smaller. Sometimes we want to enlarge this area to make \"thin lines\" easier to pick up | number | 0 | |\n| collapsedLineCap | Stroke end style when the combo is collapsed | `round` `square` `butt` | Same as the lineCap when expanded | |\n| collapsedLineDash | Stroke dash style when the combo is collapsed | number[] | Same as the lineDash when expanded | |\n| collapsedLineDashOffset | Stroke dash offset when the combo is collapsed | number | Same as the lineDashOffset when expanded | |\n| collapsedLineJoin | Stroke join style when the combo is collapsed | `round` `bevel` `miter` | Same as the lineJoin when expanded | |\n| collapsedLineWidth | Stroke width when the combo is collapsed | number | Same as the lineWidth when expanded | |\n| collapsedMarker | Whether to display the marker when the combo is collapsed, [configuration item](#collapsedMarkerStyle) | boolean | true | |\n| collapsedOpacity | Opacity when the combo is collapsed | number string | Same as the opacity when expanded | |\n| collapsedShadowBlur | Shadow blur when the combo is collapsed | number | Same as the shadowBlur when expanded | |\n| collapsedShadowColor | Shadow color when the combo is collapsed | string | Same as the shadowColor when expanded | |\n| collapsedShadowOffsetX | Shadow offset in the x-axis direction when the combo is collapsed | number string | Same as the shadowOffsetX when expanded | |\n| collapsedShadowOffsetY | Shadow offset in the y-axis direction when the combo is collapsed | number string | Same as the shadowOffsetY when expanded | |\n| collapsedShadowType | Shadow type when the combo is collapsed | `inner` `outer` | Same as the shadowType when expanded | |\n| collapsedSize | Size when the combo is collapsed | number | [number, number] | [number, number, number] | 32 | |\n| collapsedStroke | Stroke color when the combo is collapsed | string | Same as the stroke when expanded | |\n| collapsedStrokeOpacity | Stroke color opacity when the combo is collapsed | number string | Same as the strokeOpacity when expanded | |\n| collapsedVisibility | Whether the combo is visible when collapsed | `visible` `hidden` | Same as the visibility when expanded | |\n| `collapsed{styleProps}` | More graphic configurations, refer to [BaseStyleProps](https://g.antv.antgroup.com/api/basic/display-object#绘图属性) configuration items | [BaseStyleProps](https://g.antv.antgroup.com/api/basic/display-object#绘图属性) | - | |\n\n**Example:**\n\n```js {5-7}\nconst graph = new Graph({\n // Other configurations...\n combo: {\n style: {\n collapsedFill: '#1783FF', // Fill color\n collapsedStroke: '#000', // Stroke color\n collapsedLineWidth: 2, // Stroke width\n },\n },\n});\n```\n\nThe effect is as follows:\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 240,\n height: 100,\n autoFit: 'center',\n data: {\n nodes: [{ id: 'node1', combo: 'combo1' }],\n combos: [{ id: 'combo1', style: { collapsed: true } }],\n },\n combo: {\n style: { collapsedFill: '#1783FF', collapsedStroke: '#000', collapsedLineWidth: 2 },\n },\n});\n\ngraph.render();\n```\n\n### Collapsed Marker Style\n\nEffective when `collapsedMarker` is `true`\n\n| Attribute | Description | Type | Default | Required |\n| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------------- | -------- |\n| collapsedMarkerType | Marker type displayed when the combo is collapsed - `'child-count'`: Number of child elements (including Node and Combo)
- `'descendant-count'`: Number of descendant elements (including Node and Combo)
- `'node-count'`: Number of descendant elements (only including Node)
- `(children: NodeLikeData[]) => string`: Custom processing logic | `child-count` \\| `descendant-count` \\| `node-count` \\| ((children: NodeData \\| ComboData[]) => string) | `child-count` | |\n| collapsedMarkerFill | Icon text color | string | #fff | |\n| collapsedMarkerFillOpacity | Icon text color opacity | number | 1 | |\n| collapsedMarkerFontSize | Icon font size | number | 12 | |\n| collapsedMarkerFontWeight | Icon font weight | number \\| string | `normal` | |\n| collapsedMarkerRadius | Icon corner radius | number | 0 | |\n| collapsedMarkerSrc | Image source. Its priority is higher than `collapsedMarkerText` | string | - | |\n| collapsedMarkerText | Icon text | string | - | |\n| collapsedMarkerTextAlign | Icon text horizontal alignment | `center` `end` `left` `right` `start` | `center` | |\n| collapsedMarkerTextBaseline | Icon text alignment baseline | `alphabetic` `bottom` `hanging` `ideographic` `middle` `top` | `middle` | |\n| collapsedMarkerWidth | Icon width | number | - | |\n| collapsedMarkerHeight | Icon height | number | - | |\n| collapsedMarkerZIndex | Icon rendering layer | number | 1 | |\n| `collapsedMarker{StyleProps}` | More icon style configurations, refer to [TextStyleProps](https://g.antv.antgroup.com/api/basic/text), [ImageStyleProps](https://g.antv.antgroup.com/api/basic/image) configuration items. For example, collapsedMarkerFontSize represents the font size of the text icon | [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) | [ImageStyleProps](https://g.antv.antgroup.com/api/basic/image) | - | |\n\n**Example:**\n\n```js {5-6}\nconst graph = new Graph({\n // Other configurations...\n combo: {\n style: {\n collapsedMarkerFill: '#1783FF', // Fill color\n collapsedMarkerFontSize: 30, // Icon font size\n },\n },\n});\n```\n\nThe effect is as follows:\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 240,\n height: 100,\n autoFit: 'center',\n data: {\n nodes: [\n { id: 'node1', combo: 'combo1' },\n { id: 'node2', combo: 'combo1' },\n ],\n combos: [{ id: 'combo1', style: { collapsed: true } }],\n },\n combo: {\n style: {\n collapsedMarkerFill: '#1783FF',\n collapsedMarkerFontSize: 30,\n },\n },\n});\n\ngraph.render();\n```\n\n### Label Style\n\nLabels are used to display text information for combos, supporting rich text style configuration and flexible position layout.\n\n#### Basic Label Configuration\n\nAdd basic text label to combo:\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 240,\n height: 100,\n autoFit: 'center',\n data: {\n nodes: [{ id: 'node1', combo: 'combo1' }],\n combos: [{ id: 'combo1' }],\n },\n combo: {\n style: {\n labelText: 'Sales Department', // Label text content\n labelFill: '#1A1A1A', // Label text color\n labelFontSize: 14, // Label font size\n labelPlacement: 'bottom', // Label position: bottom\n },\n },\n});\n\ngraph.render();\n```\n\n#### Multi-line Text Label\n\nConfigure labels that support multi-line display:\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 240,\n height: 120,\n autoFit: 'center',\n data: {\n nodes: [{ id: 'node1', combo: 'combo1' }],\n combos: [{ id: 'combo1' }],\n },\n combo: {\n style: {\n labelText: 'This is a combo label text content that supports multi-line display',\n labelWordWrap: true, // Enable text wrapping\n labelMaxWidth: 100, // Maximum width 100px\n labelMaxLines: 3, // Maximum 3 lines\n labelTextAlign: 'center', // Center text alignment\n labelFontSize: 12,\n },\n },\n});\n\ngraph.render();\n```\n\n#### Custom Style Label\n\nCreate labels with special styles:\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 240,\n height: 100,\n autoFit: 'center',\n data: {\n nodes: [{ id: 'node1', combo: 'combo1' }],\n combos: [{ id: 'combo1' }],\n },\n combo: {\n style: {\n labelText: 'IMPORTANT',\n labelFill: '#FF4D4F', // Red text\n labelFontSize: 16,\n labelFontWeight: 'bold', // Bold\n labelFontStyle: 'italic', // Italic\n labelTextDecorationLine: 'underline', // Underline\n labelLetterSpacing: 2, // Letter spacing\n labelPlacement: 'top',\n },\n },\n});\n\ngraph.render();\n```\n\nHere are the complete label style configurations:\n\n| Property | Description | Type | Default | Required |\n| ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | --------- | -------- |\n| label | Whether to show combo label | boolean | true | |\n| labelCursor | Cursor style when hovering over combo label, [options](#cursor) | string | `default` | |\n| labelFill | Combo label text color | string | #000 | |\n| labelFillOpacity | Combo label text color opacity | number | 1 | |\n| labelFontFamily | Combo label font family | string | - | |\n| labelFontSize | Combo label font size | number | 12 | |\n| labelFontStyle | Combo label font style | `normal` \\| `italic` \\| `oblique` | - | |\n| labelFontVariant | Combo label font variant | `normal` \\| `small-caps` \\| string | - | |\n| labelFontWeight | Combo label font weight | `normal` \\| `bold` \\| `bolder` \\| `lighter` \\| number | 400 | |\n| labelLeading | Line spacing | number | 0 | |\n| labelLetterSpacing | Combo label letter spacing | number \\| string | - | |\n| labelLineHeight | Combo label line height | number \\| string | - | |\n| labelMaxLines | Combo label maximum lines | number | 1 | |\n| labelMaxWidth | Combo label maximum width, [options](#labelmaxwidth) | number \\| string | `200%` | |\n| labelOffsetX | Combo label X offset | number | 0 | |\n| labelOffsetY | Combo label Y offset | number | 0 | |\n| labelPadding | Combo label padding | number \\| number[] | 0 | |\n| labelPlacement | Combo label position relative to combo main graphic, [options](#labelplacement) | string | `bottom` | |\n| labelText | Combo label text content | string | - | |\n| labelTextAlign | Combo label text horizontal alignment | `start` \\| `center` \\| `middle` \\| `end` \\| `left` \\| `right` | `left` | |\n| labelTextBaseline | Combo label text baseline | `top` \\| `hanging` \\| `middle` \\| `alphabetic` \\| `ideographic` \\| `bottom` | - | |\n| labelTextDecorationColor | Combo label text decoration color | string | - | |\n| labelTextDecorationLine | Combo label text decoration line | string | - | |\n| labelTextDecorationStyle | Combo label text decoration style | `solid` \\| `double` \\| `dotted` \\| `dashed` \\| `wavy` | - | |\n| labelTextOverflow | Combo label text overflow handling | `clip` \\| `ellipsis` \\| string | - | |\n| labelTextPath | Combo label text path | Path | - | |\n| labelWordWrap | Whether combo label enables auto line wrapping. When labelWordWrap is enabled, parts exceeding labelMaxWidth automatically wrap | boolean | false | |\n| labelZIndex | Combo label rendering layer | number | 0 | |\n| `label{StyleProps}` | More label style configurations, refer to [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) property values. For example, labelOpacity represents label opacity | [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) | - | |\n\n#### LabelPlacement\n\nLabel position relative to combo main graphic, available values:\n\n- `center`: Label at combo center\n- `top`, `bottom`, `left`, `right`: Label at top, bottom, left, right of combo\n- `top-left`, `top-right`, `bottom-left`, `bottom-right`: Label at four corners of combo\n- `left-top`, `left-bottom`, `right-top`, `right-bottom`: Label at edge endpoints of combo\n\n#### LabelMaxWidth\n\nWhen auto line wrapping `labelWordWrap` is enabled, text wraps when exceeding this width:\n\n- string: Defines maximum width as percentage relative to combo element width. For example, `50%` means label width doesn't exceed half of combo width\n- number: Defines maximum width in pixels. For example, 100 means label maximum width is 100 pixels\n\nFor example, setting multi-line label text:\n\n```json\n{\n \"labelWordWrap\": true,\n \"labelMaxWidth\": 200,\n \"labelMaxLines\": 3\n}\n```\n\n### Label Background Style\n\nLabel background provides background decoration for label text, improving label readability and visual effects.\n\n#### Basic Background Style\n\nAdd simple background to label:\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 240,\n height: 100,\n autoFit: 'center',\n data: {\n nodes: [{ id: 'node1', combo: 'combo1' }],\n combos: [{ id: 'combo1' }],\n },\n combo: {\n style: {\n labelText: 'Important Combo',\n labelFill: '#fff', // White text\n labelBackground: true, // Enable background\n labelBackgroundFill: '#1783FF', // Blue background\n labelBackgroundPadding: [4, 8], // Padding: vertical 4px, horizontal 8px\n labelBackgroundRadius: 4, // Border radius\n },\n },\n});\n\ngraph.render();\n```\n\n#### Gradient Background Effect\n\nCreate label background with gradient effect:\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 240,\n height: 100,\n autoFit: 'center',\n data: {\n nodes: [{ id: 'node1', combo: 'combo1' }],\n combos: [{ id: 'combo1' }],\n },\n combo: {\n style: {\n labelText: 'VIP Combo',\n labelFill: '#fff',\n labelFontWeight: 'bold',\n labelBackground: true,\n labelBackgroundFill: 'linear-gradient(45deg, #FF6B6B, #4ECDC4)', // Gradient background\n labelBackgroundPadding: [6, 12],\n labelBackgroundRadius: 20, // Large border radius\n labelBackgroundShadowColor: 'rgba(0,0,0,0.2)',\n labelBackgroundShadowBlur: 4,\n labelBackgroundShadowOffsetY: 2,\n },\n },\n});\n\ngraph.render();\n```\n\n#### Stroke-only Background Style\n\nCreate label background with stroke only:\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 240,\n height: 100,\n autoFit: 'center',\n data: {\n nodes: [{ id: 'node1', combo: 'combo1' }],\n combos: [{ id: 'combo1' }],\n },\n combo: {\n style: {\n labelText: 'Border Label',\n labelFill: '#1783FF',\n labelBackground: true,\n labelBackgroundFill: 'transparent', // Transparent background\n labelBackgroundStroke: '#1783FF', // Blue stroke\n labelBackgroundLineWidth: 2, // Stroke width\n labelBackgroundPadding: [4, 8],\n labelBackgroundRadius: 8,\n },\n },\n});\n\ngraph.render();\n```\n\nHere are the complete label background style configurations:\n\n| Property | Description | Type | Default |\n| ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ | ------------ |\n| labelBackground | Whether to show combo label background | boolean | false |\n| labelBackgroundCursor | Combo label background cursor style, [options](#cursor) | string | `default` |\n| labelBackgroundFill | Combo label background fill color | string | #000 |\n| labelBackgroundFillOpacity | Combo label background opacity | number | 0.75 |\n| labelBackgroundHeight | Combo label background height | string \\| number | - |\n| labelBackgroundLineDash | Combo label background dash configuration | number \\| string \\|(number \\| string )[] | - |\n| labelBackgroundLineDashOffset | Combo label background dash offset | number | - |\n| labelBackgroundLineWidth | Combo label background stroke line width | number | - |\n| labelBackgroundPadding | Combo label background padding | number \\| number[] | [2, 4, 2, 4] |\n| labelBackgroundRadius | Combo label background border radius
- number: Set all four corner radius uniformly
- number[]: Set four corner radius separately, missing values auto-filled | number \\| number[] | 0 |\n| labelBackgroundShadowBlur | Combo label background shadow blur | number | - |\n| labelBackgroundShadowColor | Combo label background shadow color | string | - |\n| labelBackgroundShadowOffsetX | Combo label background shadow X offset | number | - |\n| labelBackgroundShadowOffsetY | Combo label background shadow Y offset | number | - |\n| labelBackgroundStroke | Combo label background stroke color | string | - |\n| labelBackgroundStrokeOpacity | Combo label background stroke opacity | number \\| string | 1 |\n| labelBackgroundVisibility | Whether combo label background is visible | `visible` \\| `hidden` | - |\n| labelBackgroundZIndex | Combo label background rendering layer | number | 1 |\n| `labelBackground{StyleProps}` | More label background style configurations, refer to [RectStyleProps](https://g.antv.antgroup.com/api/basic/rect) property values. For example, labelBackgroundOpacity represents label background opacity | [RectStyleProps](https://g.antv.antgroup.com/api/basic/rect) | - |\n\n### Badge Style\n\nBadges are small markers displayed on combos, usually used to show status, quantity, or other auxiliary information. Multiple badges can be displayed simultaneously with customizable positions.\n\n#### Single Badge\n\nAdd a simple badge to the combo:\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 100,\n autoFit: 'center',\n data: {\n nodes: [{ id: 'node1', combo: 'combo1' }],\n combos: [{ id: 'combo1' }],\n },\n combo: {\n style: {\n badges: [\n { text: 'NEW' }, // Display at top by default\n ],\n },\n },\n});\n\ngraph.render();\n```\n\n#### Multiple Badges\n\nAdd multiple badges at different positions to the combo:\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 100,\n autoFit: 'center',\n data: {\n nodes: [{ id: 'node1', combo: 'combo1' }],\n combos: [{ id: 'combo1' }],\n },\n combo: {\n style: {\n badge: true, // Whether to show badges\n badges: [\n { text: 'A', placement: 'right-top' },\n { text: 'Important', placement: 'right' },\n { text: 'Notice', placement: 'right-bottom' },\n ],\n badgePalette: ['#7E92B5', '#F4664A', '#FFBE3A'], // Badge background palette\n badgeFontSize: 7, // Badge font size\n },\n },\n});\n\ngraph.render();\n```\n\n#### Custom Badge Style\n\nFully customize badge appearance:\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 100,\n autoFit: 'center',\n data: {\n nodes: [{ id: 'node1', combo: 'combo1' }],\n combos: [{ id: 'combo1' }],\n },\n combo: {\n style: {\n badges: [\n {\n text: '99+',\n placement: 'right-top',\n backgroundFill: '#FF4D4F', // Red background\n fill: '#fff', // White text\n fontSize: 10,\n padding: [2, 6],\n backgroundRadius: 8,\n },\n ],\n },\n },\n});\n\ngraph.render();\n```\n\nHere are the complete badge style configurations:\n\n| Property | Description | Type | Default |\n| ------------ | ------------------------------ | ------------------------------------- | --------------------------------- |\n| badge | Whether to show combo badge | boolean | true |\n| badgePalette | Combo badge background palette | string[] | [`#7E92B5`, `#F4664A`, `#FFBE3A`] |\n| badges | Combo badge settings | [BadgeStyleProps](#badgestyleprops)[] | - |\n\n#### BadgeStyleProps\n\n| Property | Description | Type | Default |\n| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |\n| background | Whether to show combo badge background | boolean | true |\n| backgroundCursor | Combo badge background cursor style, [options](#cursor) | string | `default` |\n| backgroundFill | Combo badge background fill color. If not specified, consider badgePalette for sequential allocation | string | - |\n| backgroundFillOpacity | Combo badge background fill opacity | number | 1 |\n| backgroundFilter | Combo badge background filter | string | - |\n| backgroundHeight | Combo badge background height | number \\| string | - |\n| backgroundLineDash | Combo badge background dash configuration | number \\| string \\|(number \\| string )[] | - |\n| backgroundLineDashOffset | Combo badge background dash offset | number | - |\n| backgroundLineWidth | Combo badge background stroke line width | number | - |\n| backgroundRadius | Combo badge background border radius
- number: Set all four corner radius uniformly
- number[]: Set four corner radius separately, missing values will be filled
- string: Similar to [CSS padding](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) property, space-separated | number \\| number[] \\| string | 0 |\n| backgroundShadowBlur | Combo badge background shadow blur | number | - |\n| backgroundShadowColor | Combo badge background shadow color | string | - |\n| backgroundShadowOffsetX | Combo badge background shadow X offset | number | - |\n| backgroundShadowOffsetY | Combo badge background shadow Y offset | number | - |\n| backgroundStroke | Combo badge background stroke color | string | - |\n| backgroundStrokeOpacity | Combo badge background stroke opacity | number \\| string | 1 |\n| backgroundVisibility | Whether combo badge background is visible | `visible` \\| `hidden` | - |\n| fill | Combo badge text color | string | - |\n| fontFamily | Combo badge font family | string | - |\n| fontSize | Combo badge font size | number | 8 |\n| fontStyle | Combo badge font style | `normal` \\| `italic` \\| `oblique` | `normal` |\n| fontVariant | Combo badge font variant | `normal` \\| `small-caps` \\| string | `normal` |\n| fontWeight | Combo badge font weight | number \\| string | `normal` |\n| lineHeight | Combo badge line height | string \\| number | - |\n| lineWidth | Combo badge line width | string \\| number | - |\n| maxLines | Combo badge text maximum lines | number | 1 |\n| offsetX | Combo badge X offset | number | 0 |\n| offsetY | Combo badge Y offset | number | 0 |\n| padding | Combo badge padding | number \\| number[] | 0 |\n| placement | Combo badge position relative to combo main graphic. If not specified, defaults to clockwise placement starting from top-right | `left` \\| `right` \\| `top` \\| `bottom` \\| `left-top` \\| `left-bottom` \\| `right-top` \\| `right-bottom` \\| `top-left` \\| `top-right` \\| `bottom-left` \\| `bottom-right` | - |\n| text | Combo badge text content | string | - |\n| textAlign | Combo badge text horizontal alignment | `start` \\| `center` \\| `middle` \\| `end` \\| `left` \\| `right` | `left` |\n| textBaseline | Combo badge text baseline | `top` \\| `hanging` \\| `middle` \\| `alphabetic` \\| `ideographic` \\| `bottom` | `alphabetic` |\n| textDecorationColor | Combo badge text decoration color | string | - |\n| textDecorationLine | Combo badge text decoration line | string | - |\n| textDecorationStyle | Combo badge text decoration style | `solid` \\| `double` \\| `dotted` \\| `dashed` \\| `wavy` | `solid` |\n| textOverflow | Combo badge text overflow handling | `clip` \\| `ellipsis` \\| string | `clip` |\n| visibility | Whether combo badge is visible | `visible` \\| `hidden` | - |\n| wordWrap | Whether combo badge text auto-wraps | boolean | - |\n| zIndex | Combo badge rendering layer | number | 3 |\n\n### Halo Style\n\nHalo effect is used to highlight combos, usually used in mouse hover, selected, or active states, adding glow effect around combos.\n\n#### Basic Halo Effect\n\nAdd simple halo effect to combo:\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 240,\n height: 100,\n autoFit: 'center',\n data: {\n nodes: [{ id: 'node1', combo: 'combo1' }],\n combos: [{ id: 'combo1' }],\n },\n combo: {\n style: {\n halo: true, // Enable halo\n haloStroke: '#1783FF', // Blue halo\n haloLineWidth: 8, // Halo width\n haloStrokeOpacity: 0.3, // Halo opacity\n },\n },\n});\n\ngraph.render();\n```\n\n#### Colorful Halo Effect\n\nCreate colorful gradient halo effect:\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 240,\n height: 100,\n autoFit: 'center',\n data: {\n nodes: [{ id: 'node1', combo: 'combo1' }],\n combos: [{ id: 'combo1' }],\n },\n combo: {\n style: {\n halo: true,\n haloStroke: '#FF4D4F', // Red halo\n haloLineWidth: 12, // Thicker halo\n haloStrokeOpacity: 0.5,\n haloFilter: 'blur(2px)', // Blur filter effect\n },\n },\n});\n\ngraph.render();\n```\n\n#### Dynamic Halo Effect\n\nUse halo effect in state transitions:\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 240,\n height: 100,\n autoFit: 'center',\n data: {\n nodes: [{ id: 'node1', combo: 'combo1' }],\n combos: [{ id: 'combo1' }],\n },\n combo: {\n style: {\n // No halo in default state\n halo: false,\n },\n state: {\n // Show orange halo in hover state\n hover: {\n halo: true,\n haloStroke: '#FF7A00',\n haloLineWidth: 10,\n haloStrokeOpacity: 0.4,\n },\n // Show green halo in selected state\n selected: {\n halo: true,\n haloStroke: '#52C41A',\n haloLineWidth: 6,\n haloStrokeOpacity: 0.6,\n },\n },\n },\n});\n\ngraph.render();\n```\n\nHere are the complete halo style configurations:\n\n| Property | Description | Type | Default | Required |\n| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | ------------------------------- | -------- |\n| halo | Whether to show combo halo | boolean | false | |\n| haloCursor | Combo halo cursor style, [options](#cursor) | string | `default` | |\n| haloDraggable | Whether combo halo allows dragging | boolean | true | |\n| haloDroppable | Whether combo halo allows receiving dragged elements | boolean | false | |\n| haloFill | Halo fill color | string | Same as main graphic fill color | |\n| haloFillRule | Combo halo fill rule | `nonzero` \\| `evenodd` | - | |\n| haloFilter | Combo halo filter effect, such as 'blur(2px)' for blur effect | string | - | |\n| haloLineWidth | Combo halo stroke width, controls halo thickness | number | 12 | |\n| haloPointerEvents | Whether combo halo effect responds to pointer events, [options](#pointerevents) | string | `none` | |\n| haloStroke | Combo halo stroke color, **this property is used to set the color of halo around combo, helping to highlight the combo** | string | `#99add1` | |\n| haloStrokeOpacity | Combo halo stroke opacity, recommended to use 0.2-0.6 values for natural halo effect | number | 0.25 | |\n| haloVisibility | Combo halo visibility | `visible` \\| `hidden` | `visible` | |\n| haloZIndex | Combo halo rendering layer, usually set to negative value to ensure halo is below combo main graphic | number | -1 | |\n| `halo{StyleProps}` | More halo style configurations, refer to [DisplayObject](https://g.antv.antgroup.com/api/basic/display-object) options. For example, haloFillOpacity represents halo fill opacity | [DisplayObject](https://g.antv.antgroup.com/api/basic/display-object) | - | |\n\n**Halo Usage Recommendations:**\n\n1. **Performance Consideration**: Halo effects increase rendering burden, recommend enabling only when necessary\n2. **Color Matching**: Halo color should coordinate with combo main color tone, avoid being too abrupt\n3. **Opacity Setting**: Reasonable opacity (0.2-0.6) can create natural halo effect\n4. **State Application**: Halo is usually used for hover, selected, active and other interactive states\n\n### Icon Style\n\nIcons are used to display text or image content in combos, usually located at the center of the combo, can be used to represent combo type or function.\n\n#### Text Icon\n\nUse text as combo icon:\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 240,\n height: 100,\n autoFit: 'center',\n data: {\n combos: [{ id: 'combo1' }],\n },\n combo: {\n style: {\n iconText: 'A', // Display letter A\n iconFill: '#1783FF', // Blue text\n iconFontSize: 24, // Large font\n iconFontWeight: 'bold', // Bold\n },\n },\n});\n\ngraph.render();\n```\n\n#### Image Icon\n\nUse image as combo icon:\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 240,\n height: 100,\n autoFit: 'center',\n data: {\n combos: [{ id: 'combo1' }],\n },\n combo: {\n style: {\n fill: '#1890FF',\n iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',\n iconWidth: 32,\n iconHeight: 32,\n },\n },\n});\n\ngraph.render();\n```\n\n#### Colorful Text Icon\n\nCreate text icon with special styles:\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 240,\n height: 100,\n autoFit: 'center',\n data: {\n combos: [{ id: 'combo1' }],\n },\n combo: {\n style: {\n iconText: 'Dept',\n iconFill: '#FF4D4F', // Red text\n iconFontSize: 16,\n iconFontWeight: 'bold',\n iconFontStyle: 'italic', // Italic\n iconTextDecorationLine: 'underline', // Underline\n iconLetterSpacing: 1, // Letter spacing\n },\n },\n});\n\ngraph.render();\n```\n\nHere are the complete icon style configurations:\n\n| Property | Description | Type | Default |\n| ----------------------- | ------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | --------------------------- |\n| icon | Whether to show combo icon | boolean | true |\n| iconCursor | Combo icon cursor style, [options](#cursor) | string | `default` |\n| iconFill | Combo icon text color | string | - |\n| iconFillOpacity | Combo icon text color opacity | number | 1 |\n| iconFontFamily | Combo icon font family | string | - |\n| iconFontSize | Combo icon font size | number | 16 |\n| iconFontStyle | Combo icon font style | `normal` \\| `italic` \\| `oblique` | `normal` |\n| iconFontVariant | Combo icon font variant | `normal` \\| `small-caps` \\| string | `normal` |\n| iconFontWeight | Combo icon font weight | number \\| string | `normal` |\n| iconHeight | Combo icon height, used to control image size when using image icon | number | Half of main graphic height |\n| iconLetterSpacing | Combo icon text letter spacing | number \\| string | - |\n| iconLineHeight | Combo icon text line height | number \\| string | - |\n| iconMaxLines | Combo icon text maximum lines | number | 1 |\n| iconOffsetX | Combo icon X offset | number | 0 |\n| iconOffsetY | Combo icon Y offset | number | 0 |\n| iconOpacity | Combo icon opacity | number | 1 |\n| iconRadius | Combo icon border radius (only effective for rectangular icons) | number | 0 |\n| iconSrc | Combo image source. Has higher priority than iconText, supports local and network images | string | - |\n| iconText | Combo icon text content, supports text, Unicode characters, etc. | string | - |\n| iconTextAlign | Combo icon text horizontal alignment | `start` \\| `center` \\| `middle` \\| `end` \\| `left` \\| `right` | `center` |\n| iconTextBaseline | Combo icon text baseline | `top` \\| `hanging` \\| `middle` \\| `alphabetic` \\| `ideographic` \\| `bottom` | `middle` |\n| iconTextDecorationColor | Combo icon text decoration color | string | - |\n| iconTextDecorationLine | Combo icon text decoration line, such as underline, strikethrough, etc. | string | - |\n| iconTextDecorationStyle | Combo icon text decoration style | `solid` \\| `double` \\| `dotted` \\| `dashed` \\| `wavy` | `solid` |\n| iconTextOverflow | Combo icon text overflow handling | `clip` \\| `ellipsis` \\| string | `clip` |\n| iconVisibility | Whether combo icon is visible | `visible` \\| `hidden` | `visible` |\n| iconWidth | Combo icon width, used to control image size when using image icon | number | Half of main graphic width |\n| iconWordWrap | Whether combo icon text auto-wraps | boolean | false |\n| iconZIndex | Combo icon rendering layer | number | 1 |\n| `icon{StyleProps}` | More icon style configurations, refer to specific icon type options. For example, iconStroke represents icon stroke color | - | - |\n\n**Icon Usage Recommendations:**\n\n1. **Priority**: `iconSrc` (image) has higher priority than `iconText` (text), if both are set, image will be displayed first\n2. **Size Control**: Recommend setting icon size reasonably according to combo size, avoid icons being too large or small affecting visual effect\n3. **Performance Optimization**: Text icons have better performance, image icons require additional network requests and rendering overhead\n4. **Style Consistency**: Icon styles in the same graph should be consistent to improve overall visual effect\n5. **Accessibility**: Ensure icon color has sufficient contrast with background for easy user identification\n\n## State\n\nIn some interactive behaviors, such as clicking to select a combo or hovering to activate an edge, it is merely marking certain states on the element. To reflect these states in the visual space seen by the end user, we need to set different graphic element styles for different states to respond to changes in the element's state.\n\nG6 provides several built-in states, including selected, highlight, active, inactive, and disabled. In addition, it also supports custom states to meet more specific needs. For each state, developers can define a set of style rules that will override the default styles of the element.\n\n
![](\"https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Iv_dS5XR2TcAAAAAAAAAAAAADmJ7AQ/original\")
\n\nThe data structure is as follows:\n\n```typescript\ntype ComboState = {\n [state: string]: ComboStyle;\n};\n```\n\nFor example, when the combo is in the `focus` state, you can add a stroke with a width of 3 and a color of orange.\n\n```js {4-7}\nconst graph = new Graph({\n combo: {\n state: {\n focus: {\n lineWidth: 3, // Stroke width\n stroke: 'orange', // Stroke color\n },\n },\n },\n});\n```\n\nThe effect is as follows:\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 100,\n autoFit: 'center',\n data: {\n nodes: [{ id: 'node1', combo: 'combo1' }],\n combos: [{ id: 'combo1', states: ['focus'] }],\n },\n combo: {\n state: {\n focus: {\n lineWidth: 3,\n stroke: 'orange',\n fill: 'orange',\n fillOpacity: 0.2,\n },\n },\n },\n});\n\ngraph.render();\n```\n\n**⚠️ Dynamic Configuration**: State configuration also supports dynamic configuration, which can be used to set styles dynamically based on combo data:\n\n```js\nconst graph = new Graph({\n combo: {\n state: {\n // Static configuration\n selected: {\n stroke: '#1783FF',\n lineWidth: 2,\n },\n\n // Dynamic configuration - arrow function form\n hover: (datum) => ({\n fill: datum.data.isVIP ? '#FFD700' : '#1783FF',\n fillOpacity: 0.3,\n }),\n\n // Dynamic configuration - regular function form (access to graph instance)\n active: function (datum) {\n console.log(this); // graph instance\n return {\n stroke: datum.data.level > 3 ? '#FF4D4F' : '#52C41A',\n lineWidth: 3,\n };\n },\n },\n },\n});\n```\n\n**⚠️ State Priority**: When a combo has multiple states simultaneously, the style merge follows the following priority (high to low):\n\n1. Later defined states override earlier defined states\n2. More specific selectors have higher priority\n3. Dynamic configuration has higher priority than static configuration\n\nFor example, if a combo has both `selected` and `hover` states, and `hover` is defined after `selected`, then `hover` state styles will override `selected` state styles.\n\n## Animation\n\nDefines the animation effects for combos, supporting the following two configuration methods:\n\n1. Disable all combo animations\n\n```json\n{\n \"combo\": {\n \"animation\": false\n }\n}\n```\n\n2. Configure stage animations\n\nStage animations refer to animation effects when combos enter the canvas, update, or leave the canvas. Currently supported stages include:\n\n- `enter`: Animation when combo enters the canvas\n- `update`: Animation when combo updates\n- `exit`: Animation when combo leaves the canvas\n- `show`: Animation when combo shows from hidden state\n- `hide`: Animation when combo hides\n- `collapse`: Animation when combo collapses\n- `expand`: Animation when combo expands\n\nYou can refer to [Animation Paradigm](/en/manual/animation/animation#animation-paradigm) to use animation syntax to configure combos, such as:\n\n#### Enter Animation\n\nConfigure animation when combo enters the canvas:\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 100,\n autoFit: 'center',\n data: {\n nodes: [{ id: 'node1', combo: 'combo1' }],\n combos: [{ id: 'combo1' }],\n },\n combo: {\n animation: {\n enter: [\n {\n fields: ['opacity'], // Animate opacity property\n from: 0, // Start from 0\n to: 1, // End at 1\n duration: 1000, // Animation duration\n easing: 'ease-out', // Easing function\n },\n ],\n },\n },\n});\n\ngraph.render();\n```\n\n#### Update Animation\n\nConfigure animation when combo updates:\n\n```js\nconst graph = new Graph({\n combo: {\n animation: {\n update: [\n {\n fields: ['x', 'y'], // Only animate x and y properties during update\n duration: 1000, // Animation duration\n easing: 'linear', // Easing function\n },\n ],\n },\n },\n});\n```\n\n#### Exit Animation\n\nConfigure animation when combo leaves the canvas:\n\n```js\nconst graph = new Graph({\n combo: {\n animation: {\n exit: [\n {\n fields: ['opacity'], // Animate opacity property\n to: 0, // End at 0\n duration: 500, // Animation duration\n easing: 'ease-in', // Easing function\n },\n ],\n },\n },\n});\n```\n\n#### Show/Hide Animation\n\nConfigure animation when combo shows/hides:\n\n```js\nconst graph = new Graph({\n combo: {\n animation: {\n show: [\n {\n fields: ['opacity'],\n from: 0,\n to: 1,\n duration: 300,\n },\n ],\n hide: [\n {\n fields: ['opacity'],\n to: 0,\n duration: 300,\n },\n ],\n },\n },\n});\n```\n\nYou can also use built-in animation effects:\n\n```json\n{\n \"combo\": {\n \"animation\": {\n \"enter\": \"fade\", // Use fade animation\n \"update\": \"translate\", // Use translate animation\n \"exit\": \"fade\" // Use fade animation\n }\n }\n}\n```\n\nYou can pass `false` to disable specific stage animations:\n\n```json\n{\n \"combo\": {\n \"animation\": {\n \"enter\": false // Disable combo enter animation\n }\n }\n}\n```\n\n**Animation Configuration Options:**\n\n| Property | Description | Type | Default |\n| --------- | --------------------------------------- | ----------------------------------------------------------- | -------- |\n| fields | Properties to animate | string[] | - |\n| from | Starting value | number \\| string | - |\n| to | Ending value | number \\| string | - |\n| duration | Animation duration (milliseconds) | number | 1000 |\n| easing | Easing function | string | 'ease' |\n| delay | Animation delay (milliseconds) | number | 0 |\n| repeat | Number of repetitions (-1 for infinite) | number | 0 |\n| direction | Animation direction | 'normal' \\| 'reverse' \\| 'alternate' \\| 'alternate-reverse' | 'normal' |\n\n## Palette\n\nDefines combo color palette, i.e., predefined combo color pool, and allocates according to rules, mapping colors to the `fill` property.\n\n> For palette definition, please refer to [Palette](/en/manual/theme/palette).\n\n| Property | Description | Type | Default |\n| -------- | -------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ------- |\n| type | Specifies current palette type. - `group`: Discrete palette
- `value`: Continuous palette | `group` | `value` | `group` |\n| field | Specifies grouping field in element data. If not specified, defaults to id as grouping field | string | ((datum) => string) | `id` |\n| color | Palette colors. If palette is registered, you can directly specify its registration name, also accepts a color array | string | string[] | - |\n| invert | Whether to invert the palette | boolean | false |\n\nFor example, assign combo colors to a group of data by `category` field, so that combos of the same category have the same color:\n\n```json\n{\n \"combo\": {\n \"palette\": {\n \"type\": \"group\",\n \"field\": \"category\",\n \"color\": [\"#1783FF\", \"#F08F56\", \"#D580FF\", \"#00C9C9\", \"#7863FF\"]\n }\n }\n}\n```\n\nThe effect is as follows:\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 600,\n height: 100,\n data: {\n combos: new Array(8)\n .fill(0)\n .map((_, i) => ({ id: `combo-${i}`, data: { category: ['A', 'B', 'C', 'D', 'E'][i % 5] } })),\n },\n layout: { type: 'grid', cols: 8 },\n combo: {\n style: { fillOpacity: 0.4 },\n palette: {\n type: 'group',\n field: 'category',\n color: ['#1783FF', '#F08F56', '#D580FF', '#00C9C9', '#7863FF'],\n },\n },\n});\n\ngraph.render();\n```\n\nYou can also use default configuration:\n\n```json\n{\n \"combo\": {\n \"palette\": \"tableau\" // tableau is palette name, defaults to assign colors by ID\n }\n}\n```\n\nThe effect is as follows:\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 600,\n height: 100,\n data: {\n combos: new Array(8)\n .fill(0)\n .map((_, i) => ({ id: `combo-${i}`, data: { category: ['A', 'B', 'C', 'D', 'E'][i % 5] } })),\n },\n layout: { type: 'grid', cols: 8 },\n combo: {\n style: { fillOpacity: 0.4 },\n palette: 'tableau',\n },\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/element/combo/BaseCombo.zh.md":"---\ntitle: 组合通用配置项\norder: 1\n---\n\n本文介绍内置组合通用属性配置。\n\n## ComboOptions\n\n```js {5-9}\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n combo: {\n type: 'circle', // 组合类型\n style: {}, // 组合样式\n state: {}, // 状态样式\n palette: {}, // 色板配置\n animation: {}, // 动画配置\n },\n});\n```\n\n| 属性 | 描述 | 类型 | 默认值 | 必选 |\n| --------- | -------------------------------------------- | ----------------------- | -------- | ---- |\n| type | 组合类型，内置组合类型名称或自定义组合的名称 | [Type](#type) | `circle` | |\n| style | 组合样式配置，包括颜色、大小等 | [Style](#style) | - | |\n| state | 不同状态下的样式配置 | [State](#state) | - | |\n| palette | 定义组合的色板，用于根据不同数据映射颜色 | [Palette](#palette) | - | |\n| animation | 定义组合的动画效果 | [Animation](#animation) | - | |\n\n## Type\n\n指定组合类型，内置组合类型名称或自定义组合的名称。默认为 `circle`(圆形)。**⚠️ 注意**：这里决定了主图形的形状。\n\n```js {3}\nconst graph = new Graph({\n combo: {\n type: 'circle',\n },\n});\n```\n\n**⚠️ 动态配置说明**：`type` 属性同样支持动态配置，可以根据组合数据动态选择组合类型：\n\n```js\nconst graph = new Graph({\n combo: {\n // 静态配置\n type: 'circle',\n\n // 动态配置 - 箭头函数形式\n type: (datum) => datum.data.comboType || 'circle',\n\n // 动态配置 - 普通函数形式（可访问 graph 实例）\n type: function (datum) {\n console.log(this); // graph 实例\n return datum.data.category === 'important' ? 'rect' : 'circle';\n },\n },\n});\n```\n\n可选值有：\n\n- `circle`：[圆形组合](/manual/element/combo/circle)\n- `rect`：[矩形组合](/manual/element/combo/rect)\n\n## Style\n\n定义组合的样式，包括颜色、大小等。\n\n```js {3}\nconst graph = new Graph({\n combo: {\n style: {},\n },\n});\n```\n\n**⚠️ 动态配置说明**：以下所有样式属性都支持动态配置，即可以传入函数来根据组合数据动态计算属性值：\n\n```js\nconst graph = new Graph({\n combo: {\n style: {\n // 静态配置\n fill: '#1783FF',\n\n // 动态配置 - 箭头函数形式\n stroke: (datum) => (datum.data.isActive ? '#FF0000' : '#000000'),\n\n // 动态配置 - 普通函数形式（可访问 graph 实例）\n lineWidth: function (datum) {\n console.log(this); // graph 实例\n return datum.data.importance > 5 ? 3 : 1;\n },\n\n // 嵌套属性也支持动态配置\n labelText: (datum) => `组合: ${datum.id}`,\n badges: (datum) => datum.data.tags.map((tag) => ({ text: tag })),\n },\n },\n});\n```\n\n其中 `datum` 参数为组合数据对象 (`ComboData`)，包含组合的所有数据信息。\n\n一个完整的组合由以下几部分构成：\n\n
\n\n- `key` ：组合的主图形，表示组合的主要形状，例如圆形、矩形等；\n- `label` ：文本标签，通常用于展示组合的名称或描述；\n- `halo` ：主图形周围展示的光晕效果的图形；\n- `badge` ：默认位于组合右上角的徽标；\n\n以下样式配置将按原子图形依次说明：\n\n### 主图形样式\n\n主图形是组合的核心部分，定义了组合的基本形状和外观。以下是常见的配置场景：\n\n#### 基础样式配置\n\n设置组合的基本外观：\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 100,\n autoFit: 'center',\n data: {\n nodes: [{ id: 'node1', combo: 'combo1' }],\n combos: [{ id: 'combo1' }],\n },\n combo: {\n style: {\n fill: '#5B8FF9', // 蓝色填充\n stroke: '#1A1A1A', // 深色描边\n lineWidth: 2,\n fillOpacity: 0.2,\n },\n },\n});\n\ngraph.render();\n```\n\n#### 透明度和阴影效果\n\n为组合添加透明度和阴影效果：\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 100,\n autoFit: 'center',\n data: {\n nodes: [{ id: 'node1', combo: 'combo1' }],\n combos: [{ id: 'combo1' }],\n },\n combo: {\n style: {\n fill: '#61DDAA',\n fillOpacity: 0.15,\n shadowColor: 'rgba(97, 221, 170, 0.4)',\n shadowBlur: 12,\n shadowOffsetX: 2,\n shadowOffsetY: 4,\n stroke: '#F0F0F0',\n lineWidth: 1,\n },\n },\n});\n\ngraph.render();\n```\n\n#### 虚线边框样式\n\n创建带虚线边框的组合：\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 100,\n autoFit: 'center',\n data: {\n nodes: [{ id: 'node1', combo: 'combo1' }],\n combos: [{ id: 'combo1' }],\n },\n combo: {\n style: {\n fill: '#FFF1F0',\n fillOpacity: 0.1,\n stroke: '#F5222D',\n lineWidth: 2,\n lineDash: [6, 4],\n lineCap: 'round',\n },\n },\n});\n\ngraph.render();\n```\n\n以下为完整的主图形样式配置：\n\n| 属性 | 描述 | 类型 | 默认值 | 必选 |\n| ------------------------------- | ----------------------------------------------------------------------------------------- | ----------------------------- | --------- | ---- |\n| collapsed | 当前组合是否折叠 | boolean | false | |\n| cursor | 组合鼠标移入样式，[配置项](#cursor) | string | default | |\n| fill | 组合填充色 | string | `#99ADD1` | |\n| fillOpacity | 组合填充色透明度 | number \\| string | 0.04 | |\n| increasedLineWidthForHitTesting | 当 lineWidth 较小时，可交互区域也随之变小，有时我们想增大这个区域，让\"细线\"更容易被拾取到 | number | 0 | |\n| lineCap | 组合描边端点样式 | `round` \\| `square` \\| `butt` | `butt` | |\n| lineDash | 组合描边虚线样式 | number[] | - | |\n| lineDashOffset | 组合描边虚线偏移量 | number | - | |\n| lineJoin | 组合描边连接处样式 | `round` \\| `bevel` \\| `miter` | `miter` | |\n| lineWidth | 组合描边宽度 | number | 1 | |\n| opacity | 组合透明度 | number \\| string | 1 | |\n| pointerEvents | 组合如何响应指针事件，[配置项](#pointerevents) | string | `auto` | |\n| shadowBlur | 组合阴影模糊度 | number | - | |\n| shadowColor | 组合阴影颜色 | string | - | |\n| shadowOffsetX | 组合阴影在 x 轴方向上的偏移量 | number \\| string | - | |\n| shadowOffsetY | 组合阴影在 y 轴方向上的偏移量 | number \\| string | - | |\n| shadowType | 组合阴影类型 | `inner` \\| `outer` | `outer` | |\n| size | 组合大小，快捷设置组合宽高，[配置项](#size) | number \\| number[] | - | |\n| stroke | 组合描边色 | string | `#99ADD1` | |\n| strokeOpacity | 组合描边色透明度 | number \\| string | 1 | |\n| transform | transform 属性允许你旋转、缩放、倾斜或平移给定组合 | string | - | |\n| transformOrigin | 旋转与缩放中心，也称作变换中心 | string | - | |\n| visibility | 组合是否可见 | `visible` \\| `hidden` | `visible` | |\n| x | 组合 x 坐标 | number | 0 | |\n| y | 组合 y 坐标 | number | 0 | |\n| z | 组合 z 坐标 | number | 0 | |\n| zIndex | 组合渲染层级 | number | 0 | |\n\n#### Size\n\n组合大小，快捷设置组合宽高，支持三种配置方式：\n\n- number：表示组合宽高相同为指定值\n- [number, number]：表示组合宽高分别为数组元素依次表示组合的宽度、高度\n- [number, number, number]：表示组合宽高分别为数组元素依次表示组合的宽度、高度以及深度\n\n#### PointerEvents\n\n`pointerEvents` 属性控制图形如何响应交互事件，可参考 [MDN 文档](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events)。\n\n可选值有：`visible` | `visiblepainted` | `visiblestroke` | `non-transparent-pixel` | `visiblefill` | `visible` | `painted` | `fill` | `stroke` | `all` | `none` | `auto` | `inherit` | `initial` | `unset`\n\n简而言之，`fill`、`stroke` 和 `visibility` 都可以独立或组合影响拾取判定行为。目前支持以下关键词：\n\n- **`auto`**：默认值，等同于 `visiblepainted`\n- **`none`**：永远不会成为响应事件的目标\n- **`visiblepainted`**：满足以下条件才会响应事件：\n - `visibility` 设置为 `visible`，即图形为可见的\n - 在图形填充区域触发同时 `fill` 取非 `none` 的值；或者在图形描边区域触发同时 `stroke` 取非 `none` 的值\n- **`visiblefill`**：满足以下条件才会响应事件：\n - `visibility` 设置为 `visible`，即图形为可见的\n - 在图形填充区域触发，不受 `fill` 取值的影响\n- **`visiblestroke`**：满足以下条件才会响应事件：\n - `visibility` 设置为 `visible`，即图形为可见的\n - 在图形描边区域触发，不受 `stroke` 取值的影响\n- **`visible`**：满足以下条件才会响应事件：\n - `visibility` 设置为 `visible`，即图形为可见的\n - 在图形填充或者描边区域触发，不受 `fill` 和 `stroke` 取值的影响\n- **`painted`**：满足以下条件才会响应事件：\n - 在图形填充区域触发同时 `fill` 取非 `none` 的值；或者在图形描边区域触发同时 `stroke` 取非 `none` 的值\n - 不受 `visibility` 取值的影响\n- **`fill`**：满足以下条件才会响应事件：\n - 在图形填充区域触发，不受 `fill` 取值的影响\n - 不受 `visibility` 取值的影响\n- **`stroke`**：满足以下条件才会响应事件：\n - 在图形描边区域触发，不受 `stroke` 取值的影响\n - 不受 `visibility` 取值的影响\n- **`all`**：只要进入图形的填充和描边区域就会响应事件，不会受 `fill`、`stroke`、`visibility` 的取值影响\n\n**使用示例：**\n\n```js\n// 示例1：只有描边区域响应事件\nconst graph = new Graph({\n combo: {\n style: {\n fill: 'none',\n stroke: '#000',\n lineWidth: 2,\n pointerEvents: 'stroke', // 只有描边响应事件\n },\n },\n});\n\n// 示例2：完全不响应事件\nconst graph = new Graph({\n combo: {\n style: {\n pointerEvents: 'none', // 组合不响应任何事件\n },\n },\n});\n```\n\n#### Cursor\n\n可选值有：`auto` | `default` | `none` | `context-menu` | `help` | `pointer` | `progress` | `wait` | `cell` | `crosshair` | `text` | `vertical-text` | `alias` | `copy` | `move` | `no-drop` | `not-allowed` | `grab` | `grabbing` | `all-scroll` | `col-resize` | `row-resize` | `n-resize` | `e-resize` | `s-resize` | `w-resize` | `ne-resize` | `nw-resize` | `se-resize` | `sw-resize` | `ew-resize` | `ns-resize` | `nesw-resize` | `nwse-resize` | `zoom-in` | `zoom-out`\n\n### 收起时样式\n\n当组合处于收起状态时（`collapsed` 为 `true`），可以为其配置特殊的样式。收起时的样式属性以 `collapsed` 为前缀。\n\n#### 基础收起样式\n\n为收起状态的组合设置不同的外观：\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 100,\n autoFit: 'center',\n data: {\n nodes: [\n { id: 'node1', combo: 'combo1' },\n { id: 'node2', combo: 'combo1' },\n ],\n combos: [{ id: 'combo1', style: { collapsed: true } }],\n },\n combo: {\n style: {\n collapsedFill: '#1783FF',\n collapsedStroke: '#000',\n collapsedLineWidth: 2,\n collapsedSize: 40,\n collapsedMarkerFill: '#fff',\n collapsedMarkerFontSize: 12,\n },\n },\n});\n\ngraph.render();\n```\n\n以下为收起时样式的完整配置：\n\n| 属性 | 描述 | 类型 | 默认值 | 必选 |\n| ---------------------------------------- | ----------------------------------------------------------------------------------------------------- | ----------------------------- | ---------------------------------- | ---- |\n| collapsedCursor | 组合收起时的鼠标移入样式，[配置项](#cursor) | string | 默认与展开时的 cursor 一致 | |\n| collapsedFill | 组合收起时的填充色 | string | 默认与展开时的 fill 一致 | |\n| collapsedFillOpacity | 组合收起时的填充色透明度 | number \\| string | 1 | |\n| collapsedIncreasedLineWidthForHitTesting | 组合收起时，当 lineWidth 较小时，可交互区域也随之变小，有时我们想增大这个区域，让\"细线\"更容易被拾取到 | number | 0 | |\n| collapsedLineCap | 组合收起时的描边端点样式 | `round` \\| `square` \\| `butt` | 默认与展开时的 lineCap 一致 | |\n| collapsedLineDash | 组合收起时的描边虚线样式 | number[] | 默认与展开时的 lineDash 一致 | |\n| collapsedLineDashOffset | 组合收起时的描边虚线偏移量 | number | 默认与展开时的 lineDashOffset 一致 | |\n| collapsedLineJoin | 组合收起时的描边连接处样式 | `round` \\| `bevel` \\| `miter` | 默认与展开时的 lineJoin 一致 | |\n| collapsedLineWidth | 组合收起时的描边宽度 | number | 默认与展开时的 lineWidth 一致 | |\n| collapsedMarker | 组合收起时是否显示标记，[配置项](#收起时标记样式) | boolean | true | |\n| collapsedOpacity | 组合收起时的透明度 | number \\| string | 默认与展开时的 opacity 一致 | |\n| collapsedShadowBlur | 组合收起时的阴影模糊度 | number | 默认与展开时的 shadowBlur 一致 | |\n| collapsedShadowColor | 组合收起时的阴影颜色 | string | 默认与展开时的 shadowColor 一致 | |\n| collapsedShadowOffsetX | 组合收起时的阴影在 x 轴方向上的偏移量 | number \\| string | 默认与展开时的 shadowOffsetX 一致 | |\n| collapsedShadowOffsetY | 组合收起时的阴影在 y 轴方向上的偏移量 | number \\| string | 默认与展开时的 shadowOffsetY 一致 | |\n| collapsedShadowType | 组合收起时的阴影类型 | `inner` \\| `outer` | 默认与展开时的 shadowType 一致 | |\n| collapsedSize | 组合收起时的大小 | number \\| [number, number] | 32 | |\n| collapsedStroke | 组合收起时的描边色 | string | 默认与展开时的 stroke 一致 | |\n| collapsedStrokeOpacity | 组合收起时的描边色透明度 | number \\| string | 默认与展开时的 strokeOpacity 一致 | |\n| collapsedVisibility | 组合收起时是否可见 | `visible` \\| `hidden` | 默认与展开时的 visibility 一致 | |\n\n### 收起时标记样式\n\n当 `collapsedMarker` 为 `true` 时显示的标记，用于显示收起组合内包含的元素数量。\n\n#### 自定义标记内容\n\n可以自定义收起标记显示的内容：\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 100,\n autoFit: 'center',\n data: {\n nodes: [\n { id: 'node1', combo: 'combo1' },\n { id: 'node2', combo: 'combo1' },\n { id: 'node3', combo: 'combo1' },\n ],\n combos: [{ id: 'combo1', style: { collapsed: true } }],\n },\n combo: {\n style: {\n collapsedMarkerType: 'child-count',\n collapsedMarkerFill: '#1783FF',\n collapsedMarkerFontSize: 14,\n collapsedMarkerFontWeight: 'bold',\n },\n },\n});\n\ngraph.render();\n```\n\n以下为收起时标记样式的完整配置：\n\n| 属性 | 描述 | 类型 | 默认值 | 必选 |\n| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | ------------- | ---- |\n| collapsedMarkerType | 组合收起时显示的标记类型 - `'child-count'`: 子元素数量（包括 Node 和 Combo）
- `'descendant-count'`: 后代元素数量（包括 Node 和 Combo）
- `'node-count'`: 后代元素数量（只包括 Node）
- `(children: NodeLikeData[]) => string`: 自定义处理逻辑 | `child-count` \\| `descendant-count` \\| `node-count` \\| ((children: NodeData \\| ComboData[]) => string) | `child-count` | |\n| collapsedMarkerFill | 标记文字颜色 | string | #fff | |\n| collapsedMarkerFillOpacity | 标记文字颜色透明度 | number | 1 | |\n| collapsedMarkerFontSize | 标记字体大小 | number | 12 | |\n| collapsedMarkerFontWeight | 标记字体粗细 | number \\| string | `normal` | |\n| collapsedMarkerRadius | 标记圆角半径 | number | 0 | |\n| collapsedMarkerSrc | 图片来源。其优先级高于 `collapsedMarkerText` | string | - | |\n| collapsedMarkerText | 标记文字 | string | - | |\n| collapsedMarkerTextAlign | 标记文字水平对齐方式 | `center` \\| `end` \\| `left` \\| `right` \\| `start` | `center` | |\n| collapsedMarkerTextBaseline | 标记文字对齐基线 | `alphabetic` \\| `bottom` \\| `hanging` \\| `ideographic` \\| `middle` \\| `top` | `middle` | |\n| collapsedMarkerWidth | 标记宽度 | number | - | |\n| collapsedMarkerHeight | 标记高度 | number | - | |\n| collapsedMarkerZIndex | 标记层级 | number | 1 | |\n\n### 徽标样式\n\n徽标是组合上显示的小标记，通常用于展示状态、数量或其他辅助信息。支持多个徽标同时显示，并可自定义位置。\n\n#### 单个徽标\n\n为组合添加一个简单的徽标：\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 100,\n autoFit: 'center',\n data: {\n nodes: [{ id: 'node1', combo: 'combo1' }],\n combos: [{ id: 'combo1' }],\n },\n combo: {\n style: {\n badges: [\n { text: 'NEW' }, // 默认显示在上方\n ],\n },\n },\n});\n\ngraph.render();\n```\n\n#### 多个徽标\n\n为组合添加多个不同位置的徽标：\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 100,\n autoFit: 'center',\n data: {\n nodes: [{ id: 'node1', combo: 'combo1' }],\n combos: [{ id: 'combo1' }],\n },\n combo: {\n style: {\n badge: true, // 是否显示徽标\n badges: [\n { text: 'A', placement: 'right-top' },\n { text: 'Important', placement: 'right' },\n { text: 'Notice', placement: 'right-bottom' },\n ],\n badgePalette: ['#7E92B5', '#F4664A', '#FFBE3A'], // 徽标的背景色板\n badgeFontSize: 7, // 徽标字体大小\n },\n },\n});\n\ngraph.render();\n```\n\n#### 自定义徽标样式\n\n完全自定义徽标的外观：\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 100,\n autoFit: 'center',\n data: {\n nodes: [{ id: 'node1', combo: 'combo1' }],\n combos: [{ id: 'combo1' }],\n },\n combo: {\n style: {\n badges: [\n {\n text: '99+',\n placement: 'right-top',\n backgroundFill: '#FF4D4F', // 红色背景\n fill: '#fff', // 白色文字\n fontSize: 10,\n padding: [2, 6],\n backgroundRadius: 8,\n },\n ],\n },\n },\n});\n\ngraph.render();\n```\n\n以下为完整的徽标样式配置：\n\n| 属性 | 描述 | 类型 | 默认值 |\n| ------------ | ------------------ | ------------------------------------- | --------------------------------- |\n| badge | 组合是否显示徽标 | boolean | true |\n| badgePalette | 组合徽标的背景色板 | string[] | [`#7E92B5`, `#F4664A`, `#FFBE3A`] |\n| badges | 组合徽标设置 | [BadgeStyleProps](#badgestyleprops)[] | - |\n\n#### BadgeStyleProps\n\n| 属性 | 描述 | 类型 | 默认值 |\n| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |\n| background | 组合徽标是否显示背景 | boolean | true |\n| backgroundCursor | 组合徽标背景鼠标移入样式，[配置项](#cursor) | string | `default` |\n| backgroundFill | 组合徽标背景填充色。若不指定，优先考虑 badgePalette 按顺序分配 | string | - |\n| backgroundFillOpacity | 组合徽标背景填充透明度 | number | 1 |\n| backgroundFilter | 组合徽标背景滤镜 | string | - |\n| backgroundHeight | 组合徽标背景高度 | number \\| string | - |\n| backgroundLineDash | 组合徽标背景虚线配置 | number \\| string \\|(number \\| string )[] | - |\n| backgroundLineDashOffset | 组合徽标背景虚线偏移量 | number | - |\n| backgroundLineWidth | 组合徽标背景描边线宽 | number | - |\n| backgroundRadius | 组合徽标背景圆角半径
- number: 统一设置四个圆角半径
- number[]: 分别设置四个圆角半径，会补足缺省的分量
- string: 与 [CSS padding](https://developer.mozilla.org/zh-CN/docs/Web/CSS/padding) 属性类似，使用空格分隔 | number \\| number[] \\| string | 0 |\n| backgroundShadowBlur | 组合徽标背景阴影模糊程度 | number | - |\n| backgroundShadowColor | 组合徽标背景阴影颜色 | string | - |\n| backgroundShadowOffsetX | 组合徽标背景阴影 X 方向偏移 | number | - |\n| backgroundShadowOffsetY | 组合徽标背景阴影 Y 方向偏移 | number | - |\n| backgroundStroke | 组合徽标背景描边颜色 | string | - |\n| backgroundStrokeOpacity | 组合徽标背景描边透明度 | number \\| string | 1 |\n| backgroundVisibility | 组合徽标背景是否可见 | `visible` \\| `hidden` | - |\n| fill | 组合徽标文字颜色 | string | - |\n| fontFamily | 组合徽标字体族 | string | - |\n| fontSize | 组合徽标字体大小 | number | 8 |\n| fontStyle | 组合徽标字体样式 | `normal` \\| `italic` \\| `oblique` | `normal` |\n| fontVariant | 组合徽标字体变种 | `normal` \\| `small-caps` \\| string | `normal` |\n| fontWeight | 组合徽标字体粗细 | number \\| string | `normal` |\n| lineHeight | 组合徽标行高 | string \\| number | - |\n| lineWidth | 组合徽标行宽 | string \\| number | - |\n| maxLines | 组合徽标文本最大行数 | number | 1 |\n| offsetX | 组合徽标在 x 轴方向上的偏移量 | number | 0 |\n| offsetY | 组合徽标在 y 轴方向上的偏移量 | number | 0 |\n| padding | 组合徽标内边距 | number \\| number[] | 0 |\n| placement | 组合徽标相对于组合主图形的位置。若不指定，默认从右上角顺时针依次排放 | `left` \\| `right` \\| `top` \\| `bottom` \\| `left-top` \\| `left-bottom` \\| `right-top` \\| `right-bottom` \\| `top-left` \\| `top-right` \\| `bottom-left` \\| `bottom-right` | - |\n| text | 组合徽标文字内容 | string | - |\n| textAlign | 组合徽标文本水平对齐方式 | `start` \\| `center` \\| `middle` \\| `end` \\| `left` \\| `right` | `left` |\n| textBaseline | 组合徽标文本基线 | `top` \\| `hanging` \\| `middle` \\| `alphabetic` \\| `ideographic` \\| `bottom` | `alphabetic` |\n| textDecorationColor | 组合徽标文本装饰线颜色 | string | - |\n| textDecorationLine | 组合徽标文本装饰线 | string | - |\n| textDecorationStyle | 组合徽标文本装饰线样式 | `solid` \\| `double` \\| `dotted` \\| `dashed` \\| `wavy` | `solid` |\n| textOverflow | 组合徽标文本溢出处理方式 | `clip` \\| `ellipsis` \\| string | `clip` |\n| visibility | 组合徽标是否可见 | `visible` \\| `hidden` | - |\n| wordWrap | 组合徽标文本是否自动换行 | boolean | - |\n| zIndex | 组合徽标渲染层级 | number | 3 |\n\n### 标签样式\n\n标签用于显示组合的文本信息，支持丰富的文本样式配置和灵活的位置布局。\n\n#### 基础标签配置\n\n为组合添加基本的文本标签：\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 240,\n height: 100,\n autoFit: 'center',\n data: {\n nodes: [{ id: 'node1', combo: 'combo1' }],\n combos: [{ id: 'combo1' }],\n },\n combo: {\n style: {\n labelText: '销售部门', // 标签文字内容\n labelFill: '#1A1A1A', // 标签文字颜色\n labelFontSize: 14, // 标签字体大小\n labelPlacement: 'bottom', // 标签位置：底部\n },\n },\n});\n\ngraph.render();\n```\n\n#### 多行文本标签\n\n配置支持多行显示的标签：\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 240,\n height: 120,\n autoFit: 'center',\n data: {\n nodes: [{ id: 'node1', combo: 'combo1' }],\n combos: [{ id: 'combo1' }],\n },\n combo: {\n style: {\n labelText: '这是一个支持多行显示的组合标签文本内容',\n labelWordWrap: true, // 开启文本换行\n labelMaxWidth: 100, // 最大宽度 100px\n labelMaxLines: 3, // 最多显示 3 行\n labelTextAlign: 'center', // 文本居中对齐\n labelFontSize: 12,\n },\n },\n});\n\ngraph.render();\n```\n\n#### 自定义样式标签\n\n创建具有特殊样式的标签：\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 240,\n height: 100,\n autoFit: 'center',\n data: {\n nodes: [{ id: 'node1', combo: 'combo1' }],\n combos: [{ id: 'combo1' }],\n },\n combo: {\n style: {\n labelText: 'IMPORTANT',\n labelFill: '#FF4D4F', // 红色文字\n labelFontSize: 16,\n labelFontWeight: 'bold', // 粗体\n labelFontStyle: 'italic', // 斜体\n labelTextDecorationLine: 'underline', // 下划线\n labelLetterSpacing: 2, // 字间距\n labelPlacement: 'top',\n },\n },\n});\n\ngraph.render();\n```\n\n以下为完整的标签样式配置：\n\n| 属性 | 描述 | 类型 | 默认值 | 必选 |\n| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | --------- | ---- |\n| label | 是否显示组合标签 | boolean | true | |\n| labelCursor | 鼠标移入组合标签时显示的样式，[配置项](#cursor) | string | `default` | |\n| labelFill | 组合标签文字颜色 | string | #000 | |\n| labelFillOpacity | 组合标签文字颜色的透明度 | number | 1 | |\n| labelFontFamily | 组合标签字体族 | string | - | |\n| labelFontSize | 组合标签字体大小 | number | 12 | |\n| labelFontStyle | 组合标签字体样式 | `normal` \\| `italic` \\| `oblique` | - | |\n| labelFontVariant | 组合标签字体变种 | `normal` \\| `small-caps` \\| string | - | |\n| labelFontWeight | 组合标签字体粗细 | `normal` \\| `bold` \\| `bolder` \\| `lighter` \\| number | 400 | |\n| labelLeading | 行间距 | number | 0 | |\n| labelLetterSpacing | 组合标签字间距 | number \\| string | - | |\n| labelLineHeight | 组合标签行高 | number \\| string | - | |\n| labelMaxLines | 组合标签最大行数 | number | 1 | |\n| labelMaxWidth | 组合标签最大宽度，[配置项](#labelmaxwidth) | number \\| string | `200%` | |\n| labelOffsetX | 组合标签在 x 轴方向上的偏移量 | number | 0 | |\n| labelOffsetY | 组合标签在 y 轴方向上的偏移量 | number | 0 | |\n| labelPadding | 组合标签内边距 | number \\| number[] | 0 | |\n| labelPlacement | 组合标签相对于组合主图形的位置，[配置项](#labelplacement) | string | `bottom` | |\n| labelText | 组合标签文字内容 | string | - | |\n| labelTextAlign | 组合标签文本水平对齐方式 | `start` \\| `center` \\| `middle` \\| `end` \\| `left` \\| `right` | `left` | |\n| labelTextBaseline | 组合标签文本基线 | `top` \\| `hanging` \\| `middle` \\| `alphabetic` \\| `ideographic` \\| `bottom` | - | |\n| labelTextDecorationColor | 组合标签文本装饰线颜色 | string | - | |\n| labelTextDecorationLine | 组合标签文本装饰线 | string | - | |\n| labelTextDecorationStyle | 组合标签文本装饰线样式 | `solid` \\| `double` \\| `dotted` \\| `dashed` \\| `wavy` | - | |\n| labelTextOverflow | 组合标签文本溢出处理方式 | `clip` \\| `ellipsis` \\| string | - | |\n| labelTextPath | 组合标签文本路径 | Path | - | |\n| labelWordWrap | 组合标签是否开启自动折行。开启 labelWordWrap 后，超出 labelMaxWidth 的部分自动换行 | boolean | false | |\n| labelZIndex | 组合标签渲染层级 | number | 0 | |\n| `label{StyleProps}` | 更多标签样式配置，参考 [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) 属性值。比如 labelOpacity 代表标签透明度 | [TextStyleProps](https://g.antv.antgroup.com/api/basic/text) | - | |\n\n#### LabelPlacement\n\n标签相对于组合主图形的位置，可选值有：\n\n- `center`：标签位于组合中心\n- `top`、`bottom`、`left`、`right`：标签位于组合的上、下、左、右方\n- `top-left`、`top-right`、`bottom-left`、`bottom-right`：标签位于组合的四个角\n- `left-top`、`left-bottom`、`right-top`、`right-bottom`：标签位于组合边的端点\n\n#### LabelMaxWidth\n\n开启自动折行 `labelWordWrap` 后，超出该宽度则换行:\n\n- string: 表示以相对于组合元素宽度的百分比形式定义最大宽度。例如 `50%` 表示标签宽度不超过组合宽度的一半\n- number: 表示以像素值为单位定义最大宽度。例如 100 表示标签的最大宽度为 100 像素\n\n比如，设置多行标签文字：\n\n```json\n{\n \"labelWordWrap\": true,\n \"labelMaxWidth\": 200,\n \"labelMaxLines\": 3\n}\n```\n\n### 标签背景样式\n\n标签背景为标签文字提供背景装饰，可以提升标签的可读性和视觉效果。\n\n#### 基础背景样式\n\n为标签添加简单的背景：\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 240,\n height: 100,\n autoFit: 'center',\n data: {\n nodes: [{ id: 'node1', combo: 'combo1' }],\n combos: [{ id: 'combo1' }],\n },\n combo: {\n style: {\n labelText: '重要组合',\n labelFill: '#fff', // 白色文字\n labelBackground: true, // 启用背景\n labelBackgroundFill: '#1783FF', // 蓝色背景\n labelBackgroundPadding: [4, 8], // 内边距：垂直4px，水平8px\n labelBackgroundRadius: 4, // 圆角半径\n },\n },\n});\n\ngraph.render();\n```\n\n#### 渐变背景效果\n\n创建带渐变效果的标签背景：\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 240,\n height: 100,\n autoFit: 'center',\n data: {\n nodes: [{ id: 'node1', combo: 'combo1' }],\n combos: [{ id: 'combo1' }],\n },\n combo: {\n style: {\n labelText: 'VIP组合',\n labelFill: '#fff',\n labelFontWeight: 'bold',\n labelBackground: true,\n labelBackgroundFill: 'linear-gradient(45deg, #FF6B6B, #4ECDC4)', // 渐变背景\n labelBackgroundPadding: [6, 12],\n labelBackgroundRadius: 20, // 大圆角\n labelBackgroundShadowColor: 'rgba(0,0,0,0.2)',\n labelBackgroundShadowBlur: 4,\n labelBackgroundShadowOffsetY: 2,\n },\n },\n});\n\ngraph.render();\n```\n\n#### 描边背景样式\n\n创建只有描边的标签背景：\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 240,\n height: 100,\n autoFit: 'center',\n data: {\n nodes: [{ id: 'node1', combo: 'combo1' }],\n combos: [{ id: 'combo1' }],\n },\n combo: {\n style: {\n labelText: '边框标签',\n labelFill: '#1783FF',\n labelBackground: true,\n labelBackgroundFill: 'transparent', // 透明背景\n labelBackgroundStroke: '#1783FF', // 蓝色描边\n labelBackgroundLineWidth: 2, // 描边宽度\n labelBackgroundPadding: [4, 8],\n labelBackgroundRadius: 8,\n },\n },\n});\n\ngraph.render();\n```\n\n以下为完整的标签背景样式配置：\n\n| 属性 | 描述 | 类型 | 默认值 |\n| ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ | ------------ |\n| labelBackground | 组合标签背景是否显示 | boolean | false |\n| labelBackgroundCursor | 组合标签背景鼠标移入样式，[配置项](#cursor) | string | `default` |\n| labelBackgroundFill | 组合标签背景填充色 | string | #000 |\n| labelBackgroundFillOpacity | 组合标签背景透明度 | number | 0.75 |\n| labelBackgroundHeight | 组合标签背景高度 | string \\| number | - |\n| labelBackgroundLineDash | 组合标签背景虚线配置 | number \\| string \\|(number \\| string )[] | - |\n| labelBackgroundLineDashOffset | 组合标签背景虚线偏移量 | number | - |\n| labelBackgroundLineWidth | 组合标签背景描边线宽 | number | - |\n| labelBackgroundPadding | 组合标签背景内间距 | number \\| number[] | [2, 4, 2, 4] |\n| labelBackgroundRadius | 组合标签背景圆角半径
- number: 统一设置四个圆角半径
- number[]: 分别设置四个圆角半径，不足则自动补充 | number \\| number[] | 0 |\n| labelBackgroundShadowBlur | 组合标签背景阴影模糊程度 | number | - |\n| labelBackgroundShadowColor | 组合标签背景阴影颜色 | string | - |\n| labelBackgroundShadowOffsetX | 组合标签背景阴影 X 方向偏移 | number | - |\n| labelBackgroundShadowOffsetY | 组合标签背景阴影 Y 方向偏移 | number | - |\n| labelBackgroundStroke | 组合标签背景描边颜色 | string | - |\n| labelBackgroundStrokeOpacity | 组合标签背景描边透明度 | number \\| string | 1 |\n| labelBackgroundVisibility | 组合标签背景是否可见 | `visible` \\| `hidden` | - |\n| labelBackgroundZIndex | 组合标签背景渲染层级 | number | 1 |\n| `labelBackground{StyleProps}` | 更多标签背景样式配置，参考 [RectStyleProps](https://g.antv.antgroup.com/api/basic/rect) 属性值。例如 labelBackgroundOpacity 代表标签背景透明度 | [RectStyleProps](https://g.antv.antgroup.com/api/basic/rect) | - |\n\n### 光晕样式\n\n光晕效果用于突出显示组合，通常在鼠标悬停、选中或激活状态下使用，为组合周围添加发光效果。\n\n#### 基础光晕效果\n\n为组合添加简单的光晕效果：\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 240,\n height: 100,\n autoFit: 'center',\n data: {\n nodes: [{ id: 'node1', combo: 'combo1' }],\n combos: [{ id: 'combo1' }],\n },\n combo: {\n style: {\n halo: true, // 启用光晕\n haloStroke: '#1783FF', // 蓝色光晕\n haloLineWidth: 8, // 光晕宽度\n haloStrokeOpacity: 0.3, // 光晕透明度\n },\n },\n});\n\ngraph.render();\n```\n\n#### 彩色光晕效果\n\n创建彩色渐变的光晕效果：\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 240,\n height: 100,\n autoFit: 'center',\n data: {\n nodes: [{ id: 'node1', combo: 'combo1' }],\n combos: [{ id: 'combo1' }],\n },\n combo: {\n style: {\n halo: true,\n haloStroke: '#FF4D4F', // 红色光晕\n haloLineWidth: 12, // 较粗的光晕\n haloStrokeOpacity: 0.5,\n haloFilter: 'blur(2px)', // 模糊滤镜效果\n },\n },\n});\n\ngraph.render();\n```\n\n#### 动态光晕效果\n\n在状态切换时使用光晕效果：\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 240,\n height: 100,\n autoFit: 'center',\n data: {\n nodes: [{ id: 'node1', combo: 'combo1' }],\n combos: [{ id: 'combo1' }],\n },\n combo: {\n style: {\n // 默认状态下不显示光晕\n halo: false,\n },\n state: {\n // 悬停状态显示橙色光晕\n hover: {\n halo: true,\n haloStroke: '#FF7A00',\n haloLineWidth: 10,\n haloStrokeOpacity: 0.4,\n },\n // 选中状态显示绿色光晕\n selected: {\n halo: true,\n haloStroke: '#52C41A',\n haloLineWidth: 6,\n haloStrokeOpacity: 0.6,\n },\n },\n },\n});\n\ngraph.render();\n```\n\n以下为完整的光晕样式配置：\n\n| 属性 | 描述 | 类型 | 默认值 | 必选 |\n| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | ---------------------------- | ---- |\n| halo | 是否显示组合光晕 | boolean | false | |\n| haloCursor | 组合光晕鼠标移入样式，[配置项](#cursor) | string | `default` | |\n| haloDraggable | 组合光晕是否允许拖拽 | boolean | true | |\n| haloDroppable | 组合光晕是否允许接收被拖拽的元素 | boolean | false | |\n| haloFill | 光晕填充色 | string | 与主图形的填充色 `fill` 一致 | |\n| haloFillRule | 组合光晕填充规则 | `nonzero` \\| `evenodd` | - | |\n| haloFilter | 组合光晕滤镜效果，如 'blur(2px)' 可创建模糊效果 | string | - | |\n| haloLineWidth | 组合光晕描边宽度，控制光晕的粗细程度 | number | 12 | |\n| haloPointerEvents | 组合光晕效果是否响应指针事件，[配置项](#pointerevents) | string | `none` | |\n| haloStroke | 组合光晕描边色，**此属性用于设置组合周围光晕的颜色，帮助突出显示组合** | string | `#99add1` | |\n| haloStrokeOpacity | 组合光晕描边色透明度，建议使用 0.2-0.6 的值以获得自然的光晕效果 | number | 0.25 | |\n| haloVisibility | 组合光晕可见性 | `visible` \\| `hidden` | `visible` | |\n| haloZIndex | 组合光晕渲染层级，通常设置为负值以确保光晕在组合主图形下方 | number | -1 | |\n| `halo{StyleProps}` | 更多光晕样式配置，参考 [DisplayObject](https://g.antv.antgroup.com/api/basic/display-object) 配置项。例如 haloFillOpacity 代表光晕填充色透明度 | [DisplayObject](https://g.antv.antgroup.com/api/basic/display-object) | - | |\n\n**光晕使用建议：**\n\n1. **性能考虑**：光晕效果会增加渲染负担，建议在必要时才启用\n2. **颜色搭配**：光晕颜色应与组合主色调协调，避免过于突兀\n3. **透明度设置**：合理的透明度（0.2-0.6）可以创造自然的光晕效果\n4. **状态应用**：光晕通常用于 hover、selected、active 等交互状态\n\n### 图标样式\n\n图标用于在组合中显示文字或图片内容，通常位于组合的中心位置，可以用来表示组合的类型或功能。\n\n#### 文字图标\n\n使用文字作为组合的图标：\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 240,\n height: 100,\n autoFit: 'center',\n data: {\n combos: [{ id: 'combo1' }],\n },\n combo: {\n style: {\n iconText: 'A', // 显示字母 A\n iconFill: '#1783FF', // 蓝色文字\n iconFontSize: 24, // 大字体\n iconFontWeight: 'bold', // 粗体\n },\n },\n});\n\ngraph.render();\n```\n\n#### 图片图标\n\n使用图片作为组合的图标：\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 240,\n height: 100,\n autoFit: 'center',\n data: {\n combos: [{ id: 'combo1' }],\n },\n combo: {\n style: {\n fill: '#1890FF',\n iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',\n iconWidth: 32,\n iconHeight: 32,\n },\n },\n});\n\ngraph.render();\n```\n\n#### 彩色文字图标\n\n创建带有特殊样式的文字图标：\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 240,\n height: 100,\n autoFit: 'center',\n data: {\n combos: [{ id: 'combo1' }],\n },\n combo: {\n style: {\n iconText: '部门',\n iconFill: '#FF4D4F', // 红色文字\n iconFontSize: 16,\n iconFontWeight: 'bold',\n iconFontStyle: 'italic', // 斜体\n iconTextDecorationLine: 'underline', // 下划线\n iconLetterSpacing: 1, // 字间距\n },\n },\n});\n\ngraph.render();\n```\n\n以下为完整的图标样式配置：\n\n| 属性 | 描述 | 类型 | 默认值 |\n| ----------------------- | ---------------------------------------------------------------------------- | --------------------------------------------------------------------------- | ---------------- |\n| icon | 是否显示组合图标 | boolean | true |\n| iconCursor | 组合图标鼠标移入样式，[配置项](#cursor) | string | `default` |\n| iconFill | 组合图标文字颜色 | string | - |\n| iconFillOpacity | 组合图标文字颜色透明度 | number | 1 |\n| iconFontFamily | 组合图标字体族 | string | - |\n| iconFontSize | 组合图标字体大小 | number | 16 |\n| iconFontStyle | 组合图标字体样式 | `normal` \\| `italic` \\| `oblique` | `normal` |\n| iconFontVariant | 组合图标字体变种 | `normal` \\| `small-caps` \\| string | `normal` |\n| iconFontWeight | 组合图标字体粗细 | number \\| string | `normal` |\n| iconHeight | 组合图标高度，当使用图片图标时用于控制图片尺寸 | number | 主图形高度的一半 |\n| iconLetterSpacing | 组合图标文本字间距 | number \\| string | - |\n| iconLineHeight | 组合图标文本行高 | number \\| string | - |\n| iconMaxLines | 组合图标文本最大行数 | number | 1 |\n| iconOffsetX | 组合图标在 x 轴方向上的偏移量 | number | 0 |\n| iconOffsetY | 组合图标在 y 轴方向上的偏移量 | number | 0 |\n| iconOpacity | 组合图标透明度 | number | 1 |\n| iconRadius | 组合图标圆角半径（仅对矩形图标有效） | number | 0 |\n| iconSrc | 组合图片来源。其优先级高于 iconText，支持本地图片和网络图片 | string | - |\n| iconText | 组合图标文字内容，支持文字、Unicode 字符等 | string | - |\n| iconTextAlign | 组合图标文本水平对齐方式 | `start` \\| `center` \\| `middle` \\| `end` \\| `left` \\| `right` | `center` |\n| iconTextBaseline | 组合图标文本基线 | `top` \\| `hanging` \\| `middle` \\| `alphabetic` \\| `ideographic` \\| `bottom` | `middle` |\n| iconTextDecorationColor | 组合图标文本装饰线颜色 | string | - |\n| iconTextDecorationLine | 组合图标文本装饰线，如下划线、删除线等 | string | - |\n| iconTextDecorationStyle | 组合图标文本装饰线样式 | `solid` \\| `double` \\| `dotted` \\| `dashed` \\| `wavy` | `solid` |\n| iconTextOverflow | 组合图标文本溢出处理方式 | `clip` \\| `ellipsis` \\| string | `clip` |\n| iconVisibility | 组合图标是否可见 | `visible` \\| `hidden` | `visible` |\n| iconWidth | 组合图标宽度，当使用图片图标时用于控制图片尺寸 | number | 主图形宽度的一半 |\n| iconWordWrap | 组合图标文本是否自动换行 | boolean | false |\n| iconZIndex | 组合图标渲染层级 | number | 1 |\n| `icon{StyleProps}` | 更多图标样式配置，参考图标的具体类型配置项。例如 iconStroke 代表图标描边颜色 | - | - |\n\n**图标使用建议：**\n\n1. **优先级**：`iconSrc`（图片）的优先级高于 `iconText`（文字），如果同时设置，会优先显示图片\n2. **尺寸控制**：建议根据组合大小合理设置图标尺寸，避免图标过大或过小影响视觉效果\n3. **性能优化**：使用文字图标性能更好，图片图标需要额外的网络请求和渲染开销\n4. **样式一致性**：在同一个图中的组合图标样式应保持一致，提升整体视觉效果\n5. **可访问性**：确保图标颜色与背景有足够的对比度，便于用户识别\n\n## State\n\n在一些交互行为中，比如点击选中一个组合或鼠标悬停激活一个边，仅仅是在该元素做了某些状态的标识。为了将这些状态反应到终端用户所见的视觉空间中，我们需要为不同的状态设置不同的图元素样式，以响应该图元素状态的变化。\n\nG6 提供了几种内置的状态，包括选中（selected）、高亮（highlight）、激活（active）、不活跃（inactive）和禁用（disabled）。此外，它还支持自定义状态，以满足更特定的需求。对于每个状态，开发者可以定义一套样式规则，这些规则会覆盖元素的默认样式。\n\n
\n\n数据结构如下：\n\n```typescript\ntype ComboState = {\n [state: string]: ComboStyle;\n};\n```\n\n例如，当组合处于 `focus` 状态时，可以为其添加一个宽度为 3 且颜色为橙色的描边。\n\n```js {4-7}\nconst graph = new Graph({\n combo: {\n state: {\n focus: {\n lineWidth: 3, // 描边宽度\n stroke: 'orange', // 描边颜色\n },\n },\n },\n});\n```\n\n效果如下图所示：\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 100,\n autoFit: 'center',\n data: {\n nodes: [{ id: 'node1', combo: 'combo1' }],\n combos: [{ id: 'combo1', states: ['focus'] }],\n },\n combo: {\n state: {\n focus: {\n lineWidth: 3,\n stroke: 'orange',\n fill: 'orange',\n fillOpacity: 0.2,\n },\n },\n },\n});\n\ngraph.render();\n```\n\n## Animation\n\n定义组合的动画效果，支持下列两种配置方式：\n\n1. 关闭组合全部动画\n\n```json\n{\n \"combo\": {\n \"animation\": false\n }\n}\n```\n\n2. 配置阶段动画\n\n阶段动画是指组合在进入画布、更新、离开画布时的动画效果。目前支持的阶段包括：\n\n- `enter`: 组合进入画布时的动画\n- `update`: 组合更新时的动画\n- `exit`: 组合离开画布时的动画\n- `show`: 组合从隐藏状态显示时的动画\n- `hide`: 组合隐藏时的动画\n- `collapse`: 组合收起时的动画\n- `expand`: 组合展开时的动画\n\n你可以参考 [动画范式](/manual/animation/animation#动画范式) 使用动画语法来配置组合，如：\n\n```json\n{\n \"combo\": {\n \"animation\": {\n \"update\": [\n {\n \"fields\": [\"x\", \"y\"], // 更新时只对 x 和 y 属性进行动画\n \"duration\": 1000, // 动画持续时间\n \"easing\": \"linear\" // 缓动函数\n }\n ],\n }\n}\n```\n\n也可以使用内置的动画效果：\n\n```json\n{\n \"combo\": {\n \"animation\": {\n \"enter\": \"fade\", // 使用渐变动画\n \"update\": \"translate\", // 使用平移动画\n \"exit\": \"fade\" // 使用渐变动画\n }\n }\n}\n```\n\n你可以传入 false 来关闭特定阶段的动画：\n\n```json\n{\n \"combo\": {\n \"animation\": {\n \"enter\": false // 关闭组合入场动画\n }\n }\n}\n```\n\n## Palette\n\n定义组合的色板，即预定义组合颜色池，并根据规则进行分配，将颜色映射到 `fill` 属性。\n\n> 有关色板的定义，请参考 [色板](/manual/theme/palette)。\n\n| 属性 | 描述 | 类型 | 默认值 |\n| ------ | ------------------------------------------------------------------- | --------------------------------- | ------- |\n| type | 指定当前色板类型。- `group`: 离散色板
- `value`: 连续色板 | `group` | `value` | `group` |\n| field | 指定元素数据中的分组字段。若不指定，默认取 id 作为分组字段 | string | ((datum) => string) | `id` |\n| color | 色板颜色。如果色板注册过，可以直接指定其注册名，也接受一个颜色数组 | string | string[] | - |\n| invert | 是否反转色板 | boolean | false |\n\n如将一组数据按 `category` 字段分配组合颜色，使得同类别的组合颜色相同：\n\n```json\n{\n \"combo\": {\n \"palette\": {\n \"type\": \"group\",\n \"field\": \"category\",\n \"color\": [\"#1783FF\", \"#F08F56\", \"#D580FF\", \"#00C9C9\", \"#7863FF\"]\n }\n }\n}\n```\n\n效果如下图所示：\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 600,\n height: 100,\n data: {\n combos: new Array(8)\n .fill(0)\n .map((_, i) => ({ id: `combo-${i}`, data: { category: ['A', 'B', 'C', 'D', 'E'][i % 5] } })),\n },\n layout: { type: 'grid', cols: 8 },\n combo: {\n style: { fillOpacity: 0.4 },\n palette: {\n type: 'group',\n field: 'category',\n color: ['#1783FF', '#F08F56', '#D580FF', '#00C9C9', '#7863FF'],\n },\n },\n});\n\ngraph.render();\n```\n\n也可以使用默认配置：\n\n```json\n{\n \"combo\": {\n \"palette\": \"tableau\" // tableau 为色板名，默认根据 ID 分配颜色\n }\n}\n```\n\n效果如下图所示：\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 600,\n height: 100,\n data: {\n combos: new Array(8)\n .fill(0)\n .map((_, i) => ({ id: `combo-${i}`, data: { category: ['A', 'B', 'C', 'D', 'E'][i % 5] } })),\n },\n layout: { type: 'grid', cols: 8 },\n combo: {\n style: { fillOpacity: 0.4 },\n palette: 'tableau',\n },\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/element/combo/CircleCombo.en.md":"---\ntitle: Circle Combo\norder: 2\n---\n\n## Overview\n\nThe circular combo wraps child nodes or child combos with a circular boundary, suitable for representing equal or non-hierarchical group relationships.\n\nApplicable scenarios:\n\n- Suitable for representing node groups without a clear hierarchical relationship. The circular combo can reflect the equality of members, such as user groups in social networks or decentralized team structures (highlighting collaboration).\n\n## Online Experience\n\n\n\n## Style Configuration\n\n> If the element has its specific attributes, we will list them below. For all general style attributes, see [BaseCombo](/en/manual/element/combo/base-combo)\n\n## Example\n\nThe following example shows the distribution of interest group members:\n\n\n","packages/site/docs/manual/element/combo/CircleCombo.zh.md":"---\ntitle: 圆形组合 Circle\norder: 2\n---\n\n## 概述\n\n圆形组合以圆形边界包裹子节点或子组合，适合表示平等或非层级化的群组关系。\n\n适用场景：\n\n- 适合表示无明确层级关系的节点群组，圆形组合能体现成员的平等性，如社交网络中的用户群体、分散式团队结构（突出协作性）。\n\n## 在线体验\n\n\n\n## 样式配置\n\n> 如果元素有其特定的属性，我们将在下面列出。对于所有的通用样式属性，见 [BaseCombo](/manual/element/combo/base-combo)\n\n## 示例\n\n以下示例为兴趣小组人员分布：\n\n\n","packages/site/docs/manual/element/combo/RectCombo.en.md":"---\ntitle: Rect Combo\norder: 3\n---\n\n## Overview\n\nThe rectangular combo organizes content with right-angle boundaries, supporting strict hierarchical structures.\n\nApplicable scenarios:\n\n- **System Architecture Diagrams**: Such as service layering within system architecture, and subdivisions within each layer.\n- **Geographical Area Division**: Such as cities containing multiple areas, where the rectangular combo can intuitively display administrative boundaries or functional divisions.\n\n## Online Experience\n\n\n\n## Style Configuration\n\n> If the element has its specific attributes, we will list them below. For all general style attributes, see [BaseCombo](/en/manual/element/combo/base-combo)\n\n## Example\n\nThe following example is a simple microservice architecture service layer:\n\n\n","packages/site/docs/manual/element/combo/RectCombo.zh.md":"---\ntitle: 矩形组合 Rect\norder: 3\n---\n\n## 概述\n\n矩形组合以直角边界组织内容，支持严格的层级结构。\n\n适用场景：\n\n- **系统架构图**：如系统架构里面的服务分层，以及每层服务里面的细分等。\n- **地理区域划分**：如城市包含多个区域，矩形组合能直观展示行政边界或功能分区。\n\n## 在线体验\n\n\n\n## 样式配置\n\n> 如果元素有其特定的属性，我们将在下面列出。对于所有的通用样式属性，见 [BaseCombo](/manual/element/combo/base-combo)\n\n## 示例\n\n以下示例为简单的微服务架构服务层：\n\n\n","packages/site/docs/manual/element/combo/custom-combo.en.md":"---\ntitle: Custom Combo\norder: 4\n---\n\nG6 provides two types of [built-in combos](/en/manual/element/combo/base-combo): circular combos and rectangular combos. However, in complex business scenarios, you may need to create custom combos with specific styles, interactive effects, or behavior logic.\n\n## Before You Start: Understanding the Basic Composition of Combos\n\nIn G6, a complete combo typically consists of the following parts:\n\n
Keys should not use special symbols, and will be converted to camel case to call `getXxxStyle` and `drawXxxShape` methods (see [Element Conventions](#element-conventions)) |\n| Ctor | { new (...args: any[]): DisplayObject } | Graphic class |\n| style | Record
key 不应使用特殊符号，会基于该值转化为驼峰形式调用 `getXxxStyle` 和 `drawXxxShape` 方法（见 [元素约定](#元素约定)） |\n| Ctor | { new (...args: any[]): DisplayObject } | 图形类 |\n| style | Record
![](\"https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Kbk1S5pzSY0AAAAAAAAAAAAADmJ7AQ/original\")
\n![](\"https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*PKtgSZzmb3YAAAAAAAAAAAAADmJ7AQ/original\")
\n\n## Data Structure\n\nWhen defining a Combo, you need to add a `combos` field to the graph's data object. Each Combo is an object with the following structure:\n\n| Attribute | Description | Type | Default | Required |\n| --------- | ------------------------------------------------------------------------------------------------------ | -------------- | ------- | -------- |\n| id | Unique identifier of the combo | string | - | ✓ |\n| type | Combo type, name of built-in combo type or custom combo name, such as `circle` or `rect` | string | - | |\n| data | Combo data, used to store custom data of the combo, accessible via callback functions in style mapping | object | - | |\n| style | Combo style | object | - | |\n| states | Initial states of the combo | string[] | - | |\n| combo | Parent combo ID. If there is no parent combo, it is null | string \\| null | - | |\n\nAn example of a data item in the `combos` array:\n\n```json\n{\n \"id\": \"combo1\",\n \"type\": \"circle\",\n \"data\": { \"groupName\": \"Group A\" },\n \"style\": { \"fill\": \"lightblue\", \"stroke\": \"blue\", \"collapsed\": true },\n \"states\": [],\n \"combo\": null\n}\n```\n\nTo assign a node to a Combo, you can add a `combo` field to the node data:\n\n```json\n{\n \"nodes\": [{ \"id\": \"node1\", \"combo\": \"comboA\" }], // node1 belongs to comboA\n \"combos\": [{ \"id\": \"comboA\" }] // define comboA\n}\n```\n\n## Configuration Methods\n\nThere are three ways to configure Combos, listed in order of priority from highest to lowest:\n\n- Use `graph.setCombo()` for dynamic configuration\n- Global configuration during graph instantiation\n- Dynamic properties in data\n\nThese configuration methods can be used simultaneously. When there are identical configuration items, the method with higher priority will override the one with lower priority.\n\n### Using `graph.setCombo()`\n\nYou can dynamically set the style mapping logic of Combos using `graph.setCombo()` after the graph instance is created.\n\nThis method must be called before `graph.render()` to take effect and has the highest priority.\n\n```js\ngraph.setCombo({\n style: {\n type: 'circle',\n style: { fill: '#7FFFD4', stroke: '#5CACEE', lineWidth: 2 },\n },\n});\n\ngraph.render();\n```\n\n### Global Configuration During Graph Instantiation\n\nYou can configure Combo style mapping globally during graph instantiation. This configuration will apply to all Combos.\n\n```js\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n // Specify combo type and combo style type in the combo configuration\n combo: {\n type: 'circle',\n style: { fill: '#7FFFD4', stroke: '#5CACEE', lineWidth: 2 },\n },\n});\n```\n\n### Dynamic Configuration in Data\n\nIf you need different configurations for different Combos, you can write the configuration into the Combo data. This configuration method can be directly written into the data in the form of the following code:\n\n```typescript\n// Specify combo type and combo style type in the data\nconst data = {\n combos: [\n {\n id: 'combo-1',\n type: 'circle',\n style: { size: 100, stroke: 'orange' },\n },\n ],\n};\n```\n\n### Adjusting Priority\n\nIf you want the configuration in the data to have a higher priority than the global configuration, you can take the following approach:\n\n```js\nconst data = {\n combos: [\n {\n id: 'combo-1',\n type: 'circle',\n style: { size: 100, stroke: 'orange' },\n },\n ],\n};\n\nconst graph = new Graph({\n combo: {\n type: (d) => d.type || 'rect',\n style: {\n stroke: (d) => d.style.stroke || 'blue',\n },\n },\n});\n```\n\n## Example\n\n```js | ob { inject: true }\nimport { Graph, register, Rect, ExtensionCategory } from '@antv/g6';\n\nconst data = {\n nodes: [\n {\n id: 'node1',\n combo: 'combo1',\n style: { x: 245, y: 200 },\n },\n {\n id: 'node2',\n combo: 'combo1',\n style: { x: 210, y: 250 },\n },\n {\n id: 'node3',\n combo: 'combo1',\n style: { x: 280, y: 245 },\n },\n {\n id: 'node4',\n combo: 'combo2',\n style: { x: 400, y: 165 },\n },\n {\n id: 'node5',\n combo: 'combo2',\n style: { x: 450, y: 162 },\n },\n {\n id: 'node6',\n combo: 'combo3',\n style: { x: 425, y: 300 },\n },\n {\n id: 'node7',\n combo: 'combo3',\n style: { x: 360, y: 332 },\n },\n ],\n edges: [],\n combos: [\n {\n id: 'combo1',\n combo: 'combo3',\n data: { label: 'Combo A' },\n },\n {\n id: 'combo2',\n combo: 'combo3',\n data: { label: 'Combo B' },\n },\n {\n id: 'combo3',\n data: { label: 'Combo C' },\n },\n {\n id: 'combo4',\n data: { label: 'Combo D' },\n style: { x: 58, y: 248 },\n },\n ],\n};\n\nconst graph = new Graph({\n container: 'container',\n height: 450,\n data,\n node: {\n style: {\n labelText: (d) => d.id,\n labelPlacement: 'center',\n labelFill: '#fff',\n labelFontSize: 10,\n },\n },\n combo: {\n type: 'circle',\n style: {\n padding: 2,\n labelText: (d) => d.data.label,\n labelPlacement: 'top',\n },\n },\n behaviors: [\n 'collapse-expand',\n {\n type: 'drag-element',\n dropEffect: 'link',\n },\n ],\n});\n\ngraph.render();\n```\n\n## Combo Interaction\n\nSimply rendering a Combo does not provide much practical value; it is only when a series of interactive operations are supported that the value of Combos can be maximized.\n\nIn G6, we have built-in interactions such as `drag-element` and `collapse-expand`.\n\n#### drag-element\n\nSupports dragging nodes and Combos. During the dragging of a Combo, the positions of nodes and edges within the Combo will dynamically change. After dragging is complete, the relative positions of the Combo and nodes remain unchanged. You can also change the affiliation of the Combo during dragging by setting `dropEffect: 'link'`.\n\n![](\"https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*rJiHQahxgj4AAAAAAAAAAAAAemJ7AQ/original\")
\n\n#### collapse-expand\n\nSupports double-clicking a Combo to collapse and expand it. After collapsing a Combo, all nodes within the Combo are hidden. If there are connections between external nodes and nodes within the Combo, all connections will connect to the Combo.\n\n![](\"https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*PfnsSZSkRagAAAAAAAAAAAAAemJ7AQ/original\")
\n\n## Custom Combos\n\nWhen built-in Combos cannot meet your needs, G6 provides powerful customization capabilities:\n\n- Extend built-in Combos\n- Create new Combo types\n\nUnlike Combos, custom Combos need to be registered before use. For detailed tutorials, please refer to the [Custom Combo](/en/manual/element/combo/custom-combo) documentation.\n","packages/site/docs/manual/element/combo/overview.zh.md":"---\ntitle: 组合总览\norder: 0\n---\n\n## 什么是组合\n\n组合(Combo) 全称为 Combination，是 G6 中的一种特殊的图元素，它可以包含节点和子组合，类似“群组”或“容器”的概念。它通常用于表示集合关系，例如一个部门包含多个员工，一个城市包含多个区域等。\n\n\n\n\n## 数据结构\n\n定义 Combo 时，需要在图的数据对象中添加 `combos` 字段，每个 Combo 是一个对象，结构如下：\n\n| 属性 | 描述 | 类型 | 默认值 | 必选 |\n| ------ | ----------------------------------------------------------------------- | -------------- | ------ | ---- |\n| id | 组合的唯一标识符 | string | - | ✓ |\n| type | 组合类型，内置组合类型名称或者自定义组合名称，比如 `circle` 或者 `rect` | string | - | |\n| data | 组合数据，用于存储组合的自定义数据，可以在样式映射中通过回调函数获取 | object | - | |\n| style | 组合样式 | object | - | |\n| states | 组合初始状态 | string[] | - | |\n| combo | 组合的父组合 ID。如果没有父组合，则为 null | string \\| null | - | |\n\n`combos` 数组中一个数据项的示例：\n\n```json\n{\n \"id\": \"combo1\",\n \"type\": \"circle\",\n \"data\": { \"groupName\": \"Group A\" },\n \"style\": { \"fill\": \"lightblue\", \"stroke\": \"blue\", \"collapsed\": true },\n \"states\": [],\n \"combo\": null\n}\n```\n\n要将节点归属到某个 Combo，可以在节点数据中添加 `combo` 字段：\n\n```json\n{\n \"nodes\": [{ \"id\": \"node1\", \"combo\": \"comboA\" }], // node1 属于 comboA\n \"combos\": [{ \"id\": \"comboA\" }] // 定义 comboA\n}\n```\n\n## 配置方法\n\n配置 Combo 的方式有三种，按优先级从高到低如下：\n\n- 使用 `graph.setCombo()` 动态配置\n- 实例化图时全局配置\n- 在数据中动态属性\n\n这几个配置方法可以同时使用。有相同的配置项时，优先级高的方式将会覆盖优先级低的。\n\n### 使用 `graph.setCombo()`\n\n可在图实例创建后，使用 `graph.setCombo()` 动态设置 Combo 的样式映射逻辑。\n\n该方法需要在 `graph.render()` 之前调用才会生效，并拥有最高优先级。\n\n```js\ngraph.setCombo({\n style: {\n type: 'circle',\n style: { fill: '#7FFFD4', stroke: '#5CACEE', lineWidth: 2 },\n },\n});\n\ngraph.render();\n```\n\n### 实例化图时全局配置\n\n在实例化图时可以通过 `combo` 配置 Combo 样式映射，这里的配置是全局的配置，将会在所有 Combo 上生效。\n\n```js\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n // 在组合配置中指定组合类型以及组合样式类型\n combo: {\n type: 'circle',\n style: { fill: '#7FFFD4', stroke: '#5CACEE', lineWidth: 2 },\n },\n});\n```\n\n### 在数据中动态配置\n\n如果需要为不同 Combo 进行不同的配置，可以将配置写入到 Combo 数据中。这种配置方式可以通过下面代码的形式直接写入数据：\n\n```typescript\n// 在数据中指定组合类型以及组合样式类型\nconst data = {\n combos: [\n {\n id: 'combo-1',\n type: 'circle',\n style: { size: 100, stroke: 'orange' },\n },\n ],\n};\n```\n\n### 调整优先级\n\n如果你想让数据中配置的优先级高于全局配置，你可以采取以下方式：\n\n```js\nconst data = {\n combos: [\n {\n id: 'combo-1',\n type: 'circle',\n style: { size: 100, stroke: 'orange' },\n },\n ],\n};\n\nconst graph = new Graph({\n combo: {\n type: (d) => d.type || 'rect',\n style: {\n stroke: (d) => d.style.stroke || 'blue',\n },\n },\n});\n```\n\n## 示例\n\n```js | ob { inject: true }\nimport { Graph, register, Rect, ExtensionCategory } from '@antv/g6';\n\nconst data = {\n nodes: [\n {\n id: 'node1',\n combo: 'combo1',\n style: { x: 245, y: 200 },\n },\n {\n id: 'node2',\n combo: 'combo1',\n style: { x: 210, y: 250 },\n },\n {\n id: 'node3',\n combo: 'combo1',\n style: { x: 280, y: 245 },\n },\n {\n id: 'node4',\n combo: 'combo2',\n style: { x: 400, y: 165 },\n },\n {\n id: 'node5',\n combo: 'combo2',\n style: { x: 450, y: 162 },\n },\n {\n id: 'node6',\n combo: 'combo3',\n style: { x: 425, y: 300 },\n },\n {\n id: 'node7',\n combo: 'combo3',\n style: { x: 360, y: 332 },\n },\n ],\n edges: [],\n combos: [\n {\n id: 'combo1',\n combo: 'combo3',\n data: { label: 'Combo A' },\n },\n {\n id: 'combo2',\n combo: 'combo3',\n data: { label: 'Combo B' },\n },\n {\n id: 'combo3',\n data: { label: 'Combo C' },\n },\n {\n id: 'combo4',\n data: { label: 'Combo D' },\n style: { x: 58, y: 248 },\n },\n ],\n};\n\nconst graph = new Graph({\n container: 'container',\n height: 450,\n data,\n node: {\n style: {\n labelText: (d) => d.id,\n labelPlacement: 'center',\n labelFill: '#fff',\n labelFontSize: 10,\n },\n },\n combo: {\n type: 'circle',\n style: {\n padding: 2,\n labelText: (d) => d.data.label,\n labelPlacement: 'top',\n },\n },\n behaviors: [\n 'collapse-expand',\n {\n type: 'drag-element',\n dropEffect: 'link',\n },\n ],\n});\n\ngraph.render();\n```\n\n## Combo 交互\n\n只是简单地将 Combo 渲染出来，并没有多大的实用价值，只有支持一系列的交互操作后，才能最大程度地体现 Combo 的价值。\n\n在 G6 中，我们内置了 `drag-element`、`collapse-expand` 三个交互。\n\n#### drag-element\n\n支持拖动节点和 Combo。拖动 Combo 过程中，会动态改变 Combo 中节点和边的位置，在拖拽完成以后，保持 Combo 和节点的相对位置不变。还可以通过设置 `dropEffect: 'link'` 在拖拽时改变 Combo 的从属关系。\n\n\n\n#### collapse-expand\n\n支持双击 Combo 收起和展开 Combo ，收起 Combo 以后，隐藏 Combo 中的所有节点，外部节点和 Combo 中节点有连线的情况下，所有连接会连接到 Combo 上面。\n\n\n\n## 自定义组合\n\n当内置组合无法满足需求时，G6 提供了强大的自定义能力：\n\n- 继承内置组合进行扩展\n- 创建全新的组合类型\n\n与组合不同，自定义组合需要先注册后使用。详细教程请参考 [自定义组合](/manual/element/combo/custom-combo) 文档。\n","packages/site/docs/manual/element/edge/BaseEdge.en.md":"---\ntitle: Edge Common Configuration\norder: 1\n---\n\nThis document introduces the built-in edge common property configurations.\n\n## EdgeOptions\n\n```js {5-9}\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n edge: {\n type: 'line', // Edge type\n style: {}, // Edge style\n state: {}, // State styles\n palette: {}, // Palette configuration\n animation: {}, // Animation configuration\n },\n});\n```\n\n| Property | Description | Type | Default | Required |\n| --------- | -------------------------------------------------------------- | ----------------------- | ------- | -------- |\n| type | Edge type, built-in edge type name or custom edge name | [Type](#type) | `line` | |\n| style | Edge style configuration, including color, thickness, etc. | [Style](#style) | - | |\n| state | Style configuration for different states | [State](#state) | - | |\n| palette | Define edge palette for mapping colors based on different data | [Palette](#palette) | - | |\n| animation | Define edge animation effects | [Animation](#animation) | - | |\n\n## Type\n\nSpecify the edge type, built-in edge type name or custom edge name. Default is `line` (straight line edge). **⚠️ Note**: This determines the shape of the main graphic.\n\n```js {3}\nconst graph = new Graph({\n edge: {\n type: 'polyline',\n },\n});\n```\n\n**⚠️ Dynamic Configuration Note**: The `type` property also supports dynamic configuration, allowing you to dynamically select edge types based on edge data:\n\n```js\nconst graph = new Graph({\n edge: {\n // Static configuration\n type: 'line',\n\n // Dynamic configuration - arrow function form\n type: (datum) => datum.data.edgeType || 'line',\n\n // Dynamic configuration - regular function form (can access graph instance)\n type: function (datum) {\n console.log(this); // graph instance\n return datum.data.importance > 5 ? 'polyline' : 'line';\n },\n },\n});\n```\n\nAvailable values:\n\n- `line`: [Straight line edge](/en/manual/element/edge/line)\n- `polyline`: [Polyline edge](/en/manual/element/edge/polyline)\n- `cubic`: [Cubic Bezier curve edge](/en/manual/element/edge/cubic)\n- `cubic-horizontal`: [Horizontal cubic Bezier curve edge](/en/manual/element/edge/cubic-horizontal)\n- `cubic-vertical`: [Vertical cubic Bezier curve edge](/en/manual/element/edge/cubic-vertical)\n- `quadratic`: [Quadratic Bezier curve edge](/en/manual/element/edge/quadratic)\n\n## Style\n\nDefine edge styles, including color, thickness, etc.\n\n```js {3}\nconst graph = new Graph({\n edge: {\n style: {},\n },\n});\n```\n\n**⚠️ Dynamic Configuration Note**: All the following style properties support dynamic configuration, meaning you can pass functions to dynamically calculate property values based on edge data:\n\n```js\nconst graph = new Graph({\n edge: {\n style: {\n // Static configuration\n stroke: '#1783FF',\n\n // Dynamic configuration - arrow function form\n lineWidth: (datum) => (datum.data.isImportant ? 3 : 1),\n\n // Dynamic configuration - regular function form (can access graph instance)\n lineDash: function (datum) {\n console.log(this); // graph instance\n return datum.data.type === 'dashed' ? [5, 5] : [];\n },\n\n // Nested properties also support dynamic configuration\n labelText: (datum) => `Edge: ${datum.id}`,\n endArrow: (datum) => datum.data.hasArrow,\n },\n },\n});\n```\n\nWhere the `datum` parameter is the edge data object (`EdgeData`), containing all data information of the edge.\n\nA complete edge consists of the following parts:\n\n![](\"https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*cVHVQJKLOlgAAAAAAAAAAAAADmJ7AQ/original\")
\n\n- `key`: The main graphic of the edge, representing the main path of the edge, such as straight lines, curves, etc.\n- `label`: Text label, usually used to display the name or description of the edge\n- `badge`: Badge on the edge\n- `halo`: The halo effect graphic displayed around the main graphic\n- `startArrow`: Arrow at the starting end of the edge\n- `endArrow`: Arrow at the ending end of the edge\n\nThe following style configurations will be explained by atomic graphics in order:\n\n### Main Graphic Styles\n\nThe main graphic is the core part of the edge, defining the basic path and appearance of the edge. Here are common configuration scenarios:\n\n#### Basic Style Configuration\n\nSet the basic appearance of the edge:\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 240,\n height: 100,\n autoFit: 'center',\n data: {\n nodes: [\n { id: 'node1', style: { x: 60, y: 40 } },\n { id: 'node2', style: { x: 180, y: 40 } },\n ],\n edges: [{ source: 'node1', target: 'node2' }],\n },\n edge: {\n style: {\n stroke: '#5B8FF9', // Blue edge\n lineWidth: 2, // Edge width\n },\n },\n});\n\ngraph.render();\n```\n\n#### Dashed Line Style\n\nCreate edges with dashed line style:\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 240,\n height: 100,\n autoFit: 'center',\n data: {\n nodes: [\n { id: 'node1', style: { x: 60, y: 40 } },\n { id: 'node2', style: { x: 180, y: 40 } },\n ],\n edges: [{ source: 'node1', target: 'node2' }],\n },\n edge: {\n style: {\n stroke: '#F5222D',\n lineWidth: 2,\n lineDash: [6, 4], // Dashed line style\n lineDashOffset: 0,\n },\n },\n});\n\ngraph.render();\n```\n\n#### Shadow Effect\n\nAdd shadow effect to edges:\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 240,\n height: 100,\n autoFit: 'center',\n data: {\n nodes: [\n { id: 'node1', style: { x: 60, y: 40 } },\n { id: 'node2', style: { x: 180, y: 40 } },\n ],\n edges: [{ source: 'node1', target: 'node2' }],\n },\n edge: {\n style: {\n stroke: '#722ED1',\n lineWidth: 3,\n shadowColor: 'rgba(114, 46, 209, 0.3)',\n shadowBlur: 8,\n shadowOffsetX: 2,\n shadowOffsetY: 2,\n },\n },\n});\n\ngraph.render();\n```\n\nThe following is the complete main graphic style configuration:\n\n| Property | Description | Type | Default | Required |\n| ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | --------------------- | --------- | -------- |\n| cursor | Mouse cursor style when hovering over edge, [options](#cursor) | string | `default` | |\n| increasedLineWidthForHitTesting | When lineWidth is small, the interactive area also becomes small. We can increase this area to make \"thin lines\" easier to pick up | number | 0 | |\n| lineDash | Edge dash line style | number[] | - | |\n| lineDashOffset | Edge dash line offset | number | 0 | |\n| lineWidth | Edge width | number | 1 | |\n| opacity | Edge opacity | number \\| string | 1 | |\n| pointerEvents | How edge responds to pointer events, [options](#pointerevents) | string | `auto` | |\n| shadowBlur | Edge shadow blur | number | - | |\n| shadowColor | Edge shadow color | string | - | |\n| shadowOffsetX | Edge shadow offset in x direction | number \\| string | - | |\n| shadowOffsetY | Edge shadow offset in y direction | number \\| string | - | |\n| shadowType | Edge shadow type | `inner` \\| `outer` | `outer` | |\n| sourcePort | Connection port at the source end of the edge | string | - | |\n| stroke | Edge color | string | `#000` | |\n| strokeOpacity | Edge color opacity | number \\| string | 1 | |\n| targetPort | Connection port at the target end of the edge | string | - | |\n| transform | Transform property allows you to rotate, scale, skew, or translate the given edge | string | - | |\n| transformOrigin | The center of rotation and scaling, also known as the transform center | string | - | |\n| visibility | Whether the edge is visible | `visible` \\| `hidden` | `visible` | |\n| zIndex | Edge rendering layer | number | 1 | |\n\n#### PointerEvents\n\nThe `pointerEvents` property controls how graphics respond to interaction events. Refer to [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events).\n\nAvailable values: `visible` | `visiblepainted` | `visiblestroke` | `non-transparent-pixel` | `visiblefill` | `visible` | `painted` | `fill` | `stroke` | `all` | `none` | `auto` | `inherit` | `initial` | `unset`\n\nIn short, both `stroke` and `visibility` can independently or in combination affect hit testing behavior. Currently supports the following keywords:\n\n- **`auto`**: Default value, equivalent to `visiblepainted`\n- **`none`**: Never becomes a target for responding to events\n- **`visiblepainted`**: Responds to events only when the following conditions are met:\n - `visibility` is set to `visible`, i.e., the graphic is visible\n - Triggered in the graphic stroke area while `stroke` takes a non-`none` value\n- **`visiblestroke`**: Responds to events only when the following conditions are met:\n - `visibility` is set to `visible`, i.e., the graphic is visible\n - Triggered in the graphic stroke area, not affected by `stroke` value\n- **`visible`**: Responds to events only when the following conditions are met:\n - `visibility` is set to `visible`, i.e., the graphic is visible\n - Triggered in the graphic stroke area, not affected by `stroke` value\n- **`painted`**: Responds to events only when the following conditions are met:\n - Triggered in the graphic stroke area while `stroke` takes a non-`none` value\n - Not affected by `visibility` value\n- **`stroke`**: Responds to events only when the following conditions are met:\n - Triggered in the graphic stroke area, not affected by `stroke` value\n - Not affected by `visibility` value\n- **`all`**: Responds to events as long as entering the graphic stroke area, not affected by `stroke` or `visibility` values\n\n**Usage Examples:**\n\n```js\n// Example 1: Only stroke area responds to events\nconst graph = new Graph({\n edge: {\n style: {\n stroke: '#000',\n lineWidth: 2,\n pointerEvents: 'stroke', // Only stroke responds to events\n },\n },\n});\n\n// Example 2: Completely non-responsive to events\nconst graph = new Graph({\n edge: {\n style: {\n pointerEvents: 'none', // Edge does not respond to any events\n },\n },\n});\n```\n\n#### Cursor\n\nAvailable values: `auto` | `default` | `none` | `context-menu` | `help` | `pointer` | `progress` | `wait` | `cell` | `crosshair` | `text` | `vertical-text` | `alias` | `copy` | `move` | `no-drop` | `not-allowed` | `grab` | `grabbing` | `all-scroll` | `col-resize` | `row-resize` | `n-resize` | `e-resize` | `s-resize` | `w-resize` | `ne-resize` | `nw-resize` | `se-resize` | `sw-resize` | `ew-resize` | `ns-resize` | `nesw-resize` | `nwse-resize` | `zoom-in` | `zoom-out`\n\n### Label Styles\n\nLabels are used to display text information for edges, supporting various style configurations and layout options. Here are common usage scenarios:\n\n#### Basic Text Label\n\nThe simplest text label configuration:\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 240,\n height: 120,\n autoFit: 'center',\n data: {\n nodes: [\n { id: 'node1', style: { x: 60, y: 60 } },\n { id: 'node2', style: { x: 180, y: 60 } },\n ],\n edges: [{ source: 'node1', target: 'node2' }],\n },\n edge: {\n style: {\n labelText: 'Edge Label',\n labelFill: '#262626',\n labelFontSize: 12,\n labelPlacement: 'center',\n },\n },\n});\n\ngraph.render();\n```\n\n#### Multi-line Text Label\n\nWhen text is long, you can set automatic line wrapping:\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 240,\n height: 120,\n autoFit: 'center',\n data: {\n nodes: [\n { id: 'node1', style: { x: 60, y: 60 } },\n { id: 'node2', style: { x: 180, y: 60 } },\n ],\n edges: [{ source: 'node1', target: 'node2' }],\n },\n edge: {\n style: {\n labelText: 'This is a very long edge label that needs line wrapping',\n labelWordWrap: true,\n labelMaxWidth: '200%',\n labelMaxLines: 2,\n labelTextOverflow: 'ellipsis',\n labelFill: '#434343',\n labelPlacement: 'center',\n labelTextAlign: 'center',\n },\n },\n});\n\ngraph.render();\n```\n\n#### Label with Background\n\nAdd background to labels for better readability:\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 240,\n height: 120,\n autoFit: 'center',\n data: {\n nodes: [\n { id: 'node1', style: { x: 60, y: 60 } },\n { id: 'node2', style: { x: 180, y: 60 } },\n ],\n edges: [{ source: 'node1', target: 'node2' }],\n },\n edge: {\n style: {\n labelText: 'Important Connection',\n labelBackground: true,\n labelBackgroundFill: 'rgba(250, 140, 22, 0.1)',\n labelBackgroundRadius: 6,\n labelPadding: [4, 8],\n labelFill: '#D4380D',\n labelFontWeight: 'bold',\n labelPlacement: 'center',\n },\n },\n});\n\ngraph.render();\n```\n\n#### Auto-rotating Label\n\nLabels can automatically rotate to align with edge direction:\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 240,\n height: 120,\n autoFit: 'center',\n data: {\n nodes: [\n { id: 'node1', style: { x: 60, y: 30 } },\n { id: 'node2', style: { x: 180, y: 90 } },\n ],\n edges: [{ source: 'node1', target: 'node2' }],\n },\n edge: {\n style: {\n labelText: 'Auto Rotate',\n labelAutoRotate: true, // Auto rotate\n labelFill: '#1890FF',\n labelFontWeight: 'bold',\n labelPlacement: 'center',\n },\n },\n});\n\ngraph.render();\n```\n\nThe following is the complete label style configuration:\n\n| Property | Description | Type | Default | Required |\n| ------------------------ | --------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | --------- | -------- |\n| label | Whether to show edge label | boolean | true | |\n| labelAutoRotate | Whether edge label automatically rotates to align with edge direction | boolean | true | |\n| labelCursor | Mouse cursor style when hovering over edge label, [options](#cursor) | string | `default` | |\n| labelFill | Edge label text color | string | - | |\n| labelFontFamily | Edge label font family | string | - | |\n| labelFontSize | Edge label font size | number | 12 | |\n| labelFontStyle | Edge label font style | `normal` \\| `italic` \\| `oblique` | - | |\n| labelFontVariant | Edge label font variant | `normal` \\| `small-caps` \\| string | - | |\n| labelFontWeight | Edge label font weight | `normal` \\| `bold` \\| `bolder` \\| `lighter` \\| number | - | |\n| labelLeading | Line spacing | number | 0 | |\n| labelLetterSpacing | Edge label letter spacing | number \\| string | - | |\n| labelLineHeight | Edge label line height | number \\| string | - | |\n| labelMaxLines | Edge label maximum lines | number | 1 | |\n| labelMaxWidth | Edge label maximum width, [options](#labelmaxwidth) | number \\| string | `200%` | |\n| labelOffsetX | Edge label offset in x direction | number | 0 | |\n| labelOffsetY | Edge label offset in y direction | number | 0 | |\n| labelPadding | Edge label padding | number \\| number[] | 0 | |\n| labelPlacement | Edge label position relative to edge, [options](#labelplacement) | string \\| number | `center` | |\n| labelText | Edge label text content | `string` \\| `(datum) => string` | - | |\n| labelTextAlign | Edge label text horizontal alignment | `start` \\| `center` \\| `middle` \\| `end` \\| `left` \\| `right` | `left` | |\n| labelTextBaseline | Edge label text baseline | `top` \\| `hanging` \\| `middle` \\| `alphabetic` \\| `ideographic` \\| `bottom` | - | |\n| labelTextDecorationColor | Edge label text decoration line color | string | - | |\n| labelTextDecorationLine | Edge label text decoration line | string | - | |\n| labelTextDecorationStyle | Edge label text decoration line style | `solid` \\| `double` \\| `dotted` \\| `dashed` \\| `wavy` | - | |\n| labelTextOverflow | Edge label text overflow handling | `clip` \\| `ellipsis` \\| string | - | |\n| labelTextPath | Edge label text path | Path | - | |\n| labelWordWrap | Whether to enable automatic line wrapping for edge labels. When enabled, text exceeding labelMaxWidth will wrap | boolean | false | |\n| labelZIndex | Edge label rendering layer | number | 0 | |\n\n#### LabelPlacement\n\nEdge label position relative to the edge, can be set to:\n\n- `start`: Label positioned at the starting point of the edge\n- `center`: Label positioned at the center of the edge (default)\n- `end`: Label positioned at the ending point of the edge\n- `number`: Value range 0-1, representing the specific position ratio of the label on the edge, 0 for start position, 1 for end position\n\n#### LabelMaxWidth\n\nAfter enabling automatic line wrapping `labelWordWrap`, text exceeding this width will wrap:\n\n- string: Represents the maximum width defined as a percentage relative to the edge length. For example, `50%` means the label width does not exceed half the edge length\n- number: Represents the maximum width defined in pixels. For example, 100 means the label's maximum width is 100 pixels\n\nFor example, setting multi-line label text:\n\n```json\n{\n \"labelWordWrap\": true,\n \"labelMaxWidth\": 200,\n \"labelMaxLines\": 3\n}\n```\n\n### Label Background Styles\n\nLabel background is used to display the background of edge labels:\n\n| Property | Description | Type | Default |\n| ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | --------- |\n| labelBackground | Whether to show edge label background | boolean | false |\n| labelBackgroundCursor | Edge label background mouse cursor style, [options](#cursor) | string | `default` |\n| labelBackgroundFill | Edge label background fill color | string | - |\n| labelBackgroundFillOpacity | Edge label background opacity | number | 1 |\n| labelBackgroundHeight | Edge label background height | string \\| number | - |\n| labelBackgroundLineDash | Edge label background dash line configuration | number \\| string \\|(number \\| string )[] | - |\n| labelBackgroundLineDashOffset | Edge label background dash line offset | number | - |\n| labelBackgroundLineWidth | Edge label background stroke line width | number | - |\n| labelBackgroundRadius | Edge label background border radius - number: Uniform radius for all corners
- number[]: Individual radius for each corner, auto-filled if insufficient | number \\| number[] | 0 |\n| labelBackgroundShadowBlur | Edge label background shadow blur | number | - |\n| labelBackgroundShadowColor | Edge label background shadow color | string | - |\n| labelBackgroundShadowOffsetX | Edge label background shadow X offset | number | - |\n| labelBackgroundShadowOffsetY | Edge label background shadow Y offset | number | - |\n| labelBackgroundStroke | Edge label background stroke color | string | - |\n| labelBackgroundStrokeOpacity | Edge label background stroke opacity | number \\| string | 1 |\n| labelBackgroundVisibility | Edge label background visibility | `visible` \\| `hidden` | - |\n| labelBackgroundZIndex | Edge label background rendering layer | number | 1 |\n\n### Halo Styles\n\nHalo is an effect displayed around the edge main graphic, usually used for highlighting or indicating special states of the edge.\n\n#### Basic Halo Effect\n\nAdd basic halo effect to edges:\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 240,\n height: 100,\n autoFit: 'center',\n data: {\n nodes: [\n { id: 'node1', style: { x: 60, y: 50 } },\n { id: 'node2', style: { x: 180, y: 50 } },\n ],\n edges: [{ source: 'node1', target: 'node2' }],\n },\n edge: {\n style: {\n lineWidth: 2,\n halo: true,\n haloStroke: '#1890FF',\n haloLineWidth: 6,\n haloStrokeOpacity: 0.3,\n },\n },\n});\n\ngraph.render();\n```\n\nThe following is the complete halo style configuration:\n\n| Property | Description | Type | Default | Required |\n| ----------------- | ------------------------------------------------------------------------------------ | ---------------------- | ----------------------------------------- | -------- |\n| halo | Whether to show edge halo | boolean | false | |\n| haloCursor | Edge halo mouse cursor style, [options](#cursor) | string | `default` | |\n| haloDraggable | Whether edge halo allows dragging | boolean | true | |\n| haloDroppable | Whether edge halo allows receiving dragged elements | boolean | true | |\n| haloFillRule | Edge halo fill rule | `nonzero` \\| `evenodd` | - | |\n| haloFilter | Edge halo filter | string | - | |\n| haloLineWidth | Edge halo stroke width | number | 3 | |\n| haloPointerEvents | Whether edge halo responds to pointer events, [options](#pointerevents) | string | `none` | |\n| haloStroke | Edge halo stroke color, **this property sets the color of the halo around the edge** | string | Consistent with main graphic stroke color | |\n| haloStrokeOpacity | Edge halo stroke opacity | number | 0.25 | |\n| haloVisibility | Edge halo visibility | `visible` \\| `hidden` | `visible` | |\n| haloZIndex | Edge halo rendering layer | number | -1 | |\n\n### Arrow Styles\n\nEdges support adding arrows at the start and end points to indicate the directionality of the edge.\n\n#### Basic Arrow\n\nAdd basic arrow to the end of the edge:\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 240,\n height: 100,\n autoFit: 'center',\n data: {\n nodes: [\n { id: 'node1', style: { x: 60, y: 50 } },\n { id: 'node2', style: { x: 180, y: 50 } },\n ],\n edges: [{ source: 'node1', target: 'node2' }],\n },\n edge: {\n style: {\n stroke: '#1890FF',\n lineWidth: 2,\n endArrow: true, // End arrow\n endArrowType: 'vee', // Arrow type\n endArrowSize: 10, // Arrow size\n },\n },\n});\n\ngraph.render();\n```\n\n#### Bidirectional Arrows\n\nAdd arrows to both ends of the edge:\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 240,\n height: 100,\n autoFit: 'center',\n data: {\n nodes: [\n { id: 'node1', style: { x: 60, y: 50 } },\n { id: 'node2', style: { x: 180, y: 50 } },\n ],\n edges: [{ source: 'node1', target: 'node2' }],\n },\n edge: {\n style: {\n stroke: '#52C41A',\n lineWidth: 2,\n startArrow: true, // Start arrow\n startArrowType: 'circle',\n startArrowSize: 8,\n endArrow: true, // End arrow\n endArrowType: 'triangle',\n endArrowSize: 10,\n },\n },\n});\n\ngraph.render();\n```\n\n#### Custom Arrow Style\n\nCustomize arrow color and type:\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 240,\n height: 100,\n autoFit: 'center',\n data: {\n nodes: [\n { id: 'node1', style: { x: 60, y: 50 } },\n { id: 'node2', style: { x: 180, y: 50 } },\n ],\n edges: [{ source: 'node1', target: 'node2' }],\n },\n edge: {\n style: {\n stroke: '#722ED1',\n lineWidth: 3,\n endArrow: true,\n endArrowType: 'diamond', // Diamond arrow\n endArrowSize: 12,\n endArrowFill: '#FF4D4F', // Red arrow fill\n endArrowStroke: '#722ED1', // Arrow stroke color\n endArrowStrokeOpacity: 0.8,\n },\n },\n});\n\ngraph.render();\n```\n\n#### Start Arrow Style Configuration\n\n| Property | Description | Type | Default | Required |\n| ----------------------- | ------------------------------------------------------- | ------------------------------------------------------------------------------------ | ---------------------------------- | -------- |\n| startArrow | Whether to show edge start arrow | boolean | false | |\n| startArrowCursor | Edge start arrow mouse cursor style, [options](#cursor) | string | `default` | |\n| startArrowFill | Edge start arrow fill color | string | Default consistent with edge color | |\n| startArrowFillOpacity | Edge start arrow fill opacity | number | 1 | |\n| startArrowOffset | Edge start arrow offset | number | 0 | |\n| startArrowSize | Edge start arrow size | number \\| [number, number] | 10 | |\n| startArrowStroke | Edge start arrow stroke color | string | Default consistent with edge color | |\n| startArrowStrokeOpacity | Edge start arrow stroke opacity | number | 1 | |\n| startArrowType | Edge start arrow type | `triangle` \\| `circle` \\| `diamond` \\| `vee` \\| `rect` \\| `triangleRect` \\| `simple` | `vee` | |\n\n#### End Arrow Style Configuration\n\n| Property | Description | Type | Default | Required |\n| --------------------- | ----------------------------------------------------- | ------------------------------------------------------------------------------------ | ---------------------------------- | -------- |\n| endArrow | Whether to show edge end arrow | boolean | false | |\n| endArrowCursor | Edge end arrow mouse cursor style, [options](#cursor) | string | `default` | |\n| endArrowFill | Edge end arrow fill color | string | Default consistent with edge color | |\n| endArrowFillOpacity | Edge end arrow fill opacity | number | 1 | |\n| endArrowOffset | Edge end arrow offset | number | 0 | |\n| endArrowSize | Edge end arrow size | number \\| [number, number] | 10 | |\n| endArrowStroke | Edge end arrow stroke color | string | Default consistent with edge color | |\n| endArrowStrokeOpacity | Edge end arrow stroke opacity | number | 1 | |\n| endArrowType | Edge end arrow type | `triangle` \\| `circle` \\| `diamond` \\| `vee` \\| `rect` \\| `triangleRect` \\| `simple` | `vee` | |\n\n### Loop Edge Styles\n\nLoop edges are special edges where the start and end nodes are the same node.\n\n#### Basic Loop Edge\n\nCreate a basic loop edge:\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 100,\n autoFit: 'center',\n data: {\n nodes: [{ id: 'node1', style: { x: 100, y: 50 } }],\n edges: [{ source: 'node1', target: 'node1' }],\n },\n edge: {\n style: {\n stroke: '#1890FF',\n lineWidth: 2,\n endArrow: true,\n loopPlacement: 'top', // Loop position\n loopDist: 30, // Loop size\n },\n },\n});\n\ngraph.render();\n```\n\n#### Multiple Loop Edges\n\nCreate multiple loop edges at different positions for the same node:\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 120,\n autoFit: 'center',\n data: {\n nodes: [{ id: 'node1', style: { x: 100, y: 60 } }],\n edges: [\n { id: 'edge1', source: 'node1', target: 'node1' },\n { id: 'edge2', source: 'node1', target: 'node1' },\n { id: 'edge3', source: 'node1', target: 'node1' },\n ],\n },\n edge: {\n style: {\n lineWidth: 2,\n endArrow: true,\n loopPlacement: (datum) => {\n const placements = ['top', 'right', 'bottom'];\n return placements[parseInt(datum.id.slice(-1)) - 1];\n },\n loopDist: 25,\n stroke: (datum) => {\n const colors = ['#1890FF', '#52C41A', '#722ED1'];\n return colors[parseInt(datum.id.slice(-1)) - 1];\n },\n },\n },\n});\n\ngraph.render();\n```\n\nThe following is the complete loop edge style configuration:\n\n| Property | Description | Type | Default | Required |\n| ------------- | ------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ | -------- |\n| loop | Whether to enable loop edges | boolean | true | |\n| loopClockwise | Whether to draw the loop clockwise | boolean | true | |\n| loopDist | Distance from node edge to loop top, used to specify loop curvature | number | Default to max node size | |\n| loopPlacement | Loop edge position | `left` \\| `right` \\| `top` \\| `bottom` \\| `left-top` \\| `left-bottom` \\| `right-top` \\| `right-bottom` \\| `top-left` \\| `top-right` \\| `bottom-left` \\| `bottom-right` | `top` | |\n\n## State\n\nIn some interactive behaviors, such as clicking to select an edge or hovering to activate an edge, it's simply marking certain states on that element. To reflect these states in the visual space seen by end users, we need to set different graphic element styles for different states to respond to changes in the state of that graphic element.\n\nG6 provides several built-in states, including selected, highlight, active, inactive, and disabled. Additionally, it supports custom states to meet more specific needs. For each state, developers can define a set of style rules that will override the element's default styles.\n\n
![](\"https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*ebBlTpKu2WUAAAAAAAAAAAAADmJ7AQ/original\")
\n\nThe data structure is as follows:\n\n```typescript\ntype EdgeState = {\n [state: string]: EdgeStyle;\n};\n```\n\nFor example, when an edge is in the `focus` state, you can add a halo with a width of 6 and orange color.\n\n```js {4-9}\nconst graph = new Graph({\n edge: {\n state: {\n focus: {\n halo: true,\n haloLineWidth: 6,\n haloStroke: 'orange',\n haloStrokeOpacity: 0.6,\n },\n },\n },\n});\n```\n\nThe effect is shown in the following image:\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 300,\n height: 100,\n autoFit: 'center',\n data: {\n nodes: [{ id: 'node1' }, { id: 'node2' }],\n edges: [{ source: 'node1', target: 'node2', states: ['focus'] }],\n },\n edge: {\n state: {\n focus: {\n halo: true,\n haloLineWidth: 6,\n haloStroke: 'orange',\n },\n },\n },\n layout: {\n type: 'grid',\n cols: 2,\n },\n});\n\ngraph.render();\n```\n\n## Animation\n\nDefine edge animation effects. Supports the following two configuration methods:\n\n1. Disable all edge animations\n\n```json\n{\n \"edge\": {\n \"animation\": false\n }\n}\n```\n\n2. Configure stage animations\n\nStage animations refer to the animation effects when edges enter the canvas, update, or leave the canvas. Currently supported stages include:\n\n- `enter`: Animation when edge enters the canvas\n- `update`: Animation when edge updates\n- `exit`: Animation when edge leaves the canvas\n- `show`: Animation when edge shows from hidden state\n- `hide`: Animation when edge hides\n- `collapse`: Animation when edge collapses\n- `expand`: Animation when edge expands\n\nYou can refer to [Animation Paradigm](/en/manual/animation/animation#动画范式) to use animation syntax to configure edges, such as:\n\n```json\n{\n \"edge\": {\n \"animation\": {\n \"update\": [\n {\n \"fields\": [\"stroke\"], // Only animate stroke property during update\n \"duration\": 1000, // Animation duration\n \"easing\": \"linear\" // Easing function\n }\n ]\n }\n }\n}\n```\n\nYou can also use built-in animation effects:\n\n```json\n{\n \"edge\": {\n \"animation\": {\n \"enter\": \"fade\", // Use fade animation\n \"update\": \"path-in\", // Use path animation\n \"exit\": \"fade\" // Use fade animation\n }\n }\n}\n```\n\nYou can pass false to disable specific stage animations:\n\n```json\n{\n \"edge\": {\n \"animation\": {\n \"enter\": false // Disable edge entrance animation\n }\n }\n}\n```\n\n## Palette\n\nDefine the edge palette, which is a predefined edge color pool that is allocated according to rules and maps colors to the `stroke` property.\n\n> For palette definitions, please refer to [Palette](/en/manual/theme/palette).\n\n| Property | Description | Type | Default |\n| -------- | --------------------------------------------------------------------------------------------------------------------- | ----------------------------- | ------- |\n| color | Palette colors. If the palette is registered, you can directly specify its registration name, or accept a color array | string \\| string[] | - |\n| field | Specify the grouping field in element data. If not specified, defaults to using id as grouping field | string \\| ((datum) => string) | `id` |\n| invert | Whether to invert the palette | boolean | false |\n| type | Specify current palette type. - `group`: Discrete palette
- `value`: Continuous palette | `group` \\| `value` | `group` |\n\nFor example, to assign edge colors to a group of data by the `direction` field, making edges of the same category have the same color:\n\n```json\n{\n \"edge\": {\n \"palette\": {\n \"type\": \"group\",\n \"field\": \"direction\",\n \"color\": [\"#F08F56\", \"#00C9C9\", \"#D580FF\"]\n }\n }\n}\n```\n\nThe effect is shown in the following image:\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 600,\n height: 300,\n data: {\n nodes: new Array(6).fill(0).map((_, i) => ({ id: `node-${i + 1}` })),\n edges: [\n { source: 'node-1', target: 'node-2', data: { direction: 'out' } },\n { source: 'node-1', target: 'node-3', data: { direction: 'out' } },\n { source: 'node-1', target: 'node-4', data: { direction: 'out' } },\n { source: 'node-5', target: 'node-1', data: { direction: 'in' } },\n { source: 'node-6', target: 'node-1', data: { direction: 'in' } },\n ],\n },\n layout: {\n type: 'radial',\n unitRadius: 120,\n linkDistance: 120,\n },\n edge: {\n style: {\n endArrow: true,\n },\n palette: {\n type: 'group',\n field: 'direction',\n color: ['#F08F56', '#00C9C9'],\n },\n },\n});\n\ngraph.render();\n```\n\nYou can also use default configuration:\n\n```json\n{\n \"edge\": {\n \"palette\": \"tableau\" // tableau is the palette name, colors assigned by ID by default\n }\n}\n```\n\nThe effect is shown in the following image:\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 600,\n height: 300,\n data: {\n nodes: new Array(6).fill(0).map((_, i) => ({ id: `node-${i + 1}` })),\n edges: [\n { source: 'node-1', target: 'node-2', data: { direction: 'out' } },\n { source: 'node-1', target: 'node-3', data: { direction: 'out' } },\n { source: 'node-1', target: 'node-4', data: { direction: 'out' } },\n { source: 'node-5', target: 'node-1', data: { direction: 'in' } },\n { source: 'node-6', target: 'node-1', data: { direction: 'in' } },\n ],\n },\n layout: {\n type: 'radial',\n unitRadius: 120,\n linkDistance: 120,\n },\n edge: {\n style: {\n endArrow: true,\n },\n palette: 'tableau',\n },\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/element/edge/BaseEdge.zh.md":"---\ntitle: 边通用配置项\norder: 1\n---\n\n本文介绍内置边通用属性配置。\n\n## EdgeOptions\n\n```js {5-9}\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n edge: {\n type: 'line', // 边类型\n style: {}, // 边样式\n state: {}, // 状态样式\n palette: {}, // 色板配置\n animation: {}, // 动画配置\n },\n});\n```\n\n| 属性 | 描述 | 类型 | 默认值 | 必选 |\n| --------- | -------------------------------------- | ----------------------- | ------ | ---- |\n| type | 边类型，内置边类型名称或自定义边的名称 | [Type](#type) | `line` | |\n| style | 边样式配置，包括颜色、粗细等 | [Style](#style) | - | |\n| state | 不同状态下的样式配置 | [State](#state) | - | |\n| palette | 定义边的色板，用于根据不同数据映射颜色 | [Palette](#palette) | - | |\n| animation | 定义边的动画效果 | [Animation](#animation) | - | |\n\n## Type\n\n指定边类型，内置边类型名称或自定义边的名称。默认为 `line`（直线边）。**⚠️ 注意**：这里决定了主图形的形状。\n\n```js {3}\nconst graph = new Graph({\n edge: {\n type: 'polyline',\n },\n});\n```\n\n**⚠️ 动态配置说明**：`type` 属性同样支持动态配置，可以根据边数据动态选择边类型：\n\n```js\nconst graph = new Graph({\n edge: {\n // 静态配置\n type: 'line',\n\n // 动态配置 - 箭头函数形式\n type: (datum) => datum.data.edgeType || 'line',\n\n // 动态配置 - 普通函数形式（可访问 graph 实例）\n type: function (datum) {\n console.log(this); // graph 实例\n return datum.data.importance > 5 ? 'polyline' : 'line';\n },\n },\n});\n```\n\n可选值有：\n\n- `line`：[直线边](/manual/element/edge/line)\n- `polyline`：[折线边](/manual/element/edge/polyline)\n- `cubic`：[三次贝塞尔曲线边](/manual/element/edge/cubic)\n- `cubic-horizontal`：[水平三次贝塞尔曲线边](/manual/element/edge/cubic-horizontal)\n- `cubic-vertical`：[垂直三次贝塞尔曲线边](/manual/element/edge/cubic-vertical)\n- `quadratic`：[二次贝塞尔曲线边](/manual/element/edge/quadratic)\n\n## Style\n\n定义边的样式，包括颜色、粗细等。\n\n```js {3}\nconst graph = new Graph({\n edge: {\n style: {},\n },\n});\n```\n\n**⚠️ 动态配置说明**：以下所有样式属性都支持动态配置，即可以传入函数来根据边数据动态计算属性值：\n\n```js\nconst graph = new Graph({\n edge: {\n style: {\n // 静态配置\n stroke: '#1783FF',\n\n // 动态配置 - 箭头函数形式\n lineWidth: (datum) => (datum.data.isImportant ? 3 : 1),\n\n // 动态配置 - 普通函数形式（可访问 graph 实例）\n lineDash: function (datum) {\n console.log(this); // graph 实例\n return datum.data.type === 'dashed' ? [5, 5] : [];\n },\n\n // 嵌套属性也支持动态配置\n labelText: (datum) => `边: ${datum.id}`,\n endArrow: (datum) => datum.data.hasArrow,\n },\n },\n});\n```\n\n其中 `datum` 参数为边数据对象 (`EdgeData`)，包含边的所有数据信息。\n\n一个完整的边由以下几部分构成：\n\n
\n\n- `key` ：边的主图形，表示边的主要路径，例如直线、曲线等；\n- `label` ：文本标签，通常用于展示边的名称或描述；\n- `badge` ：边上的徽标；\n- `halo` ：主图形周围展示的光晕效果的图形；\n- `startArrow` ：边起始端的箭头；\n- `endArrow` ：边结束端的箭头。\n\n以下样式配置将按原子图形依次说明：\n\n### 主图形样式\n\n主图形是边的核心部分，定义了边的基本路径和外观。以下是常见的配置场景：\n\n#### 基础样式配置\n\n设置边的基本外观：\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 240,\n height: 100,\n data: {\n nodes: [\n { id: 'node1', style: { x: 60, y: 40 } },\n { id: 'node2', style: { x: 180, y: 40 } },\n ],\n edges: [{ source: 'node1', target: 'node2' }],\n },\n edge: {\n style: {\n stroke: '#5B8FF9', // 蓝色边\n lineWidth: 2, // 边宽度\n },\n },\n});\n\ngraph.render();\n```\n\n#### 虚线样式\n\n创建带虚线样式的边：\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 240,\n height: 100,\n data: {\n nodes: [\n { id: 'node1', style: { x: 60, y: 40 } },\n { id: 'node2', style: { x: 180, y: 40 } },\n ],\n edges: [{ source: 'node1', target: 'node2' }],\n },\n edge: {\n style: {\n stroke: '#F5222D',\n lineWidth: 2,\n lineDash: [6, 4], // 虚线样式\n lineDashOffset: 0,\n },\n },\n});\n\ngraph.render();\n```\n\n#### 阴影效果\n\n为边添加阴影效果：\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 240,\n height: 100,\n data: {\n nodes: [\n { id: 'node1', style: { x: 60, y: 40 } },\n { id: 'node2', style: { x: 180, y: 40 } },\n ],\n edges: [{ source: 'node1', target: 'node2' }],\n },\n edge: {\n style: {\n stroke: '#722ED1',\n lineWidth: 3,\n shadowColor: 'rgba(114, 46, 209, 0.3)',\n shadowBlur: 8,\n shadowOffsetX: 2,\n shadowOffsetY: 2,\n },\n },\n});\n\ngraph.render();\n```\n\n以下为完整的主图形样式配置：\n\n| 属性 | 描述 | 类型 | 默认值 | 必选 |\n| ------------------------------- | ----------------------------------------------------------------------------------------- | --------------------- | --------- | ---- |\n| cursor | 边鼠标移入样式，[配置项](#cursor) | string | `default` | |\n| increasedLineWidthForHitTesting | 当 lineWidth 较小时，可交互区域也随之变小，有时我们想增大这个区域，让\"细线\"更容易被拾取到 | number | 0 | |\n| lineDash | 边虚线样式 | number[] | - | |\n| lineDashOffset | 边虚线偏移量 | number | 0 | |\n| lineWidth | 边宽度 | number | 1 | |\n| opacity | 边透明度 | number \\| string | 1 | |\n| pointerEvents | 边如何响应指针事件，[配置项](#pointerevents) | string | `auto` | |\n| shadowBlur | 边阴影模糊度 | number | - | |\n| shadowColor | 边阴影颜色 | string | - | |\n| shadowOffsetX | 边阴影在 x 轴方向上的偏移量 | number \\| string | - | |\n| shadowOffsetY | 边阴影在 y 轴方向上的偏移量 | number \\| string | - | |\n| shadowType | 边阴影类型 | `inner` \\| `outer` | `outer` | |\n| sourcePort | 边起始连接的连接桩 | string | - | |\n| stroke | 边颜色 | string | `#000` | |\n| strokeOpacity | 边颜色透明度 | number \\| string | 1 | |\n| targetPort | 边终点连接的连接桩 | string | - | |\n| transform | transform 属性允许你旋转、缩放、倾斜或平移给定边 | string | - | |\n| transformOrigin | 旋转与缩放中心，也称作变换中心 | string | - | |\n| visibility | 边是否可见 | `visible` \\| `hidden` | `visible` | |\n| zIndex | 边渲染层级 | number | 1 | |\n\n#### PointerEvents\n\n`pointerEvents` 属性控制图形如何响应交互事件，可参考 [MDN 文档](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events)。\n\n可选值有：`visible` | `visiblepainted` | `visiblestroke` | `non-transparent-pixel` | `visiblefill` | `visible` | `painted` | `fill` | `stroke` | `all` | `none` | `auto` | `inherit` | `initial` | `unset`\n\n简而言之，`stroke` 和 `visibility` 都可以独立或组合影响拾取判定行为。目前支持以下关键词：\n\n- **`auto`**：默认值，等同于 `visiblepainted`\n- **`none`**：永远不会成为响应事件的目标\n- **`visiblepainted`**：满足以下条件才会响应事件：\n - `visibility` 设置为 `visible`，即图形为可见的\n - 在图形描边区域触发同时 `stroke` 取非 `none` 的值\n- **`visiblestroke`**：满足以下条件才会响应事件：\n - `visibility` 设置为 `visible`，即图形为可见的\n - 在图形描边区域触发，不受 `stroke` 取值的影响\n- **`visible`**：满足以下条件才会响应事件：\n - `visibility` 设置为 `visible`，即图形为可见的\n - 在图形描边区域触发，不受 `stroke` 取值的影响\n- **`painted`**：满足以下条件才会响应事件：\n - 在图形描边区域触发同时 `stroke` 取非 `none` 的值\n - 不受 `visibility` 取值的影响\n- **`stroke`**：满足以下条件才会响应事件：\n - 在图形描边区域触发，不受 `stroke` 取值的影响\n - 不受 `visibility` 取值的影响\n- **`all`**：只要进入图形的描边区域就会响应事件，不会受 `stroke`、`visibility` 的取值影响\n\n**使用示例：**\n\n```js\n// 示例1：只有描边区域响应事件\nconst graph = new Graph({\n edge: {\n style: {\n stroke: '#000',\n lineWidth: 2,\n pointerEvents: 'stroke', // 只有描边响应事件\n },\n },\n});\n\n// 示例2：完全不响应事件\nconst graph = new Graph({\n edge: {\n style: {\n pointerEvents: 'none', // 边不响应任何事件\n },\n },\n});\n```\n\n#### Cursor\n\n可选值有：`auto` | `default` | `none` | `context-menu` | `help` | `pointer` | `progress` | `wait` | `cell` | `crosshair` | `text` | `vertical-text` | `alias` | `copy` | `move` | `no-drop` | `not-allowed` | `grab` | `grabbing` | `all-scroll` | `col-resize` | `row-resize` | `n-resize` | `e-resize` | `s-resize` | `w-resize` | `ne-resize` | `nw-resize` | `se-resize` | `sw-resize` | `ew-resize` | `ns-resize` | `nesw-resize` | `nwse-resize` | `zoom-in` | `zoom-out`\n\n### 标签样式\n\n标签用于显示边的文本信息，支持多种样式配置和布局方式。以下是常见的使用场景：\n\n#### 基础文本标签\n\n最简单的文本标签配置：\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 240,\n height: 120,\n data: {\n nodes: [\n { id: 'node1', style: { x: 60, y: 60 } },\n { id: 'node2', style: { x: 180, y: 60 } },\n ],\n edges: [{ source: 'node1', target: 'node2' }],\n },\n edge: {\n style: {\n labelText: '边标签',\n labelFill: '#262626',\n labelFontSize: 12,\n labelPlacement: 'center',\n },\n },\n});\n\ngraph.render();\n```\n\n#### 多行文本标签\n\n当文本较长时，可以设置自动换行：\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 240,\n height: 120,\n data: {\n nodes: [\n { id: 'node1', style: { x: 60, y: 60 } },\n { id: 'node2', style: { x: 180, y: 60 } },\n ],\n edges: [{ source: 'node1', target: 'node2' }],\n },\n edge: {\n style: {\n labelText: '这是一个很长的边标签需要换行显示',\n labelWordWrap: true,\n labelMaxWidth: '200%',\n labelMaxLines: 2,\n labelTextOverflow: 'ellipsis',\n labelFill: '#434343',\n labelPlacement: 'center',\n labelTextAlign: 'center',\n },\n },\n});\n\ngraph.render();\n```\n\n#### 带背景的标签\n\n为标签添加背景，提高可读性：\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 240,\n height: 120,\n data: {\n nodes: [\n { id: 'node1', style: { x: 60, y: 60 } },\n { id: 'node2', style: { x: 180, y: 60 } },\n ],\n edges: [{ source: 'node1', target: 'node2' }],\n },\n edge: {\n style: {\n labelText: '重要连接',\n labelBackground: true,\n labelBackgroundFill: 'rgba(250, 140, 22, 0.1)',\n labelBackgroundRadius: 6,\n labelPadding: [4, 8],\n labelFill: '#D4380D',\n labelFontWeight: 'bold',\n labelPlacement: 'center',\n },\n },\n});\n\ngraph.render();\n```\n\n#### 自动旋转标签\n\n标签可以自动旋转以保持与边方向一致：\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 240,\n height: 120,\n data: {\n nodes: [\n { id: 'node1', style: { x: 60, y: 30 } },\n { id: 'node2', style: { x: 180, y: 90 } },\n ],\n edges: [{ source: 'node1', target: 'node2' }],\n },\n edge: {\n style: {\n labelText: '自动旋转',\n labelAutoRotate: true, // 自动旋转\n labelFill: '#1890FF',\n labelFontWeight: 'bold',\n labelPlacement: 'center',\n },\n },\n});\n\ngraph.render();\n```\n\n以下为完整的标签样式配置：\n\n| 属性 | 描述 | 类型 | 默认值 | 必选 |\n| ------------------------ | -------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | --------- | ---- |\n| label | 边标签是否显示 | boolean | true | |\n| labelAutoRotate | 边标签是否自动旋转，保持与边的方向一致 | boolean | true | |\n| labelCursor | 鼠标移入边标签时显示的样式，[配置项](#cursor) | string | `default` | |\n| labelFill | 边标签文字颜色 | string | - | |\n| labelFontFamily | 边标签字体族 | string | - | |\n| labelFontSize | 边标签字体大小 | number | 12 | |\n| labelFontStyle | 边标签字体样式 | `normal` \\| `italic` \\| `oblique` | - | |\n| labelFontVariant | 边标签字体变种 | `normal` \\| `small-caps` \\| string | - | |\n| labelFontWeight | 边标签字体粗细 | `normal` \\| `bold` \\| `bolder` \\| `lighter` \\| number | - | |\n| labelLeading | 行间距 | number | 0 | |\n| labelLetterSpacing | 边标签字间距 | number \\| string | - | |\n| labelLineHeight | 边标签行高 | number \\| string | - | |\n| labelMaxLines | 边标签最大行数 | number | 1 | |\n| labelMaxWidth | 边标签最大宽度，[配置项](#labelmaxwidth) | number \\| string | `200%` | |\n| labelOffsetX | 边标签在 x 轴方向上的偏移量 | number | 0 | |\n| labelOffsetY | 边标签在 y 轴方向上的偏移量 | number | 0 | |\n| labelPadding | 边标签内边距 | number \\| number[] | 0 | |\n| labelPlacement | 边标签相对于边的位置，[配置项](#labelplacement) | string \\| number | `center` | |\n| labelText | 边标签文字内容 | `string` \\| `(datum) => string` | - | |\n| labelTextAlign | 边标签文本水平对齐方式 | `start` \\| `center` \\| `middle` \\| `end` \\| `left` \\| `right` | `left` | |\n| labelTextBaseline | 边标签文本基线 | `top` \\| `hanging` \\| `middle` \\| `alphabetic` \\| `ideographic` \\| `bottom` | - | |\n| labelTextDecorationColor | 边标签文本装饰线颜色 | string | - | |\n| labelTextDecorationLine | 边标签文本装饰线 | string | - | |\n| labelTextDecorationStyle | 边标签文本装饰线样式 | `solid` \\| `double` \\| `dotted` \\| `dashed` \\| `wavy` | - | |\n| labelTextOverflow | 边标签文本溢出处理方式 | `clip` \\| `ellipsis` \\| string | - | |\n| labelTextPath | 边标签文本路径 | Path | - | |\n| labelWordWrap | 边标签是否开启自动折行。开启 labelWordWrap 后，超出 labelMaxWidth 的部分自动换行 | boolean | false | |\n| labelZIndex | 边标签渲染层级 | number | 0 | |\n\n#### LabelPlacement\n\n边标签相对于边的位置，可以设置为：\n\n- `start`：标签位于边的起始位置\n- `center`：标签位于边的中心位置（默认）\n- `end`：标签位于边的结束位置\n- `number`：取值范围为 0-1，表示标签在边上的具体位置比例，0 为起始位置，1 为结束位置\n\n#### LabelMaxWidth\n\n开启自动折行 `labelWordWrap` 后，超出该宽度则换行:\n\n- string: 表示以相对于边长度的百分比形式定义最大宽度。例如 `50%` 表示标签宽度不超过边长度的一半\n- number: 表示以像素值为单位定义最大宽度。例如 100 表示标签的最大宽度为 100 像素\n\n比如，设置多行标签文字：\n\n```json\n{\n \"labelWordWrap\": true,\n \"labelMaxWidth\": 200,\n \"labelMaxLines\": 3\n}\n```\n\n### 标签背景样式\n\n标签背景用于显示边标签的背景：\n\n| 属性 | 描述 | 类型 | 默认值 |\n| ----------------------------- | ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | --------- |\n| labelBackground | 边标签背景是否显示 | boolean | false |\n| labelBackgroundCursor | 边标签背景鼠标移入样式，[配置项](#cursor) | string | `default` |\n| labelBackgroundFill | 边标签背景填充色 | string | - |\n| labelBackgroundFillOpacity | 边标签背景透明度 | number | 1 |\n| labelBackgroundHeight | 边标签背景高度 | string \\| number | - |\n| labelBackgroundLineDash | 边标签背景虚线配置 | number \\| string \\|(number \\| string )[] | - |\n| labelBackgroundLineDashOffset | 边标签背景虚线偏移量 | number | - |\n| labelBackgroundLineWidth | 边标签背景描边线宽 | number | - |\n| labelBackgroundRadius | 边标签背景圆角半径 - number: 统一设置四个圆角半径
- number[]: 分别设置四个圆角半径，不足则自动补充 | number \\| number[] | 0 |\n| labelBackgroundShadowBlur | 边标签背景阴影模糊程度 | number | - |\n| labelBackgroundShadowColor | 边标签背景阴影颜色 | string | - |\n| labelBackgroundShadowOffsetX | 边标签背景阴影 X 方向偏移 | number | - |\n| labelBackgroundShadowOffsetY | 边标签背景阴影 Y 方向偏移 | number | - |\n| labelBackgroundStroke | 边标签背景描边颜色 | string | - |\n| labelBackgroundStrokeOpacity | 边标签背景描边透明度 | number \\| string | 1 |\n| labelBackgroundVisibility | 边标签背景是否可见 | `visible` \\| `hidden` | - |\n| labelBackgroundZIndex | 边标签背景渲染层级 | number | 1 |\n\n### 光晕样式\n\n光晕是围绕边主图形显示的效果，通常用于高亮显示或表示边的特殊状态。\n\n#### 基础光晕效果\n\n为边添加基本的光晕效果：\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 240,\n height: 100,\n data: {\n nodes: [\n { id: 'node1', style: { x: 60, y: 50 } },\n { id: 'node2', style: { x: 180, y: 50 } },\n ],\n edges: [{ source: 'node1', target: 'node2' }],\n },\n edge: {\n style: {\n lineWidth: 2,\n halo: true,\n haloStroke: '#1890FF',\n haloLineWidth: 6,\n haloStrokeOpacity: 0.3,\n },\n },\n});\n\ngraph.render();\n```\n\n以下为完整的光晕样式配置：\n\n| 属性 | 描述 | 类型 | 默认值 | 必选 |\n| ----------------- | ---------------------------------------------------- | ---------------------- | ------------------------------ | ---- |\n| halo | 边光晕是否显示 | boolean | false | |\n| haloCursor | 边光晕鼠标移入样式，[配置项](#cursor) | string | `default` | |\n| haloDraggable | 边光晕是否允许拖拽 | boolean | true | |\n| haloDroppable | 边光晕是否允许接收被拖拽的元素 | boolean | true | |\n| haloFillRule | 边光晕填充规则 | `nonzero` \\| `evenodd` | - | |\n| haloFilter | 边光晕滤镜 | string | - | |\n| haloLineWidth | 边光晕描边宽度 | number | 3 | |\n| haloPointerEvents | 边光晕效果是否响应指针事件，[配置项](#pointerevents) | string | `none` | |\n| haloStroke | 边光晕描边色，**此属性用于设置边周围光晕的颜色** | string | 与主图形的描边色 `stroke` 一致 | |\n| haloStrokeOpacity | 边光晕描边色透明度 | number | 0.25 | |\n| haloVisibility | 边光晕可见性 | `visible` \\| `hidden` | `visible` | |\n| haloZIndex | 边光晕渲染层级 | number | -1 | |\n\n### 箭头样式\n\n边支持在起始端和结束端添加箭头，用于表示边的方向性。\n\n#### 基础箭头\n\n为边的结束端添加基本箭头：\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 240,\n height: 100,\n data: {\n nodes: [\n { id: 'node1', style: { x: 60, y: 50 } },\n { id: 'node2', style: { x: 180, y: 50 } },\n ],\n edges: [{ source: 'node1', target: 'node2' }],\n },\n edge: {\n style: {\n stroke: '#1890FF',\n lineWidth: 2,\n endArrow: true, // 结束端箭头\n endArrowType: 'vee', // 箭头类型\n endArrowSize: 10, // 箭头大小\n },\n },\n});\n\ngraph.render();\n```\n\n#### 双向箭头\n\n为边的两端都添加箭头：\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 240,\n height: 100,\n data: {\n nodes: [\n { id: 'node1', style: { x: 60, y: 50 } },\n { id: 'node2', style: { x: 180, y: 50 } },\n ],\n edges: [{ source: 'node1', target: 'node2' }],\n },\n edge: {\n style: {\n stroke: '#52C41A',\n lineWidth: 2,\n startArrow: true, // 起始端箭头\n startArrowType: 'circle',\n startArrowSize: 8,\n endArrow: true, // 结束端箭头\n endArrowType: 'triangle',\n endArrowSize: 10,\n },\n },\n});\n\ngraph.render();\n```\n\n#### 自定义箭头样式\n\n自定义箭头的颜色和类型：\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 240,\n height: 100,\n data: {\n nodes: [\n { id: 'node1', style: { x: 60, y: 50 } },\n { id: 'node2', style: { x: 180, y: 50 } },\n ],\n edges: [{ source: 'node1', target: 'node2' }],\n },\n edge: {\n style: {\n stroke: '#722ED1',\n lineWidth: 3,\n endArrow: true,\n endArrowType: 'diamond', // 菱形箭头\n endArrowSize: 12,\n endArrowFill: '#FF4D4F', // 红色箭头填充\n endArrowStroke: '#722ED1', // 箭头描边颜色\n endArrowStrokeOpacity: 0.8,\n },\n },\n});\n\ngraph.render();\n```\n\n#### 起始箭头样式配置\n\n| 属性 | 描述 | 类型 | 默认值 | 必选 |\n| ----------------------- | ----------------------------------------- | ------------------------------------------------------------------------------------ | ------------------ | ---- |\n| startArrow | 边起始箭头是否显示 | boolean | false | |\n| startArrowCursor | 边起始箭头鼠标移入样式，[配置项](#cursor) | string | `default` | |\n| startArrowFill | 边起始箭头填充颜色 | string | 默认与边的颜色一致 | |\n| startArrowFillOpacity | 边起始箭头填充透明度 | number | 1 | |\n| startArrowOffset | 边起始箭头的偏移量 | number | 0 | |\n| startArrowSize | 边起始箭头大小 | number \\| [number, number] | 10 | |\n| startArrowStroke | 边起始箭头描边颜色 | string | 默认与边的颜色一致 | |\n| startArrowStrokeOpacity | 边起始箭头描边透明度 | number | 1 | |\n| startArrowType | 边起始箭头类型 | `triangle` \\| `circle` \\| `diamond` \\| `vee` \\| `rect` \\| `triangleRect` \\| `simple` | `vee` | |\n\n#### 结束箭头样式配置\n\n| 属性 | 描述 | 类型 | 默认值 | 必选 |\n| --------------------- | ----------------------------------------- | ------------------------------------------------------------------------------------ | ------------------ | ---- |\n| endArrow | 边结束箭头是否显示 | boolean | false | |\n| endArrowCursor | 边结束箭头鼠标移入样式，[配置项](#cursor) | string | `default` | |\n| endArrowFill | 边结束箭头填充颜色 | string | 默认与边的颜色一致 | |\n| endArrowFillOpacity | 边结束箭头填充透明度 | number | 1 | |\n| endArrowOffset | 边结束箭头的偏移量 | number | 0 | |\n| endArrowSize | 边结束箭头大小 | number \\| [number, number] | 10 | |\n| endArrowStroke | 边结束箭头描边颜色 | string | 默认与边的颜色一致 | |\n| endArrowStrokeOpacity | 边结束箭头描边透明度 | number | 1 | |\n| endArrowType | 边结束箭头类型 | `triangle` \\| `circle` \\| `diamond` \\| `vee` \\| `rect` \\| `triangleRect` \\| `simple` | `vee` | |\n\n### 自环边样式\n\n自环边是指起始节点和结束节点为同一个节点的特殊边。\n\n#### 基础自环边\n\n创建基本的自环边：\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 100,\n data: {\n nodes: [{ id: 'node1', style: { x: 100, y: 50 } }],\n edges: [{ source: 'node1', target: 'node1' }],\n },\n edge: {\n style: {\n stroke: '#1890FF',\n lineWidth: 2,\n endArrow: true,\n loopPlacement: 'top', // 自环位置\n loopDist: 30, // 自环大小\n },\n },\n});\n\ngraph.render();\n```\n\n#### 多个自环边\n\n为同一节点创建多个不同位置的自环边：\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 120,\n data: {\n nodes: [{ id: 'node1', style: { x: 100, y: 60 } }],\n edges: [\n { id: 'edge1', source: 'node1', target: 'node1' },\n { id: 'edge2', source: 'node1', target: 'node1' },\n { id: 'edge3', source: 'node1', target: 'node1' },\n ],\n },\n edge: {\n style: {\n lineWidth: 2,\n endArrow: true,\n loopPlacement: (datum) => {\n const placements = ['top', 'right', 'bottom'];\n return placements[parseInt(datum.id.slice(-1)) - 1];\n },\n loopDist: 25,\n stroke: (datum) => {\n const colors = ['#1890FF', '#52C41A', '#722ED1'];\n return colors[parseInt(datum.id.slice(-1)) - 1];\n },\n },\n },\n});\n\ngraph.render();\n```\n\n以下为完整的自环边样式配置：\n\n| 属性 | 描述 | 类型 | 默认值 | 必选 |\n| ------------- | ---------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | ---- |\n| loop | 是否启用自环边 | boolean | true | |\n| loopClockwise | 指定是否顺时针绘制环 | boolean | true | |\n| loopDist | 从节点边缘到自环顶部的距离，用于指定自环的曲率 | number | 默认为节点尺寸的最大值 | |\n| loopPlacement | 自环边的位置 | `left` \\| `right` \\| `top` \\| `bottom` \\| `left-top` \\| `left-bottom` \\| `right-top` \\| `right-bottom` \\| `top-left` \\| `top-right` \\| `bottom-left` \\| `bottom-right` | `top` | |\n\n## State\n\n在一些交互行为中，比如点击选中一个边或鼠标悬停激活一个边，仅仅是在该元素做了某些状态的标识。为了将这些状态反应到终端用户所见的视觉空间中，我们需要为不同的状态设置不同的图元素样式，以响应该图元素状态的变化。\n\nG6 提供了几种内置的状态，包括选中（selected）、高亮（highlight）、激活（active）、不活跃（inactive）和禁用（disabled）。此外，它还支持自定义状态，以满足更特定的需求。对于每个状态，开发者可以定义一套样式规则，这些规则会覆盖元素的默认样式。\n\n
\n\n数据结构如下：\n\n```typescript\ntype EdgeState = {\n [state: string]: EdgeStyle;\n};\n```\n\n例如，当边处于 `focus` 状态时，可以为其添加一个宽度为 6 且颜色为橙色的光晕。\n\n```js {4-9}\nconst graph = new Graph({\n edge: {\n state: {\n focus: {\n halo: true,\n haloLineWidth: 6,\n haloStroke: 'orange',\n haloStrokeOpacity: 0.6,\n },\n },\n },\n});\n```\n\n效果如下图所示：\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 300,\n height: 100,\n data: {\n nodes: [{ id: 'node1' }, { id: 'node2' }],\n edges: [{ source: 'node1', target: 'node2', states: ['focus'] }],\n },\n edge: {\n state: {\n focus: {\n halo: true,\n haloLineWidth: 6,\n haloStroke: 'orange',\n },\n },\n },\n layout: {\n type: 'grid',\n cols: 2,\n },\n});\n\ngraph.render();\n```\n\n## Animation\n\n定义边的动画效果，支持下列两种配置方式：\n\n1. 关闭边全部动画\n\n```json\n{\n \"edge\": {\n \"animation\": false\n }\n}\n```\n\n2. 配置阶段动画\n\n阶段动画是指边在进入画布、更新、离开画布时的动画效果。目前支持的阶段包括：\n\n- `enter`: 边进入画布时的动画\n- `update`: 边更新时的动画\n- `exit`: 边离开画布时的动画\n- `show`: 边从隐藏状态显示时的动画\n- `hide`: 边隐藏时的动画\n- `collapse`: 边收起时的动画\n- `expand`: 边展开时的动画\n\n你可以参考 [动画范式](/manual/animation/animation#动画范式) 使用动画语法来配置边，如：\n\n```json\n{\n \"edge\": {\n \"animation\": {\n \"update\": [\n {\n \"fields\": [\"stroke\"], // 更新时只对 stroke 属性进行动画\n \"duration\": 1000, // 动画持续时间\n \"easing\": \"linear\" // 缓动函数\n }\n ]\n }\n }\n}\n```\n\n也可以使用内置的动画效果：\n\n```json\n{\n \"edge\": {\n \"animation\": {\n \"enter\": \"fade\", // 使用渐变动画\n \"update\": \"path-in\", // 使用路径动画\n \"exit\": \"fade\" // 使用渐变动画\n }\n }\n}\n```\n\n你可以传入 false 来关闭特定阶段的动画：\n\n```json\n{\n \"edge\": {\n \"animation\": {\n \"enter\": false // 关闭边入场动画\n }\n }\n}\n```\n\n## Palette\n\n定义边的色板，即预定义边颜色池，并根据规则进行分配，将颜色映射到 `stroke` 属性。\n\n> 有关色板的定义，请参考 [色板](/manual/theme/palette)。\n\n| 属性 | 描述 | 类型 | 默认值 |\n| ------ | ------------------------------------------------------------------- | ----------------------------- | ------- |\n| color | 色板颜色。如果色板注册过，可以直接指定其注册名，也接受一个颜色数组 | string \\| string[] | - |\n| field | 指定元素数据中的分组字段。若不指定，默认取 id 作为分组字段 | string \\| ((datum) => string) | `id` |\n| invert | 是否反转色板 | boolean | false |\n| type | 指定当前色板类型。- `group`: 离散色板
- `value`: 连续色板 | `group` \\| `value` | `group` |\n\n如将一组数据按 `direction` 字段分配边颜色，使得同类别的边颜色相同：\n\n```json\n{\n \"edge\": {\n \"palette\": {\n \"type\": \"group\",\n \"field\": \"direction\",\n \"color\": [\"#F08F56\", \"#00C9C9\", \"#D580FF\"]\n }\n }\n}\n```\n\n效果如下图所示：\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 600,\n height: 300,\n data: {\n nodes: new Array(6).fill(0).map((_, i) => ({ id: `node-${i + 1}` })),\n edges: [\n { source: 'node-1', target: 'node-2', data: { direction: 'out' } },\n { source: 'node-1', target: 'node-3', data: { direction: 'out' } },\n { source: 'node-1', target: 'node-4', data: { direction: 'out' } },\n { source: 'node-5', target: 'node-1', data: { direction: 'in' } },\n { source: 'node-6', target: 'node-1', data: { direction: 'in' } },\n ],\n },\n layout: {\n type: 'radial',\n unitRadius: 120,\n linkDistance: 120,\n },\n edge: {\n style: {\n endArrow: true,\n },\n palette: {\n type: 'group',\n field: 'direction',\n color: ['#F08F56', '#00C9C9'],\n },\n },\n});\n\ngraph.render();\n```\n\n也可以使用默认配置：\n\n```json\n{\n \"edge\": {\n \"palette\": \"tableau\" // tableau 为色板名，默认根据 ID 分配颜色\n }\n}\n```\n\n效果如下图所示：\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 600,\n height: 300,\n data: {\n nodes: new Array(6).fill(0).map((_, i) => ({ id: `node-${i + 1}` })),\n edges: [\n { source: 'node-1', target: 'node-2', data: { direction: 'out' } },\n { source: 'node-1', target: 'node-3', data: { direction: 'out' } },\n { source: 'node-1', target: 'node-4', data: { direction: 'out' } },\n { source: 'node-5', target: 'node-1', data: { direction: 'in' } },\n { source: 'node-6', target: 'node-1', data: { direction: 'in' } },\n ],\n },\n layout: {\n type: 'radial',\n unitRadius: 120,\n linkDistance: 120,\n },\n edge: {\n style: {\n endArrow: true,\n },\n palette: 'tableau',\n },\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/element/edge/Cubic.en.md":"---\ntitle: Cubic Bezier Curve Edge\norder: 2\n---\n\n## Overview\n\nA cubic Bezier curve is a versatile smooth curve with control points that can be freely distributed, suitable for connecting nodes in any direction.\n\nUse cases:\n\n- Suitable for graphs with any layout, such as network graphs and relationship graphs.\n\n- Use when smooth node connections are needed without specific directional requirements.\n\n## Online Experience\n\n\n\n## Style Configuration\n\n> If the element has specific attributes, we will list them below. For all general style attributes, see [BaseEdge](/en/manual/element/edge/base-edge)\n\n| Attribute | Description | Type | Default | Required |\n| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ------- | -------- |\n| controlPoints | Array of control points used to define the shape of the curve. If not specified, control points will be calculated using `curveOffset` and `curvePosition`. | [[Point](#point), [Point](#point)] | - | |\n| curvePosition | Relative position of the control point on the line connecting the two endpoints, ranging from `0-1`. | number | number[] | 0.5 | |\n| curveOffset | Distance of the control point from the line connecting the two endpoints, understood as the degree of curve bending. | number | number[] | 20 | |\n\n#### Point\n\n```typescript\ntype Point = [number, number] | [number, number, number] | Float32Array;\n```\n\n## Example\n\n### Built-in Cubic Bezier Curve Edge Effect\n\n```js | ob { inject: true }\nimport { Graph, iconfont } from '@antv/g6';\n\nconst style = document.createElement('style');\nstyle.innerHTML = `@import url('${iconfont.css}');`;\ndocument.head.appendChild(style);\n\nconst data = {\n nodes: [\n {\n id: 'node1',\n },\n {\n id: 'node2',\n },\n {\n id: 'node3',\n },\n {\n id: 'node4',\n },\n {\n id: 'node5',\n },\n {\n id: 'node6',\n },\n ],\n edges: [\n {\n id: 'line-default',\n source: 'node1',\n target: 'node2',\n },\n {\n id: 'line-active',\n source: 'node1',\n target: 'node3',\n states: ['active'],\n },\n {\n id: 'line-selected',\n source: 'node1',\n target: 'node4',\n states: ['selected'],\n },\n {\n id: 'line-highlight',\n source: 'node1',\n target: 'node5',\n states: ['highlight'],\n },\n {\n id: 'line-inactive',\n source: 'node1',\n target: 'node6',\n states: ['inactive'],\n },\n ],\n};\n\nconst graph = new Graph({\n container: 'container',\n data,\n edge: {\n type: 'cubic',\n style: {\n labelText: (d) => d.id,\n labelBackground: true,\n endArrow: true,\n badge: true,\n badgeText: '\\ue603',\n badgeFontFamily: 'iconfont',\n badgeBackgroundWidth: 12,\n badgeBackgroundHeight: 12,\n },\n },\n layout: {\n type: 'radial',\n unitRadius: 220,\n linkDistance: 220,\n },\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/element/edge/Cubic.zh.md":"---\ntitle: 三次贝塞尔曲线边 Cubic\norder: 2\n---\n\n## 概述\n\n三次贝塞尔曲线是一种通用的平滑曲线，其控制点可以自由分布，适合连接任意方向的节点。\n\n使用场景：\n\n- 适用于任意布局的图，如网络图、关系图。\n\n- 当需要平滑连接节点且无特定方向要求时使用。\n\n## 在线体验\n\n\n\n## 样式配置\n\n> 如果元素有其特定的属性，我们将在下面列出。对于所有的通用样式属性，见 [BaseEdge](/manual/element/edge/base-edge)\n\n| 属性 | 描述 | 类型 | 默认值 | 必选 |\n| ------------- | -------------------------------------------------------------------------------------------------- | ---------------------------------- | ------ | ---- |\n| controlPoints | 控制点数组，用于定义曲线的形状。如果不指定，将会通过 `curveOffset` 和 `curvePosition` 来计算控制点 | [[Point](#point), [Point](#point)] | - | |\n| curvePosition | 控制点在两端点连线上的相对位置，范围为`0-1` | number | number[] | 0.5 | |\n| curveOffset | 控制点距离两端点连线的距离，可理解为控制边的弯曲程度 | number | number[] | 20 | |\n\n#### Point\n\n```typescript\ntype Point = [number, number] | [number, number, number] | Float32Array;\n```\n\n## 示例\n\n### 内置三次贝塞尔曲线边效果\n\n```js | ob { inject: true }\nimport { Graph, iconfont } from '@antv/g6';\n\nconst style = document.createElement('style');\nstyle.innerHTML = `@import url('${iconfont.css}');`;\ndocument.head.appendChild(style);\n\nconst data = {\n nodes: [\n {\n id: 'node1',\n },\n {\n id: 'node2',\n },\n {\n id: 'node3',\n },\n {\n id: 'node4',\n },\n {\n id: 'node5',\n },\n {\n id: 'node6',\n },\n ],\n edges: [\n {\n id: 'line-default',\n source: 'node1',\n target: 'node2',\n },\n {\n id: 'line-active',\n source: 'node1',\n target: 'node3',\n states: ['active'],\n },\n {\n id: 'line-selected',\n source: 'node1',\n target: 'node4',\n states: ['selected'],\n },\n {\n id: 'line-highlight',\n source: 'node1',\n target: 'node5',\n states: ['highlight'],\n },\n {\n id: 'line-inactive',\n source: 'node1',\n target: 'node6',\n states: ['inactive'],\n },\n ],\n};\n\nconst graph = new Graph({\n container: 'container',\n data,\n edge: {\n type: 'cubic',\n style: {\n labelText: (d) => d.id,\n labelBackground: true,\n endArrow: true,\n badge: true,\n badgeText: '\\ue603',\n badgeFontFamily: 'iconfont',\n badgeBackgroundWidth: 12,\n badgeBackgroundHeight: 12,\n },\n },\n layout: {\n type: 'radial',\n unitRadius: 220,\n linkDistance: 220,\n },\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/element/edge/CubicHorizontal.en.md":"---\ntitle: CubicHorizontal Bezier Curve Edge\norder: 3\n---\n\n## Overview\n\nThe horizontal cubic Bezier curve is a smooth curve with control points primarily distributed along the horizontal direction, suitable for connecting nodes horizontally.\n\nUse cases:\n\n- Suitable for horizontally laid-out graphs, such as flowcharts and hierarchical diagrams.\n\n- Use when emphasizing horizontal connections is needed.\n\n> Note: When calculating control points, the distance on the x-axis is primarily considered, ignoring changes on the y-axis.\n\n## Online Experience\n\n\n\n## Style Configuration\n\n> If the element has specific attributes, we will list them below. For all general style attributes, see [BaseEdge](/en/manual/element/edge/base-edge)\n\n| Attribute | Description | Type | Default | Required |\n| ------------- | -------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------- | -------- |\n| curvePosition | Relative position of the control point on the line connecting the two endpoints, ranging from `0-1`. | number | number[] | [0.5,0.5] | |\n| curveOffset | Distance of the control point from the line connecting the two endpoints, understood as the degree of curve bending. | number | number[] | [0,0] | |\n\n## Example\n\n### Built-in Horizontal Cubic Bezier Curve Edge Effect\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst data = {\n nodes: [\n {\n id: 'node1',\n },\n {\n id: 'node2',\n },\n {\n id: 'node3',\n },\n {\n id: 'node4',\n },\n {\n id: 'node5',\n },\n {\n id: 'node6',\n },\n ],\n edges: [\n {\n id: 'line-default',\n source: 'node1',\n target: 'node2',\n },\n {\n id: 'line-active',\n source: 'node1',\n target: 'node3',\n states: ['active'],\n },\n {\n id: 'line-selected',\n source: 'node1',\n target: 'node4',\n states: ['selected'],\n },\n {\n id: 'line-highlight',\n source: 'node1',\n target: 'node5',\n states: ['highlight'],\n },\n {\n id: 'line-inactive',\n source: 'node1',\n target: 'node6',\n states: ['inactive'],\n },\n ],\n};\n\nconst graph = new Graph({\n container: 'container',\n data,\n node: {\n style: {\n port: true,\n ports: [{ placement: 'right' }, { placement: 'left' }],\n },\n },\n edge: {\n type: 'cubic-horizontal',\n style: {\n labelText: (d) => d.id,\n labelBackground: true,\n endArrow: true,\n },\n },\n layout: {\n type: 'antv-dagre',\n rankdir: 'LR',\n nodesep: 20,\n ranksep: 120,\n },\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/element/edge/CubicHorizontal.zh.md":"---\ntitle: 水平三次贝塞尔曲线边 CubicHorizontal\norder: 3\n---\n\n## 概述\n\n水平三次贝塞尔曲线是一种平滑的曲线，其控制点主要沿水平方向分布，适合在水平方向上连接节点。\n\n使用场景：\n\n- 适用于水平布局的图，如流程图、层次结构图。\n\n- 当需要强调水平方向的连接关系时使用。\n\n> 特别注意，计算控制点时主要考虑 x 轴上的距离，忽略 y 轴的变化\n\n## 在线体验\n\n\n\n## 样式配置\n\n> 如果元素有其特定的属性，我们将在下面列出。对于所有的通用样式属性，见 [BaseEdge](/manual/element/edge/base-edge)\n\n| 属性 | 描述 | 类型 | 默认值 | 必选 |\n| ------------- | ---------------------------------------------------- | ---------------------- | --------- | ---- |\n| curvePosition | 控制点在两端点连线上的相对位置，范围为`0-1` | number | number[] | [0.5,0.5] | |\n| curveOffset | 控制点距离两端点连线的距离，可理解为控制边的弯曲程度 | number | number[] | [0,0] | |\n\n## 示例\n\n### 内置水平三次贝塞尔曲线边效果\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst data = {\n nodes: [\n {\n id: 'node1',\n },\n {\n id: 'node2',\n },\n {\n id: 'node3',\n },\n {\n id: 'node4',\n },\n {\n id: 'node5',\n },\n {\n id: 'node6',\n },\n ],\n edges: [\n {\n id: 'line-default',\n source: 'node1',\n target: 'node2',\n },\n {\n id: 'line-active',\n source: 'node1',\n target: 'node3',\n states: ['active'],\n },\n {\n id: 'line-selected',\n source: 'node1',\n target: 'node4',\n states: ['selected'],\n },\n {\n id: 'line-highlight',\n source: 'node1',\n target: 'node5',\n states: ['highlight'],\n },\n {\n id: 'line-inactive',\n source: 'node1',\n target: 'node6',\n states: ['inactive'],\n },\n ],\n};\n\nconst graph = new Graph({\n container: 'container',\n data,\n node: {\n style: {\n port: true,\n ports: [{ placement: 'right' }, { placement: 'left' }],\n },\n },\n edge: {\n type: 'cubic-horizontal',\n style: {\n labelText: (d) => d.id,\n labelBackground: true,\n endArrow: true,\n },\n },\n layout: {\n type: 'antv-dagre',\n rankdir: 'LR',\n nodesep: 20,\n ranksep: 120,\n },\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/element/edge/CubicVertical.en.md":"---\ntitle: CubicVertical Bezier Curve Edge\norder: 4\n---\n\n## Overview\n\nThe vertical cubic Bezier curve is a smooth curve with control points primarily distributed along the vertical direction, suitable for connecting nodes vertically.\n\nUse cases:\n\n- Suitable for vertically laid-out graphs, such as organizational charts and tree diagrams.\n\n- Use when emphasizing vertical connections is needed.\n\n**Note: When calculating control points, the distance on the y-axis is primarily considered, ignoring changes on the x-axis.**\n\n## Online Experience\n\n\n\n## Style Configuration\n\n> If the element has specific attributes, we will list them below. For all general style attributes, see [BaseEdge](/en/manual/element/edge/base-edge)\n\n| Attribute | Description | Type | Default | Required |\n| ------------- | -------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------- | -------- |\n| curvePosition | Relative position of the control point on the line connecting the two endpoints, ranging from `0-1`. | number | number[] | [0.5,0.5] | |\n| curveOffset | Distance of the control point from the line connecting the two endpoints, understood as the degree of curve bending. | number | number[] | [0,0] | |\n\n## Example\n\n### Built-in Vertical Cubic Bezier Curve Edge Effect\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst data = {\n nodes: [\n {\n id: 'node1',\n },\n {\n id: 'node2',\n },\n {\n id: 'node3',\n },\n {\n id: 'node4',\n },\n {\n id: 'node5',\n },\n {\n id: 'node6',\n },\n ],\n edges: [\n {\n id: 'line-default',\n source: 'node1',\n target: 'node2',\n },\n {\n id: 'line-active',\n source: 'node1',\n target: 'node3',\n states: ['active'],\n },\n {\n id: 'line-selected',\n source: 'node1',\n target: 'node4',\n states: ['selected'],\n },\n {\n id: 'line-highlight',\n source: 'node1',\n target: 'node5',\n states: ['highlight'],\n },\n {\n id: 'line-inactive',\n source: 'node1',\n target: 'node6',\n states: ['inactive'],\n },\n ],\n};\n\nconst graph = new Graph({\n container: 'container',\n data,\n node: {\n style: {\n port: true,\n ports: [{ placement: 'top' }, { placement: 'bottom' }],\n },\n },\n edge: {\n type: 'cubic-vertical',\n style: {\n labelText: (d) => d.id,\n labelBackground: true,\n endArrow: true,\n },\n },\n layout: {\n type: 'antv-dagre',\n begin: [50, 50],\n rankdir: 'TB',\n nodesep: 20,\n ranksep: 120,\n },\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/element/edge/CubicVertical.zh.md":"---\ntitle: 垂直三次贝塞尔曲线边 CubicVertical\norder: 4\n---\n\n## 概述\n\n垂直三次贝塞尔曲线是一种平滑的曲线，其控制点主要沿垂直方向分布，适合在垂直方向上连接节点。\n\n使用场景：\n\n- 适用于垂直布局的图，如组织结构图、树状图。\n\n- 当需要强调垂直方向的连接关系时使用。\n\n**特别注意，计算控制点时主要考虑 y 轴上的距离，忽略 x 轴的变化**\n\n## 在线体验\n\n\n\n## 样式配置\n\n> 如果元素有其特定的属性，我们将在下面列出。对于所有的通用样式属性，见 [BaseEdge](/manual/element/edge/base-edge)\n\n| 属性 | 描述 | 类型 | 默认值 | 必选 |\n| ------------- | ---------------------------------------------------- | ---------------------- | --------- | ---- |\n| curvePosition | 控制点在两端点连线上的相对位置，范围为`0-1` | number | number[] | [0.5,0.5] | |\n| curveOffset | 控制点距离两端点连线的距离，可理解为控制边的弯曲程度 | number | number[] | [0,0] | |\n\n## 示例\n\n### 内置垂直三次贝塞尔曲线边效果\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst data = {\n nodes: [\n {\n id: 'node1',\n },\n {\n id: 'node2',\n },\n {\n id: 'node3',\n },\n {\n id: 'node4',\n },\n {\n id: 'node5',\n },\n {\n id: 'node6',\n },\n ],\n edges: [\n {\n id: 'line-default',\n source: 'node1',\n target: 'node2',\n },\n {\n id: 'line-active',\n source: 'node1',\n target: 'node3',\n states: ['active'],\n },\n {\n id: 'line-selected',\n source: 'node1',\n target: 'node4',\n states: ['selected'],\n },\n {\n id: 'line-highlight',\n source: 'node1',\n target: 'node5',\n states: ['highlight'],\n },\n {\n id: 'line-inactive',\n source: 'node1',\n target: 'node6',\n states: ['inactive'],\n },\n ],\n};\n\nconst graph = new Graph({\n container: 'container',\n data,\n node: {\n style: {\n port: true,\n ports: [{ placement: 'top' }, { placement: 'bottom' }],\n },\n },\n edge: {\n type: 'cubic-vertical',\n style: {\n labelText: (d) => d.id,\n labelBackground: true,\n endArrow: true,\n },\n },\n layout: {\n type: 'antv-dagre',\n begin: [50, 50],\n rankdir: 'TB',\n nodesep: 20,\n ranksep: 120,\n },\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/element/edge/Line.en.md":"---\ntitle: Line Edge\norder: 5\n---\n\n## Overview\n\nA line is the simplest type of edge, directly connecting two nodes without any curvature.\n\nUse cases:\n\n- Suitable for simple graphs, such as topology diagrams and flowcharts.\n\n- Use when quick drawing is needed without complex visual effects.\n\n## Online Experience\n\n\n\n## Style Configuration\n\n> If the element has specific attributes, we will list them below. For all general style attributes, see [BaseEdge](/en/manual/element/edge/base-edge)\n\n## Example\n\n### Built-in Line Edge Effect\n\n```js | ob { inject: true }\nimport { Graph, iconfont } from '@antv/g6';\n\nconst style = document.createElement('style');\nstyle.innerHTML = `@import url('${iconfont.css}');`;\ndocument.head.appendChild(style);\n\nconst data = {\n nodes: [\n {\n id: 'node1',\n },\n {\n id: 'node2',\n },\n {\n id: 'node3',\n },\n {\n id: 'node4',\n },\n {\n id: 'node5',\n },\n {\n id: 'node6',\n },\n ],\n edges: [\n {\n id: 'line-default',\n source: 'node1',\n target: 'node2',\n },\n {\n id: 'line-active',\n source: 'node1',\n target: 'node3',\n states: ['active'],\n },\n {\n id: 'line-selected',\n source: 'node1',\n target: 'node4',\n states: ['selected'],\n },\n {\n id: 'line-highlight',\n source: 'node1',\n target: 'node5',\n states: ['highlight'],\n },\n {\n id: 'line-inactive',\n source: 'node1',\n target: 'node6',\n states: ['inactive'],\n },\n ],\n};\n\nconst graph = new Graph({\n container: 'container',\n data,\n edge: {\n type: 'line',\n style: {\n labelText: (d) => d.id,\n labelBackground: true,\n endArrow: true,\n badge: true,\n badgeText: '\\ue603',\n badgeFontFamily: 'iconfont',\n badgeBackgroundWidth: 12,\n badgeBackgroundHeight: 12,\n },\n },\n layout: {\n type: 'radial',\n unitRadius: 220,\n linkDistance: 220,\n },\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/element/edge/Line.zh.md":"---\ntitle: 直线边 Line\norder: 5\n---\n\n## 概述\n\n直线是最简单的边类型，直接连接两个节点，没有任何弯曲。\n\n使用场景：\n\n- 适用于简单的图，如拓扑图、流程图。\n\n- 当需要快速绘制且无需复杂视觉效果时使用。\n\n## 在线体验\n\n\n\n## 样式配置\n\n> 如果元素有其特定的属性，我们将在下面列出。对于所有的通用样式属性，见 [BaseEdge](/manual/element/edge/base-edge)\n\n## 示例\n\n### 内置直线边效果\n\n```js | ob { inject: true }\nimport { Graph, iconfont } from '@antv/g6';\n\nconst style = document.createElement('style');\nstyle.innerHTML = `@import url('${iconfont.css}');`;\ndocument.head.appendChild(style);\n\nconst data = {\n nodes: [\n {\n id: 'node1',\n },\n {\n id: 'node2',\n },\n {\n id: 'node3',\n },\n {\n id: 'node4',\n },\n {\n id: 'node5',\n },\n {\n id: 'node6',\n },\n ],\n edges: [\n {\n id: 'line-default',\n source: 'node1',\n target: 'node2',\n },\n {\n id: 'line-active',\n source: 'node1',\n target: 'node3',\n states: ['active'],\n },\n {\n id: 'line-selected',\n source: 'node1',\n target: 'node4',\n states: ['selected'],\n },\n {\n id: 'line-highlight',\n source: 'node1',\n target: 'node5',\n states: ['highlight'],\n },\n {\n id: 'line-inactive',\n source: 'node1',\n target: 'node6',\n states: ['inactive'],\n },\n ],\n};\n\nconst graph = new Graph({\n container: 'container',\n data,\n edge: {\n type: 'line',\n style: {\n labelText: (d) => d.id,\n labelBackground: true,\n endArrow: true,\n badge: true,\n badgeText: '\\ue603',\n badgeFontFamily: 'iconfont',\n badgeBackgroundWidth: 12,\n badgeBackgroundHeight: 12,\n },\n },\n layout: {\n type: 'radial',\n unitRadius: 220,\n linkDistance: 220,\n },\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/element/edge/Polyline.en.md":"---\ntitle: Polyline Edge\norder: 6\n---\n\n## Overview\n\nA polyline is an edge composed of multiple straight line segments, suitable for connecting nodes by bypassing obstacles in complex layouts.\n\nUse cases:\n\n- Suitable for graphs with complex layouts, such as circuit diagrams and pipeline diagrams.\n\n- Use when you need to bypass other nodes or obstacles.\n\n## Online Experience\n\n\n\n## Style Configuration\n\n> If the element has specific attributes, we will list them below. For all general style attributes, see [BaseEdge](/en/manual/element/edge/base-edge)\n\n| Attribute | Description | Type | Default | Required |\n| ------------- | -------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- | ------- | -------- |\n| controlPoints | Array of control points used to define the turning points of the polyline. | [Point](#point)[] | [] | |\n| radius | Corner radius of the turning points. | number | 0 | |\n| router | Whether to enable routing. | false | [OrthRouter](#orthrouter) | [ShortestPathRouter](#shortestpathrouter) | false | |\n\n### OrthRouter\n\n| Attribute | Description | Type | Default |\n| --------- | -------------------------------------------------------------------------------------------------------- | ------------------- | ------- |\n| type | Orthogonal routing, adding extra control points on the path to keep each segment horizontal or vertical. | `'orth'` | - |\n| padding | Minimum distance between the node connection point and the corner. | [Padding](#padding) | `0` |\n\n### ShortestPathRouter\n\n| Attribute | Description | Type | Default |\n| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------- | ------- |\n| type | Shortest path routing, an intelligent version of orthogonal routing `'orth'`. This routing consists of horizontal or vertical orthogonal segments. It uses the A\\* algorithm to calculate the shortest path and supports automatic avoidance of other nodes (obstacles) on the path. | `'shortest-path'` | - |\n| offset | Minimum distance between the node anchor point and the corner. | [Padding](#padding) | 0 |\n| gridSize | Grid cell size. | number | 0 |\n| maxAllowedDirectionChange | Maximum allowed rotation angle (radians). | number | 0 |\n| startDirections | Possible starting directions of the node. | [Direction](#direction)[] | 0 |\n| endDirections | Possible ending directions of the node. | [Direction](#direction)[] | 0 |\n| directionMap | Specifies the movable directions. | { [key in [Direction](#direction)]: { stepX: number; stepY: number } } | 0 |\n| penalties | Represents additional costs for certain paths during path searching. The key is the radian value, and the value is the cost. | { [key: string]: number } | 0 |\n| distFunc | Specifies the function to calculate the distance between two points. | (p1: [Point](#point), p2: [Point](#point)) => number | 0 |\n| maximumLoops | Maximum number of iterations. | number | 0 |\n| enableObstacleAvoidance | Whether to enable obstacle avoidance. | boolean | false |\n\n#### Direction\n\n```typescript\ntype Direction = 'left' | 'right' | 'top' | 'bottom';\n```\n\n#### Point\n\n```typescript\ntype Point = [number, number] | [number, number, number] | Float32Array;\n```\n\n#### Padding\n\n```typescript\ntype Padding = number | [number, number] | [number, number, number, number];\n```\n\n## Example\n\n### Built-in Polyline Edge Effect\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst data = {\n nodes: [\n { id: 'node-1', style: { x: 200, y: 200 } },\n { id: 'node-2', style: { x: 350, y: 120 } },\n ],\n edges: [\n {\n id: 'edge-1',\n source: 'node-1',\n target: 'node-2',\n controlPoints: [[300, 190]],\n },\n ],\n};\n\nconst graph = new Graph({\n container: 'container',\n data,\n edge: {\n type: 'polyline',\n style: {\n controlPoints: (d) => d.controlPoints,\n },\n },\n behaviors: [{ type: 'drag-element' }],\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/element/edge/Polyline.zh.md":"---\ntitle: 折线边 Polyline\norder: 6\n---\n\n## 概述\n\n折线是由多条直线段组成的边，适合在复杂布局中绕过障碍物连接节点。\n\n使用场景：\n\n- 适用于复杂布局的图，如电路图、管道图。\n\n- 当需要绕过其他节点或障碍物时使用。\n\n## 在线体验\n\n\n\n## 样式配置\n\n> 如果元素有其特定的属性，我们将在下面列出。对于所有的通用样式属性，见 [BaseEdge](/manual/element/edge/base-edge)\n\n| 属性 | 描述 | 类型 | 默认值 | 必选 |\n| ------------- | -------------------------------- | --------------------------------------------------------------------------------------- | ------ | ---- |\n| controlPoints | 控制点数组，用于定义折线的转折点 | [Point](#point)[] | [] | |\n| radius | 转折点圆角半径 | number | 0 | |\n| router | 是否启用路由 | false | [OrthRouter](#orthrouter) | [ShortestPathRouter](#shortestpathrouter) | false | |\n\n### OrthRouter\n\n| 属性 | 描述 | 类型 | 默认值 |\n| ------- | ---------------------------------------------------------------------- | ------------------- | ------ |\n| type | 正交路由，通过在路径上添加额外的控制点，使得边的每一段都保持水平或垂直 | `'orth'` | - |\n| padding | 节点连接点与转角的最小距离 | [Padding](#padding) | `0` |\n\n### ShortestPathRouter\n\n| 属性 | 描述 | 类型 | 默认值 |\n| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | ------ |\n| type | 最短路径路由，是正交路由 `'orth'` 的智能版本。该路由由水平或垂直的正交线段组成。采用 A\\* 算法计算最短路径，并支持自动避开路径上的其他节点（障碍） | `'shortest-path'` | - |\n| offset | 节点锚点与转角的最小距离 | [Padding](#padding) | 0 |\n| gridSize | grid 格子大小 | number | 0 |\n| maxAllowedDirectionChange | 支持的最大旋转角度（弧度） | number | 0 |\n| startDirections | 节点的可能起始方向 | [Direction](#direction)[] | 0 |\n| endDirections | 节点的可能结束方向 | [Direction](#direction)[] | 0 |\n| directionMap | 指定可移动的方向 | { [key in [Direction](#direction)]: { stepX: number; stepY: number } } | 0 |\n| penalties | 表示在路径搜索过程中某些路径的额外代价。key 为弧度值，value 为代价 | { [key: string]: number } | 0 |\n| distFunc | 指定计算两点之间距离的函数 | (p1: [Point](#point), p2: [Point](#point)) => number | 0 |\n| maximumLoops | 最大迭代次数 | number | 0 |\n| enableObstacleAvoidance | 是否开启避障 | boolean | false |\n\n#### Direction\n\n```typescript\ntype Direction = 'left' | 'right' | 'top' | 'bottom';\n```\n\n#### Point\n\n```typescript\ntype Point = [number, number] | [number, number, number] | Float32Array;\n```\n\n#### Padding\n\n```typescript\ntype Padding = number | [number, number] | [number, number, number, number];\n```\n\n## 示例\n\n### 内置折线边效果\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst data = {\n nodes: [\n { id: 'node-1', style: { x: 200, y: 200 } },\n { id: 'node-2', style: { x: 350, y: 120 } },\n ],\n edges: [\n {\n id: 'edge-1',\n source: 'node-1',\n target: 'node-2',\n controlPoints: [[300, 190]],\n },\n ],\n};\n\nconst graph = new Graph({\n container: 'container',\n data,\n edge: {\n type: 'polyline',\n style: {\n controlPoints: (d) => d.controlPoints,\n },\n },\n behaviors: [{ type: 'drag-element' }],\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/element/edge/Quadratic.en.md":"---\ntitle: Quadratic Bezier Curve Edge\norder: 6\n---\n\n## Overview\n\nA quadratic Bezier curve is a smooth curve whose shape is determined by a start point, an end point, and a control point.\n\nUse cases:\n\n- Suitable for moderately complex graphs, such as relationship graphs and network graphs.\n\n- Use when smooth node connections are needed with limited computational resources.\n\n## Online Experience\n\n\n\n## Style Configuration\n\n> If the element has specific attributes, we will list them below. For all general style attributes, see [BaseEdge](/en/manual/element/edge/base-edge)\n\n| Attribute | Description | Type | Default | Required |\n| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- | ------- | -------- |\n| controlPoints | Array of control points used to define the shape of the curve. If not specified, control points will be calculated using `curveOffset` and `curvePosition`. | [Point](#point) | - | |\n| curvePosition | Relative position of the control point on the line connecting the two endpoints, ranging from `0-1`. | number | 0.5 | |\n| curveOffset | Distance of the control point from the line connecting the two endpoints, understood as the degree of curve bending. | number | 30 | |\n\n#### Point\n\n```typescript\ntype Point = [number, number] | [number, number, number] | Float32Array;\n```\n\n## Example\n\n### Built-in Quadratic Bezier Curve Edge Effect\n\n```js | ob { inject: true }\nimport { Graph, iconfont } from '@antv/g6';\n\nconst style = document.createElement('style');\nstyle.innerHTML = `@import url('${iconfont.css}');`;\ndocument.head.appendChild(style);\n\nconst data = {\n nodes: [\n {\n id: 'node1',\n },\n {\n id: 'node2',\n },\n {\n id: 'node3',\n },\n {\n id: 'node4',\n },\n {\n id: 'node5',\n },\n {\n id: 'node6',\n },\n ],\n edges: [\n {\n id: 'line-default',\n source: 'node1',\n target: 'node2',\n },\n {\n id: 'line-active',\n source: 'node1',\n target: 'node3',\n states: ['active'],\n },\n {\n id: 'line-selected',\n source: 'node1',\n target: 'node4',\n states: ['selected'],\n },\n {\n id: 'line-highlight',\n source: 'node1',\n target: 'node5',\n states: ['highlight'],\n },\n {\n id: 'line-inactive',\n source: 'node1',\n target: 'node6',\n states: ['inactive'],\n },\n ],\n};\n\nconst graph = new Graph({\n container: 'container',\n data,\n edge: {\n type: 'quadratic',\n style: {\n labelText: (d) => d.id,\n labelBackground: true,\n endArrow: true,\n badge: true,\n badgeText: '\\ue603',\n badgeFontFamily: 'iconfont',\n badgeBackgroundWidth: 12,\n badgeBackgroundHeight: 12,\n },\n },\n layout: {\n type: 'radial',\n unitRadius: 220,\n linkDistance: 220,\n },\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/element/edge/Quadratic.zh.md":"---\ntitle: 二次贝塞尔曲线边 Quadratic\norder: 6\n---\n\n## 概述\n\n二次贝塞尔曲线是一种平滑的曲线，其形状由起点、终点和一个控制点决定。\n\n使用场景：\n\n- 适用于中等复杂度的图，如关系图、网络图。\n\n- 当需要平滑连接节点且计算资源有限时使用。\n\n## 在线体验\n\n\n\n## 样式配置\n\n> 如果元素有其特定的属性，我们将在下面列出。对于所有的通用样式属性，见 [BaseEdge](/manual/element/edge/base-edge)\n\n| 属性 | 描述 | 类型 | 默认值 | 必选 |\n| ------------- | -------------------------------------------------------------------------------------------------- | --------------- | ------ | ---- |\n| controlPoints | 控制点数组，用于定义曲线的形状。如果不指定，将会通过 `curveOffset` 和 `curvePosition` 来计算控制点 | [Point](#point) | - | |\n| curvePosition | 控制点在两端点连线上的相对位置，范围为`0-1` | number | 0.5 | |\n| curveOffset | 控制点距离两端点连线的距离，可理解为控制边的弯曲程度 | number | 30 | |\n\n#### Point\n\n```typescript\ntype Point = [number, number] | [number, number, number] | Float32Array;\n```\n\n## 示例\n\n### 内置二次贝塞尔曲线边效果\n\n```js | ob { inject: true }\nimport { Graph, iconfont } from '@antv/g6';\n\nconst style = document.createElement('style');\nstyle.innerHTML = `@import url('${iconfont.css}');`;\ndocument.head.appendChild(style);\n\nconst data = {\n nodes: [\n {\n id: 'node1',\n },\n {\n id: 'node2',\n },\n {\n id: 'node3',\n },\n {\n id: 'node4',\n },\n {\n id: 'node5',\n },\n {\n id: 'node6',\n },\n ],\n edges: [\n {\n id: 'line-default',\n source: 'node1',\n target: 'node2',\n },\n {\n id: 'line-active',\n source: 'node1',\n target: 'node3',\n states: ['active'],\n },\n {\n id: 'line-selected',\n source: 'node1',\n target: 'node4',\n states: ['selected'],\n },\n {\n id: 'line-highlight',\n source: 'node1',\n target: 'node5',\n states: ['highlight'],\n },\n {\n id: 'line-inactive',\n source: 'node1',\n target: 'node6',\n states: ['inactive'],\n },\n ],\n};\n\nconst graph = new Graph({\n container: 'container',\n data,\n edge: {\n type: 'quadratic',\n style: {\n labelText: (d) => d.id,\n labelBackground: true,\n endArrow: true,\n badge: true,\n badgeText: '\\ue603',\n badgeFontFamily: 'iconfont',\n badgeBackgroundWidth: 12,\n badgeBackgroundHeight: 12,\n },\n },\n layout: {\n type: 'radial',\n unitRadius: 220,\n linkDistance: 220,\n },\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/element/edge/custom-edge.en.md":"---\ntitle: Custom Edge\norder: 7\n---\n\nG6 provides multiple [built-in edge](/en/manual/element/edge/base-edge) types, including [line](/en/manual/element/edge/line), [polyline](/en/manual/element/edge/polyline), [quadratic (quadratic Bézier curve edge)](/en/manual/element/edge/quadratic), [cubic (cubic Bézier curve edge)](/en/manual/element/edge/cubic), [cubic-horizontal](/en/manual/element/edge/cubic-horizontal), [cubic-vertical](/en/manual/element/edge/cubic-vertical), and more. These built-in edges can meet most basic scenario requirements.\n\nHowever, in actual projects, you may encounter requirements that these basic edges cannot satisfy. In such cases, you need to create custom edges. Don't worry, it's simpler than you think!\n\n## Before Starting: Understanding the Basic Components of an Edge\n\nIn G6, a complete edge typically consists of the following parts:\n\n
The key should not use special symbols, it will be converted to camelCase to call `getXxxStyle` and `drawXxxShape` methods (see [Element Conventions](#element-conventions)) |\n| Ctor | { new (...args: any[]): DisplayObject } | Graphic class |\n| style | Record
key 不应使用特殊符号，会基于该值转化为驼峰形式调用 `getXxxStyle` 和 `drawXxxShape` 方法（见[元素约定](#元素约定)） |\n| Ctor | { new (...args: any[]): DisplayObject } | 图形类 |\n| style | Record
![](\"https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Ot4bSbBx97EAAAAAAAAAAAAADmJ7AQ/original\")
\n\n- `key`: The main graphic of the node, representing the primary shape of the node, such as rectangle, circle, etc.\n- `label`: Text label, usually used to display the name or description of the node\n- `icon`: Icon graphic, usually used to display node icons, can be images or text icons\n- `badge`: Badge, by default located at the top-right corner of the node\n- `halo`: Graphic showing halo effect around the main graphic\n- `port`: Connection points on the node, used to connect edges\n\nThe following style configurations are explained in order by atomic graphics:\n\n### Main Graphic Style\n\nThe main graphic is the core part of the node, defining the basic shape and appearance of the node. Here are common configuration scenarios:\n\n#### Basic Style Configuration\n\nSetting the basic appearance of nodes:\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 100,\n autoFit: 'center',\n data: { nodes: [{ id: 'node1' }] },\n node: {\n style: {\n fill: '#5B8FF9', // Blue fill\n stroke: '#1A1A1A', // Dark stroke\n lineWidth: 2,\n size: 40,\n },\n },\n});\n\ngraph.render();\n```\n\n#### Transparency and Shadow Effects\n\nAdding transparency and shadow effects to nodes:\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 100,\n autoFit: 'center',\n data: { nodes: [{ id: 'node1' }] },\n node: {\n style: {\n fill: '#61DDAA',\n fillOpacity: 0.85,\n shadowColor: 'rgba(97, 221, 170, 0.4)',\n shadowBlur: 12,\n shadowOffsetX: 2,\n shadowOffsetY: 4,\n stroke: '#F0F0F0',\n lineWidth: 1,\n },\n },\n});\n\ngraph.render();\n```\n\n#### Dashed Border Style\n\nCreating nodes with dashed borders:\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 100,\n autoFit: 'center',\n data: { nodes: [{ id: 'node1' }] },\n node: {\n style: {\n fill: '#FFF1F0',\n stroke: '#F5222D',\n lineWidth: 2,\n lineDash: [6, 4],\n lineCap: 'round',\n },\n },\n});\n\ngraph.render();\n```\n\nThe complete main graphic style configuration is as follows:\n\n| Property | Description | Type | Default | Required |\n| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------- | --------- | -------- |\n| collapsed | Whether the current node/combo is collapsed | boolean | false | |\n| cursor | Node mouse hover style, [options](#cursor) | string | default | |\n| fill | Node fill color | string | `#1783FF` | |\n| fillOpacity | Node fill color transparency | number \\| string | 1 | |\n| increasedLineWidthForHitTesting | When lineWidth is small, the interactive area also becomes small. Sometimes we want to increase this area to make \"thin lines\" easier to pick up | number | 0 | |\n| lineCap | Node stroke end style | `round` \\| `square` \\| `butt` | `butt` | |\n| lineDash | Node stroke dash style | number[] | - | |\n| lineDashOffset | Node stroke dash offset | number | - | |\n| lineJoin | Node stroke join style | `round` \\| `bevel` \\| `miter` | `miter` | |\n| lineWidth | Node stroke width | number | 1 | |\n| opacity | Node transparency | number \\| string | 1 | |\n| pointerEvents | How the node responds to pointer events, [options](#pointerevents) | string | `auto` | |\n| shadowBlur | Node shadow blur | number | - | |\n| shadowColor | Node shadow color | string | - | |\n| shadowOffsetX | Node shadow offset in x-axis direction | number \\| string | - | |\n| shadowOffsetY | Node shadow offset in y-axis direction | number \\| string | - | |\n| shadowType | Node shadow type | `inner` \\| `outer` | `outer` | |\n| size | Node size, quick setting for node width and height, [options](#size) | number \\| number[] | 32 | |\n| stroke | Node stroke color | string | `#000` | |\n| strokeOpacity | Node stroke color transparency | number \\| string | 1 | |\n| transform | Transform property allows you to rotate, scale, skew or translate the given node | string | - | |\n| transformOrigin | Rotation and scaling center, also called transformation center | string | - | |\n| visibility | Whether the node is visible | `visible` \\| `hidden` | `visible` | |\n| x | Node x coordinate | number | 0 | |\n| y | Node y coordinate | number | 0 | |\n| z | Node z coordinate | number | 0 | |\n| zIndex | Node rendering level | number | 0 | |\n\n#### Size\n\nNode size, quick setting for node width and height, supports three configuration methods:\n\n- number: Indicates that the node width and height are the same as the specified value\n- [number, number]: Indicates that the node width and height are represented by array elements indicating the node's width and height respectively\n- [number, number, number]: Indicates that the node width, height, and depth are represented by array elements\n\n#### PointerEvents\n\nThe `pointerEvents` property controls how graphics respond to interaction events. You can refer to the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events).\n\nAvailable values: `visible` | `visiblepainted` | `visiblestroke` | `non-transparent-pixel` | `visiblefill` | `visible` | `painted` | `fill` | `stroke` | `all` | `none` | `auto` | `inherit` | `initial` | `unset`\n\nIn short, `fill`, `stroke`, and `visibility` can independently or in combination affect pick behavior. Currently supports the following keywords:\n\n- **`auto`**: Default value, equivalent to `visiblepainted`\n- **`none`**: Will never be a target for responding to events\n- **`visiblepainted`**: Will respond to events only if the following conditions are met:\n - `visibility` is set to `visible`, i.e., the graphic is visible\n - Triggered in the graphic fill area and `fill` takes a non-`none` value; or triggered in the graphic stroke area and `stroke` takes a non-`none` value\n- **`visiblefill`**: Will respond to events only if the following conditions are met:\n - `visibility` is set to `visible`, i.e., the graphic is visible\n - Triggered in the graphic fill area, not affected by the value of `fill`\n- **`visiblestroke`**: Will respond to events only if the following conditions are met:\n - `visibility` is set to `visible`, i.e., the graphic is visible\n - Triggered in the graphic stroke area, not affected by the value of `stroke`\n- **`visible`**: Will respond to events only if the following conditions are met:\n - `visibility` is set to `visible`, i.e., the graphic is visible\n - Triggered in the graphic fill or stroke area, not affected by the values of `fill` and `stroke`\n- **`painted`**: Will respond to events only if the following conditions are met:\n - Triggered in the graphic fill area and `fill` takes a non-`none` value; or triggered in the graphic stroke area and `stroke` takes a non-`none` value\n - Not affected by the value of `visibility`\n- **`fill`**: Will respond to events only if the following conditions are met:\n - Triggered in the graphic fill area, not affected by the value of `fill`\n - Not affected by the value of `visibility`\n- **`stroke`**: Will respond to events only if the following conditions are met:\n - Triggered in the graphic stroke area, not affected by the value of `stroke`\n - Not affected by the value of `visibility`\n- **`all`**: Will respond to events as long as entering the fill and stroke areas of the graphic, not affected by the values of `fill`, `stroke`, and `visibility`\n\n**Usage Examples:**\n\n```js\n// Example 1: Only stroke area responds to events\nconst graph = new Graph({\n node: {\n style: {\n fill: 'none',\n stroke: '#000',\n lineWidth: 2,\n pointerEvents: 'stroke', // Only stroke responds to events\n },\n },\n});\n\n// Example 2: Completely unresponsive to events\nconst graph = new Graph({\n node: {\n style: {\n pointerEvents: 'none', // Node does not respond to any events\n },\n },\n});\n```\n\n#### Cursor\n\nAvailable values: `auto` | `default` | `none` | `context-menu` | `help` | `pointer` | `progress` | `wait` | `cell` | `crosshair` | `text` | `vertical-text` | `alias` | `copy` | `move` | `no-drop` | `not-allowed` | `grab` | `grabbing` | `all-scroll` | `col-resize` | `row-resize` | `n-resize` | `e-resize` | `s-resize` | `w-resize` | `ne-resize` | `nw-resize` | `se-resize` | `sw-resize` | `ew-resize` | `ns-resize` | `nesw-resize` | `nwse-resize` | `zoom-in` | `zoom-out`\n\n### Label Style\n\nLabels are used to display text information of nodes, supporting various style configurations and layout methods. Here are common usage scenarios:\n\n#### Basic Text Label\n\nThe simplest text label configuration:\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 120,\n autoFit: 'center',\n data: { nodes: [{ id: 'node1' }] },\n node: {\n style: {\n labelText: 'Node Name',\n labelFill: '#262626',\n labelFontSize: 12,\n labelPlacement: 'bottom',\n },\n },\n});\n\ngraph.render();\n```\n\n#### Multi-line Text Label\n\nWhen text is long, you can set automatic line wrapping:\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 120,\n autoFit: 'center',\n data: { nodes: [{ id: 'node1' }] },\n node: {\n style: {\n labelText: 'This is a very long node name that needs line wrapping',\n labelWordWrap: true,\n labelMaxWidth: '150%',\n labelMaxLines: 3,\n labelTextOverflow: 'ellipsis',\n labelFill: '#434343',\n labelPlacement: 'bottom',\n labelTextAlign: 'center',\n },\n },\n});\n\ngraph.render();\n```\n\n#### Label with Background\n\nAdding background to labels to improve readability:\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 120,\n autoFit: 'center',\n data: { nodes: [{ id: 'node1' }] },\n node: {\n style: {\n labelText: 'Important Node',\n labelBackground: true,\n labelBackgroundFill: 'rgba(250, 140, 22, 0.1)',\n labelBackgroundRadius: 6,\n labelPadding: [6, 12],\n labelFill: '#D4380D',\n labelFontWeight: 'bold',\n labelPlacement: 'bottom',\n },\n },\n});\n\ngraph.render();\n```\n\nThe complete label style configuration is as follows:\n\n| Property | Description | Type | Default | Required |\n| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | --------- | -------- |\n| label | Whether to display node label | boolean | true | |\n| labelCursor | Style displayed when mouse hovers over node label, [options](#cursor) | string | `default` | |\n| labelFill | Node label text color | string | - | |\n| labelFontFamily | Node label font family | string | - | |\n| labelFontSize | Node label font size | number | 12 | |\n| labelFontStyle | Node label font style | `normal` \\| `italic` \\| `oblique` | - | |\n| labelFontVariant | Node label font variant | `normal` \\| `small-caps` \\| string | - | |\n| labelFontWeight | Node label font weight | `normal` \\| `bold` \\| `bolder` \\| `lighter` \\| number | - | |\n| labelLeading | Line spacing | number | 0 | |\n| labelLetterSpacing | Node label letter spacing | number \\| string | - | |\n| labelLineHeight | Node label line height | number \\| string | - | |\n| labelMaxLines | Maximum number of lines for node label | number | 1 | |\n| labelMaxWidth | Maximum width of node label, [options](#labelmaxwidth) | number \\| string | `200%` | |\n| labelOffsetX | Node label offset in x-axis direction | number | 0 | |\n| labelOffsetY | Node label offset in y-axis direction | number | 0 | |\n| labelPadding | Node label padding | number \\| number[] | 0 | |\n| labelPlacement | Position of node label relative to node main graphic, [options](#labelplacement) | string | `bottom` | |\n| labelText | Node label text content | `string` \\| `(datum) => string` | - | |\n| labelTextAlign | Node label text horizontal alignment | `start` \\| `center` \\| `middle` \\| `end` \\| `left` \\| `right` | `left` | |\n| labelTextBaseline | Node label text baseline | `top` \\| `hanging` \\| `middle` \\| `alphabetic` \\| `ideographic` \\| `bottom` | - | |\n| labelTextDecorationColor | Node label text decoration line color | string | - | |\n| labelTextDecorationLine | Node label text decoration line | string | - | |\n| labelTextDecorationStyle | Node label text decoration line style | `solid` \\| `double` \\| `dotted` \\| `dashed` \\| `wavy` | - | |\n| labelTextOverflow | Node label text overflow handling | `clip` \\| `ellipsis` \\| string | - | |\n| labelTextPath | Node label text path | Path | - | |\n| labelWordWrap | Whether node label enables automatic line wrapping. After enabling labelWordWrap, parts exceeding labelMaxWidth wrap automatically | boolean | false | |\n| labelZIndex | Node label rendering level | number | 0 | |\n\n#### LabelPlacement\n\nAvailable values: `left` | `right` | `top` | `bottom` | `left-top` | `left-bottom` | `right-top` | `right-bottom` | `top-left` | `top-right` | `bottom-left` | `bottom-right` | `center` | `bottom`\n\n#### LabelMaxWidth\n\nAfter enabling automatic line wrapping `labelWordWrap`, text wraps when exceeding this width:\n\n- string: Defines maximum width as a percentage relative to node width. For example, `50%` means label width does not exceed half of the node width\n- number: Defines maximum width in pixels. For example, 100 means the maximum width of the label is 100 pixels\n\nFor example, setting multi-line label text:\n\n```json\n{\n \"labelWordWrap\": true,\n \"labelMaxWidth\": 200,\n \"labelMaxLines\": 3\n}\n```\n\n### Label Background Style\n\nLabel background is used to display the background of node labels:\n\n| Property | Description | Type | Default |\n| ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | --------- |\n| labelBackground | Whether to display node label background | boolean | false |\n| labelBackgroundCursor | Node label background mouse hover style, [options](#cursor) | string | `default` |\n| labelBackgroundFill | Node label background fill color | string | - |\n| labelBackgroundFillOpacity | Node label background transparency | number | 1 |\n| labelBackgroundHeight | Node label background height | string \\| number | - |\n| labelBackgroundLineDash | Node label background dash configuration | number \\| string \\|(number \\| string )[] | - |\n| labelBackgroundLineDashOffset | Node label background dash offset | number | - |\n| labelBackgroundLineWidth | Node label background stroke line width | number | - |\n| labelBackgroundRadius | Node label background border radius - number: Uniform setting for four border radii
- number[]: Set four border radii separately, automatically supplement missing values | number \\| number[] | 0 |\n| labelBackgroundShadowBlur | Node label background shadow blur degree | number | - |\n| labelBackgroundShadowColor | Node label background shadow color | string | - |\n| labelBackgroundShadowOffsetX | Node label background shadow X direction offset | number | - |\n| labelBackgroundShadowOffsetY | Node label background shadow Y direction offset | number | - |\n| labelBackgroundStroke | Node label background stroke color | string | - |\n| labelBackgroundStrokeOpacity | Node label background stroke transparency | number \\| string | 1 |\n| labelBackgroundVisibility | Whether node label background is visible | `visible` \\| `hidden` | - |\n| labelBackgroundZIndex | Node label background rendering level | number | 1 |\n\n### Halo Style\n\nHalo is an effect displayed around the node's main graphic, usually used for highlighting or indicating special states of nodes.\n\n#### Basic Halo Effect\n\nAdding basic halo effect to nodes:\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 100,\n autoFit: 'center',\n data: { nodes: [{ id: 'node1' }] },\n node: {\n style: {\n lineWidth: 1.5,\n halo: true,\n haloStroke: '#1890FF',\n haloLineWidth: 6,\n haloStrokeOpacity: 0.3,\n },\n },\n});\n\ngraph.render();\n```\n\nThe complete halo style configuration is as follows:\n\n| Property | Description | Type | Default | Required |\n| ----------------- | ----------------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------- | -------- |\n| halo | Whether to display node halo | boolean | false | |\n| haloCursor | Node halo mouse hover style, [options](#cursor) | string | `default` | |\n| haloDraggable | Whether node halo allows dragging | boolean | true | |\n| haloDroppable | Whether node halo allows receiving dragged elements | boolean | true | |\n| haloFillRule | Node halo fill rule | `nonzero` \\| `evenodd` | - | |\n| haloFilter | Node halo filter | string | - | |\n| haloLineWidth | Node halo stroke width | number | 3 | |\n| haloPointerEvents | Whether node halo effect responds to pointer events, [options](#pointerevents) | string | `none` | |\n| haloStroke | Node halo stroke color, **this property is used to set the color of the halo around the node, helping to highlight the node** | string | Consistent with main graphic fill color | |\n| haloStrokeOpacity | Node halo stroke color transparency | number | 0.25 | |\n| haloVisibility | Node halo visibility | `visible` \\| `hidden` | `visible` | |\n| haloZIndex | Node halo rendering level | number | -1 | |\n\n### Icon Style\n\nNode icons support three common usage methods: text icons, image icons, and IconFont icons. The configurations for these three methods are shown below:\n\n#### 1. Text Icons\n\nUsing text directly as icons, suitable for simple identifiers:\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 100,\n autoFit: 'center',\n data: { nodes: [{ id: 'node1' }] },\n node: {\n style: {\n fill: '#FFF0F6',\n stroke: '#EB2F96',\n lineWidth: 1.5,\n iconText: 'A', // Icon text content\n iconFill: '#C41D7F', // Deep pink icon\n iconFontSize: 16,\n iconFontWeight: 'bold',\n },\n },\n});\n\ngraph.render();\n```\n\n#### 2. Image Icons\n\nUsing images as icons, supporting various image formats:\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 100,\n autoFit: 'center',\n data: { nodes: [{ id: 'node1' }] },\n node: {\n style: {\n fill: '#F6FFED',\n stroke: '#52C41A',\n lineWidth: 1.5,\n iconSrc:\n 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDJMMTMuMDkgOC4yNkwyMSA5TDEzLjA5IDE1Ljc4TDEyIDIyTDEwLjkxIDE1Ljc4TDMgOUwxMC45MSA4LjI2TDEyIDJaIiBmaWxsPSIjNTJDNDFBIi8+Cjwvc3ZnPgo=',\n iconWidth: 20,\n iconHeight: 20,\n },\n },\n});\n\ngraph.render();\n```\n\n#### 3. IconFont Icons\n\nUsing IconFont font icons, you need to import the corresponding font files first:\n\n```js | ob { inject: true }\nimport { Graph, iconfont } from '@antv/g6';\n\nconst style = document.createElement('style');\nstyle.innerHTML = `@import url('${iconfont.css}');`;\ndocument.head.appendChild(style);\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 100,\n autoFit: 'center',\n data: { nodes: [{ id: 'node1' }] },\n node: {\n style: {\n fill: '#E6F7FF', // Light blue background\n stroke: '#1890FF', // Blue border\n lineWidth: 1.5,\n iconFontFamily: 'iconfont',\n iconText: '\\ue602',\n iconFill: '#1890FF',\n },\n },\n});\n\ngraph.render();\n```\n\nThe complete icon style configuration is as follows:\n\n| Property | Description | Type | Default |\n| ----------------------- | ---------------------------------------------------- | --------------------------------------------------------------------------- | --------------------------- |\n| icon | Whether to display node icon | boolean | true |\n| iconFill | Node icon text color | string | - |\n| iconFontFamily | Node icon font family | string | - |\n| iconFontSize | Node icon font size | number | 16 |\n| iconFontStyle | Node icon font style | `normal` \\| `italic` \\| `oblique` | `normal` |\n| iconFontVariant | Node icon font variant | `normal` \\| `small-caps` \\| string | `normal` |\n| iconFontWeight | Node icon font weight | number \\| string | `normal` |\n| iconHeight | Node icon height | number | Half of main graphic height |\n| iconLetterSpacing | Node icon text letter spacing | number \\| string | - |\n| iconLineHeight | Node icon text line height | number \\| string | - |\n| iconMaxLines | Maximum lines for node icon text | number | 1 |\n| iconRadius | Node icon border radius | number | 0 |\n| iconSrc | Node image source. Has higher priority than iconText | string | - |\n| iconText | Node icon text | string | - |\n| iconTextAlign | Node icon text horizontal alignment | `start` \\| `center` \\| `middle` \\| `end` \\| `left` \\| `right` | `left` |\n| iconTextBaseline | Node icon text baseline | `top` \\| `hanging` \\| `middle` \\| `alphabetic` \\| `ideographic` \\| `bottom` | `alphabetic` |\n| iconTextDecorationColor | Node icon text decoration line color | string | - |\n| iconTextDecorationLine | Node icon text decoration line | string | - |\n| iconTextDecorationStyle | Node icon text decoration line style | `solid` \\| `double` \\| `dotted` \\| `dashed` \\| `wavy` | `solid` |\n| iconTextOverflow | Node icon text overflow handling | `clip` \\| `ellipsis` \\| string | `clip` |\n| iconWidth | Node icon width | number | Half of main graphic width |\n| iconWordWrap | Whether node icon text automatically wraps | boolean | - |\n\n### Badge Style\n\nBadges are small markers displayed on nodes, usually used to show status, quantity, or other auxiliary information. Supports displaying multiple badges simultaneously with customizable positions.\n\n#### Single Badge\n\nAdding a simple badge to a node:\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 100,\n autoFit: 'center',\n data: { nodes: [{ id: 'node1' }] },\n node: {\n style: {\n badges: [\n { text: 'NEW' }, // Default display at the top\n ],\n },\n },\n});\n\ngraph.render();\n```\n\n#### Multiple Badges\n\nAdding multiple badges at different positions to a node:\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 100,\n autoFit: 'center',\n data: { nodes: [{ id: 'node1' }] },\n node: {\n style: {\n badge: true, // Whether to display badges\n badges: [\n { text: 'A', placement: 'right-top' },\n { text: 'Important', placement: 'right' },\n { text: 'Notice', placement: 'right-bottom' },\n ],\n badgePalette: ['#7E92B5', '#F4664A', '#FFBE3A'], // Badge background color palette\n badgeFontSize: 7, // Badge font size\n },\n },\n});\n\ngraph.render();\n```\n\n#### Custom Badge Style\n\nCompletely customizing badge appearance:\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 100,\n autoFit: 'center',\n data: { nodes: [{ id: 'node1' }] },\n node: {\n style: {\n badges: [\n {\n text: '99+',\n placement: 'right-top',\n backgroundFill: '#FF4D4F', // Red background\n fill: '#fff', // White text\n fontSize: 10,\n padding: [2, 6],\n backgroundRadius: 8,\n },\n ],\n },\n },\n});\n\ngraph.render();\n```\n\nThe complete badge style configuration is as follows:\n\n| Property | Description | Type | Default |\n| ------------ | -------------------------------- | ------------------------------------- | --------------------------------- |\n| badge | Whether the node displays badges | boolean | true |\n| badgePalette | Badge background color palette | string[] | [`#7E92B5`, `#F4664A`, `#FFBE3A`] |\n| badges | Node badge settings | [BadgeStyleProps](#badgestyleprops)[] | - |\n\n#### BadgeStyleProps\n\n| Property | Description | Type | Default |\n| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |\n| background | Whether node badge displays background | boolean | true |\n| backgroundCursor | Node badge background mouse hover style, [options](#cursor) | string | `default` |\n| backgroundFill | Node badge background fill color. If not specified, badgePalette is considered for allocation in order | string | - |\n| backgroundFillOpacity | Node badge background fill transparency | number | 1 |\n| backgroundFilter | Node badge background filter | string | - |\n| backgroundHeight | Node badge background height | number \\| string | - |\n| backgroundLineDash | Node badge background dash configuration | number \\| string \\|(number \\| string )[] | - |\n| backgroundLineDashOffset | Node badge background dash offset | number | - |\n| backgroundLineWidth | Node badge background stroke line width | number | - |\n| backgroundRadius | Node badge background border radius
- number: Uniform setting for four border radii
- number[]: Set four border radii separately, automatically supplement missing values
- string: Similar to [CSS padding](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) property, separated by spaces | number \\| number[] \\| string | 0 |\n| backgroundShadowBlur | Node badge background shadow blur degree | number | - |\n| backgroundShadowColor | Node badge background shadow color | string | - |\n| backgroundShadowOffsetX | Node badge background shadow X direction offset | number | - |\n| backgroundShadowOffsetY | Node badge background shadow Y direction offset | number | - |\n| backgroundStroke | Node badge background stroke color | string | - |\n| backgroundStrokeOpacity | Node badge background stroke transparency | number \\| string | 1 |\n| backgroundVisibility | Whether node badge background is visible | `visible` \\| `hidden` | - |\n| backgroundZIndex | Node badge background rendering level | number | - |\n| fill | Node badge text color | string | - |\n| fontFamily | Node badge font family | string | - |\n| fontSize | Node badge font size | number | 8 |\n| fontStyle | Node badge font style | `normal` \\| `italic` \\| `oblique` | `normal` |\n| fontVariant | Node badge font variant | `normal` \\| `small-caps` \\| string | `normal` |\n| fontWeight | Node badge font weight | number \\| string | `normal` |\n| lineHeight | Node badge line height | string \\| number | - |\n| lineWidth | Node badge line width | string \\| number | - |\n| maxLines | Maximum lines for node badge text | number | 1 |\n| offsetX | Node badge offset in x-axis direction | number | 0 |\n| offsetY | Node badge offset in y-axis direction | number | 0 |\n| padding | Node badge padding | number \\| number[] | 0 |\n| placement | Position of node badge relative to node main graphic. If not specified, defaults to clockwise arrangement starting from top-right corner | `left` \\| `right` \\| `top` \\| `bottom` \\| `left-top` \\| `left-bottom` \\| `right-top` \\| `right-bottom` \\| `top-left` \\| `top-right` \\| `bottom-left` \\| `bottom-right` | - |\n| text | Node badge text content | string | - |\n| textAlign | Node badge text horizontal alignment | `start` \\| `center` \\| `middle` \\| `end` \\| `left` \\| `right` | `left` |\n| textBaseline | Node badge text baseline | `top` \\| `hanging` \\| `middle` \\| `alphabetic` \\| `ideographic` \\| `bottom` | `alphabetic` |\n| textDecorationColor | Node badge text decoration line color | string | - |\n| textDecorationLine | Node badge text decoration line | string | - |\n| textDecorationStyle | Node badge text decoration line style | `solid` \\| `double` \\| `dotted` \\| `dashed` \\| `wavy` | `solid` |\n| textOverflow | Node badge text overflow handling | `clip` \\| `ellipsis` \\| string | `clip` |\n| visibility | Whether node badge is visible | `visible` \\| `hidden` | - |\n| wordWrap | Whether node badge text automatically wraps | boolean | - |\n| zIndex | Node badge rendering level | number | 3 |\n\n### Port Style\n\nPorts are connection points on nodes, used to connect edges. Supports adding multiple ports at different positions on nodes with customizable styles.\n\n#### Basic Ports\n\nAdding four basic directional ports to a node:\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 100,\n autoFit: 'center',\n data: { nodes: [{ id: 'node1' }] },\n node: {\n style: {\n port: true,\n ports: [\n { key: 'top', placement: 'top', fill: '#7E92B5' },\n { key: 'right', placement: 'right', fill: '#F4664A' },\n { key: 'bottom', placement: 'bottom', fill: '#FFBE3A' },\n { key: 'left', placement: 'left', fill: '#D580FF' },\n ],\n portR: 3,\n portLineWidth: 1,\n portStroke: '#fff',\n },\n },\n});\n\ngraph.render();\n```\n\n#### Custom Position Ports\n\nUsing percentages or absolute coordinates to precisely position ports:\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 100,\n autoFit: 'center',\n data: { nodes: [{ id: 'node1' }] },\n node: {\n style: {\n ports: [\n { key: 'custom1', placement: [0.2, 0] }, // Relative position: 20% from top-left\n { key: 'custom2', placement: [0.8, 0] }, // Relative position: 80% from top-right\n { key: 'custom3', placement: [1, 0.5] }, // Relative position: right center\n ],\n portR: 4,\n portLineWidth: 1,\n portStroke: '#fff',\n },\n },\n});\n\ngraph.render();\n```\n\n#### Differentiated Port Styles\n\nSetting different styles for different ports:\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 100,\n autoFit: 'center',\n data: { nodes: [{ id: 'node1' }] },\n node: {\n style: {\n ports: [\n {\n key: 'input',\n placement: 'left',\n fill: '#52C41A', // Green input port\n r: 4,\n },\n {\n key: 'output',\n placement: 'right',\n fill: '#FF4D4F', // Red output port\n r: 4,\n },\n ],\n portStroke: '#fff', // Unified stroke color\n portLineWidth: 2,\n },\n },\n});\n\ngraph.render();\n```\n\nThe complete port style configuration is as follows:\n\n| Property | Description | Type | Default | Required |\n| -------- | ------------------------------------------------------------ | ----------------------------------- | ------- | -------- |\n| port | Whether the node displays ports | boolean | true | |\n| ports | Node port configuration, supports configuring multiple ports | [PortStyleProps](#portstyleprops)[] | - | |\n\n#### PortStyleProps\n\n| Property | Description | Type | Default | Required |\n| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------- | -------- |\n| key | Key value of node port, defaults to the index of the node port | string | - | |\n| placement | Position of node port relative to node main graphic | `left` \\| `right` \\| `top` \\| `bottom` \\| `center` \\| `left-top` \\| `left-bottom` \\| `right-top` \\| `right-bottom` \\| `top-left` \\| `top-right` \\| `bottom-left` \\| `bottom-right` \\| [number, number] | - | ✓ |\n| r | Node port radius
- If set to undefined, the port is treated as a point, not displayed on canvas but exists, edges will preferentially connect to the nearest port
- If set to a number, the port is treated as a circle with radius specified here | number | - | |\n| linkToCenter | Whether edges connect to the center of the node port
- If true, edges connect to the center of the node port
- If false, edges connect to the edge of the node port | boolean | false | |\n| cursor | Node port mouse hover style, [options](#cursor) | string | `default` | |\n| fill | Node port fill color | string | - | |\n| fillOpacity | Node port fill transparency | number | 1 | |\n| isBillboard | Whether node port has Billboard effect | boolean | - | |\n| isSizeAttenuation | Whether node port enables size attenuation | boolean | - | |\n| lineDash | Node port stroke dash configuration | number \\| string \\|(number \\| string )[] | - | |\n| lineDashOffset | Node port stroke dash offset | number | - | |\n| lineWidth | Node port stroke line width | number | - | |\n| shadowBlur | Node port shadow blur degree | number | - | |\n| shadowColor | Node port shadow color | string | - | |\n| shadowOffsetX | Node port shadow X direction offset | number | - | |\n| shadowOffsetY | Node port shadow Y direction offset | number | - | |\n| stroke | Node port stroke color | string | - | |\n| strokeOpacity | Node port stroke transparency | number \\| string | 1 | |\n| visibility | Whether node port is visible | `visible` \\| `hidden` | `visible` | |\n| zIndex | Node port rendering level | number | 2 | |\n\n## State\n\nIn some interactive behaviors, such as clicking to select a node or hovering to activate an edge, only certain state identifications are made on the element. To reflect these states in the visual space seen by end users, we need to set different graphic element styles for different states to respond to changes in the state of the graphic element.\n\nG6 provides several built-in states, including selected, highlight, active, inactive, and disabled. In addition, it also supports custom states to meet more specific needs. For each state, developers can define a set of style rules that will override the element's default styles.\n\n
![](\"https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*t2qvRp92itkAAAAAAAAAAAAADmJ7AQ/original\")
\n\nThe data structure is as follows:\n\n```typescript\ntype NodeState = {\n [state: string]: NodeStyle;\n};\n```\n\nFor example, when a node is in the `focus` state, you can add a stroke with width 3 and orange color.\n\n```js {4-7}\nconst graph = new Graph({\n node: {\n state: {\n focus: {\n lineWidth: 3, // Stroke width\n stroke: 'orange', // Stroke color\n },\n },\n },\n});\n```\n\nThe effect is shown in the figure below:\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 100,\n autoFit: 'center',\n data: {\n nodes: [{ id: 'node1', states: ['focus'] }],\n },\n node: {\n state: {\n focus: {\n lineWidth: 3,\n stroke: 'orange',\n },\n },\n },\n});\n\ngraph.render();\n```\n\n## Animation\n\nDefines animation effects for nodes, supporting the following two configuration methods:\n\n1. Disable all node animations\n\n```json\n{\n \"node\": {\n \"animation\": false\n }\n}\n```\n\n2. Configure stage animations\n\nStage animations refer to animation effects when nodes enter the canvas, update, or leave the canvas. Currently supported stages include:\n\n- `enter`: Animation when nodes enter the canvas\n- `update`: Animation when nodes are updated\n- `exit`: Animation when nodes leave the canvas\n- `show`: Animation when nodes are shown from hidden state\n- `hide`: Animation when nodes are hidden\n- `collapse`: Animation when nodes are collapsed\n- `expand`: Animation when nodes are expanded\n\nYou can refer to [Animation Paradigm](/en/manual/animation/animation#animation-paradigm) to use animation syntax to configure nodes, such as:\n\n```json\n{\n \"node\": {\n \"animation\": {\n \"update\": [\n {\n \"fields\": [\"x\", \"y\"], // Only animate x and y properties during updates\n \"duration\": 1000, // Animation duration\n \"easing\": \"linear\" // Easing function\n }\n ]\n }\n }\n}\n```\n\nYou can also use built-in animation effects:\n\n```json\n{\n \"node\": {\n \"animation\": {\n \"enter\": \"fade\", // Use fade animation\n \"update\": \"translate\", // Use translate animation\n \"exit\": \"fade\" // Use fade animation\n }\n }\n}\n```\n\nYou can pass false to disable animations for specific stages:\n\n```json\n{\n \"node\": {\n \"animation\": {\n \"enter\": false // Disable node entrance animation\n }\n }\n}\n```\n\n## Palette\n\nDefines the color palette for nodes, i.e., predefined node color pool, and allocates according to rules, mapping colors to the `fill` property.\n\n> For the definition of palettes, please refer to [Palette](/en/manual/theme/palette).\n\n| Property | Description | Type | Default |\n| -------- | --------------------------------------------------------------------------------------------------------------------- | ----------------------------- | ------- |\n| color | Palette colors. If the palette is registered, you can directly specify its registration name, or accept a color array | string \\| string[] | - |\n| field | Specify the grouping field in element data. If not specified, defaults to id as the grouping field | string \\| ((datum) => string) | `id` |\n| invert | Whether to invert the palette | boolean | false |\n| type | Specify the current palette type. - `group`: Discrete palette
- `value`: Continuous palette | `group` \\| `value` | `group` |\n\nFor example, assigning node colors to a group of data by `category` field, so that nodes of the same category have the same color:\n\n```json\n{\n \"node\": {\n \"palette\": {\n \"type\": \"group\",\n \"field\": \"category\",\n \"color\": [\"#1783FF\", \"#F08F56\", \"#D580FF\", \"#00C9C9\", \"#7863FF\"]\n }\n }\n}\n```\n\nThe effect is shown in the figure below:\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 600,\n height: 100,\n data: {\n nodes: new Array(10)\n .fill(0)\n .map((_, i) => ({ id: `node-${i}`, data: { category: ['A', 'B', 'C', 'D', 'E'][i % 5] } })),\n },\n layout: { type: 'grid', cols: 10 },\n node: {\n palette: {\n type: 'group',\n field: 'category',\n color: ['#1783FF', '#F08F56', '#D580FF', '#00C9C9', '#7863FF'],\n },\n },\n});\n\ngraph.render();\n```\n\nYou can also use default configuration:\n\n```json\n{\n \"node\": {\n \"palette\": \"tableau\" // tableau is the palette name, defaults to assigning colors based on ID\n }\n}\n```\n\nThe effect is shown in the figure below:\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 600,\n height: 100,\n data: {\n nodes: new Array(10)\n .fill(0)\n .map((_, i) => ({ id: `node-${i}`, data: { category: ['A', 'B', 'C', 'D', 'E'][i % 5] } })),\n },\n layout: { type: 'grid', cols: 10 },\n node: {\n palette: 'tableau',\n },\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/element/node/BaseNode.zh.md":"---\ntitle: 节点通用配置项\norder: 1\n---\n\n本文介绍内置节点通用属性配置。\n\n## NodeOptions\n\n```js {5-9}\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n node: {\n type: 'circle', // 节点类型\n style: {}, // 节点样式\n state: {}, // 状态样式\n palette: {}, // 色板配置\n animation: {}, // 动画配置\n },\n});\n```\n\n| 属性 | 描述 | 类型 | 默认值 | 必选 |\n| --------- | -------------------------------------------- | ----------------------- | -------- | ---- |\n| type | 节点类型，内置节点类型名称或自定义节点的名称 | [Type](#type) | `circle` | |\n| style | 节点样式配置，包括颜色、大小等 | [Style](#style) | - | |\n| state | 不同状态下的样式配置 | [State](#state) | - | |\n| palette | 定义节点的色板，用于根据不同数据映射颜色 | [Palette](#palette) | - | |\n| animation | 定义节点的动画效果 | [Animation](#animation) | - | |\n\n## Type\n\n指定节点类型，内置节点类型名称或自定义节点的名称。默认为 `circle`(圆形)。**⚠️ 注意**：这里决定了主图形的形状。\n\n```js {3}\nconst graph = new Graph({\n node: {\n type: 'circle',\n },\n});\n```\n\n**⚠️ 动态配置说明**：`type` 属性同样支持动态配置，可以根据节点数据动态选择节点类型：\n\n```js\nconst graph = new Graph({\n node: {\n // 静态配置\n type: 'circle',\n\n // 动态配置 - 箭头函数形式\n type: (datum) => datum.data.nodeType || 'circle',\n\n // 动态配置 - 普通函数形式（可访问 graph 实例）\n type: function (datum) {\n console.log(this); // graph 实例\n return datum.data.category === 'important' ? 'diamond' : 'circle';\n },\n },\n});\n```\n\n可选值有：\n\n- `circle`：[圆形节点](/manual/element/node/circle)\n- `diamond`：[菱形节点](/manual/element/node/diamond)\n- `donut`：[甜甜圈节点](/manual/element/node/donut)\n- `ellipse`：[椭圆节点](/manual/element/node/ellipse)\n- `hexagon`：[六边形节点](/manual/element/node/hexagon)\n- `html`：[HTML 节点](/manual/element/node/html)\n- `image`：[图片节点](/manual/element/node/image)\n- `rect`：[矩形节点](/manual/element/node/rect)\n- `star`：[星形节点](/manual/element/node/star)\n- `triangle`：[三角形节点](/manual/element/node/triangle)\n\n## Style\n\n定义节点的样式，包括颜色、大小等。\n\n```js {3}\nconst graph = new Graph({\n node: {\n style: {},\n },\n});\n```\n\n**⚠️ 动态配置说明**：以下所有样式属性都支持动态配置，即可以传入函数来根据节点数据动态计算属性值：\n\n```js\nconst graph = new Graph({\n node: {\n style: {\n // 静态配置\n fill: '#1783FF',\n\n // 动态配置 - 箭头函数形式\n stroke: (datum) => (datum.data.isActive ? '#FF0000' : '#000000'),\n\n // 动态配置 - 普通函数形式（可访问 graph 实例）\n lineWidth: function (datum) {\n console.log(this); // graph 实例\n return datum.data.importance > 5 ? 3 : 1;\n },\n\n // 嵌套属性也支持动态配置\n labelText: (datum) => `节点: ${datum.id}`,\n badges: (datum) => datum.data.tags.map((tag) => ({ text: tag })),\n },\n },\n});\n```\n\n其中 `datum` 参数为节点数据对象 (`NodeData`)，包含节点的所有数据信息。\n\n一个完整的节点由以下几部分构成：\n\n
\n\n- `key` ：节点的主图形，表示节点的主要形状，例如矩形、圆形等；\n- `label` ：文本标签，通常用于展示节点的名称或描述；\n- `icon` ：图标图形，通常用于展示节点的图标，可以是图片或者文本图标；\n- `badge` ：默认位于节点右上角的徽标；\n- `halo` ：主图形周围展示的光晕效果的图形；\n- `port` ：节点上的连接点，用于连接边。\n\n以下样式配置将按原子图形依次说明：\n\n### 主图形样式\n\n主图形是节点的核心部分，定义了节点的基本形状和外观。以下是常见的配置场景：\n\n#### 基础样式配置\n\n设置节点的基本外观：\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 100,\n autoFit: 'center',\n data: { nodes: [{ id: 'node1' }] },\n node: {\n style: {\n fill: '#5B8FF9', // 蓝色填充\n stroke: '#1A1A1A', // 深色描边\n lineWidth: 2,\n size: 40,\n },\n },\n});\n\ngraph.render();\n```\n\n#### 透明度和阴影效果\n\n为节点添加透明度和阴影效果：\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 100,\n autoFit: 'center',\n data: { nodes: [{ id: 'node1' }] },\n node: {\n style: {\n fill: '#61DDAA',\n fillOpacity: 0.85,\n shadowColor: 'rgba(97, 221, 170, 0.4)',\n shadowBlur: 12,\n shadowOffsetX: 2,\n shadowOffsetY: 4,\n stroke: '#F0F0F0',\n lineWidth: 1,\n },\n },\n});\n\ngraph.render();\n```\n\n#### 虚线边框样式\n\n创建带虚线边框的节点：\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 100,\n autoFit: 'center',\n data: { nodes: [{ id: 'node1' }] },\n node: {\n style: {\n fill: '#FFF1F0',\n stroke: '#F5222D',\n lineWidth: 2,\n lineDash: [6, 4],\n lineCap: 'round',\n },\n },\n});\n\ngraph.render();\n```\n\n以下为完整的主图形样式配置：\n\n| 属性 | 描述 | 类型 | 默认值 | 必选 |\n| ------------------------------- | ----------------------------------------------------------------------------------------- | ----------------------------- | --------- | ---- |\n| collapsed | 当前节点/组合是否折叠 | boolean | false | |\n| cursor | 节点鼠标移入样式，[配置项](#cursor) | string | default | |\n| fill | 节点填充色 | string | `#1783FF` | |\n| fillOpacity | 节点填充色透明度 | number \\| string | 1 | |\n| increasedLineWidthForHitTesting | 当 lineWidth 较小时，可交互区域也随之变小，有时我们想增大这个区域，让\"细线\"更容易被拾取到 | number | 0 | |\n| lineCap | 节点描边端点样式 | `round` \\| `square` \\| `butt` | `butt` | |\n| lineDash | 节点描边虚线样式 | number[] | - | |\n| lineDashOffset | 节点描边虚线偏移量 | number | - | |\n| lineJoin | 节点描边连接处样式 | `round` \\| `bevel` \\| `miter` | `miter` | |\n| lineWidth | 节点描边宽度 | number | 1 | |\n| opacity | 节点透明度 | number \\| string | 1 | |\n| pointerEvents | 节点如何响应指针事件，[配置项](#pointerevents) | string | `auto` | |\n| shadowBlur | 节点阴影模糊度 | number | - | |\n| shadowColor | 节点阴影颜色 | string | - | |\n| shadowOffsetX | 节点阴影在 x 轴方向上的偏移量 | number \\| string | - | |\n| shadowOffsetY | 节点阴影在 y 轴方向上的偏移量 | number \\| string | - | |\n| shadowType | 节点阴影类型 | `inner` \\| `outer` | `outer` | |\n| size | 节点大小，快捷设置节点宽高，[配置项](#size) | number \\| number[] | 32 | |\n| stroke | 节点描边色 | string | `#000` | |\n| strokeOpacity | 节点描边色透明度 | number \\| string | 1 | |\n| transform | transform 属性允许你旋转、缩放、倾斜或平移给定节点 | string | - | |\n| transformOrigin | 旋转与缩放中心，也称作变换中心 | string | - | |\n| visibility | 节点是否可见 | `visible` \\| `hidden` | `visible` | |\n| x | 节点 x 坐标 | number | 0 | |\n| y | 节点 y 坐标 | number | 0 | |\n| z | 节点 z 坐标 | number | 0 | |\n| zIndex | 节点渲染层级 | number | 0 | |\n\n#### Size\n\n节点大小，快捷设置节点宽高，支持三种配置方式：\n\n- number：表示节点宽高相同为指定值\n- [number, number]：表示节点宽高分别为数组元素依次表示节点的宽度、高度\n- [number, number, number]：表示节点宽高分别为数组元素依次表示节点的宽度、高度以及深度\n\n#### PointerEvents\n\n`pointerEvents` 属性控制图形如何响应交互事件，可参考 [MDN 文档](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events)。\n\n可选值有：`visible` | `visiblepainted` | `visiblestroke` | `non-transparent-pixel` | `visiblefill` | `visible` | `painted` | `fill` | `stroke` | `all` | `none` | `auto` | `inherit` | `initial` | `unset`\n\n简而言之，`fill`、`stroke` 和 `visibility` 都可以独立或组合影响拾取判定行为。目前支持以下关键词：\n\n- **`auto`**：默认值，等同于 `visiblepainted`\n- **`none`**：永远不会成为响应事件的目标\n- **`visiblepainted`**：满足以下条件才会响应事件：\n - `visibility` 设置为 `visible`，即图形为可见的\n - 在图形填充区域触发同时 `fill` 取非 `none` 的值；或者在图形描边区域触发同时 `stroke` 取非 `none` 的值\n- **`visiblefill`**：满足以下条件才会响应事件：\n - `visibility` 设置为 `visible`，即图形为可见的\n - 在图形填充区域触发，不受 `fill` 取值的影响\n- **`visiblestroke`**：满足以下条件才会响应事件：\n - `visibility` 设置为 `visible`，即图形为可见的\n - 在图形描边区域触发，不受 `stroke` 取值的影响\n- **`visible`**：满足以下条件才会响应事件：\n - `visibility` 设置为 `visible`，即图形为可见的\n - 在图形填充或者描边区域触发，不受 `fill` 和 `stroke` 取值的影响\n- **`painted`**：满足以下条件才会响应事件：\n - 在图形填充区域触发同时 `fill` 取非 `none` 的值；或者在图形描边区域触发同时 `stroke` 取非 `none` 的值\n - 不受 `visibility` 取值的影响\n- **`fill`**：满足以下条件才会响应事件：\n - 在图形填充区域触发，不受 `fill` 取值的影响\n - 不受 `visibility` 取值的影响\n- **`stroke`**：满足以下条件才会响应事件：\n - 在图形描边区域触发，不受 `stroke` 取值的影响\n - 不受 `visibility` 取值的影响\n- **`all`**：只要进入图形的填充和描边区域就会响应事件，不会受 `fill`、`stroke`、`visibility` 的取值影响\n\n**使用示例：**\n\n```js\n// 示例1：只有描边区域响应事件\nconst graph = new Graph({\n node: {\n style: {\n fill: 'none',\n stroke: '#000',\n lineWidth: 2,\n pointerEvents: 'stroke', // 只有描边响应事件\n },\n },\n});\n\n// 示例2：完全不响应事件\nconst graph = new Graph({\n node: {\n style: {\n pointerEvents: 'none', // 节点不响应任何事件\n },\n },\n});\n```\n\n#### Cursor\n\n可选值有：`auto` | `default` | `none` | `context-menu` | `help` | `pointer` | `progress` | `wait` | `cell` | `crosshair` | `text` | `vertical-text` | `alias` | `copy` | `move` | `no-drop` | `not-allowed` | `grab` | `grabbing` | `all-scroll` | `col-resize` | `row-resize` | `n-resize` | `e-resize` | `s-resize` | `w-resize` | `ne-resize` | `nw-resize` | `se-resize` | `sw-resize` | `ew-resize` | `ns-resize` | `nesw-resize` | `nwse-resize` | `zoom-in` | `zoom-out`\n\n### 标签样式\n\n标签用于显示节点的文本信息，支持多种样式配置和布局方式。以下是常见的使用场景：\n\n#### 基础文本标签\n\n最简单的文本标签配置：\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 120,\n autoFit: 'center',\n data: { nodes: [{ id: 'node1' }] },\n node: {\n style: {\n labelText: '节点名称',\n labelFill: '#262626',\n labelFontSize: 12,\n labelPlacement: 'bottom',\n },\n },\n});\n\ngraph.render();\n```\n\n#### 多行文本标签\n\n当文本较长时，可以设置自动换行：\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 120,\n autoFit: 'center',\n data: { nodes: [{ id: 'node1' }] },\n node: {\n style: {\n labelText: '这是一个很长的节点名称需要换行显示',\n labelWordWrap: true,\n labelMaxWidth: '150%',\n labelMaxLines: 3,\n labelTextOverflow: 'ellipsis',\n labelFill: '#434343',\n labelPlacement: 'bottom',\n labelTextAlign: 'center',\n },\n },\n});\n\ngraph.render();\n```\n\n#### 带背景的标签\n\n为标签添加背景，提高可读性：\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 120,\n autoFit: 'center',\n data: { nodes: [{ id: 'node1' }] },\n node: {\n style: {\n labelText: '重要节点',\n labelBackground: true,\n labelBackgroundFill: 'rgba(250, 140, 22, 0.1)',\n labelBackgroundRadius: 6,\n labelPadding: [6, 12],\n labelFill: '#D4380D',\n labelFontWeight: 'bold',\n labelPlacement: 'bottom',\n },\n },\n});\n\ngraph.render();\n```\n\n以下为完整的标签样式配置：\n\n| 属性 | 描述 | 类型 | 默认值 | 必选 |\n| ------------------------ | ---------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | --------- | ---- |\n| label | 是否显示节点标签 | boolean | true | |\n| labelCursor | 鼠标移入节点标签时显示的样式，[配置项](#cursor) | string | `default` | |\n| labelFill | 节点标签文字颜色 | string | - | |\n| labelFontFamily | 节点标签字体族 | string | - | |\n| labelFontSize | 节点标签字体大小 | number | 12 | |\n| labelFontStyle | 节点标签字体样式 | `normal` \\| `italic` \\| `oblique` | - | |\n| labelFontVariant | 节点标签字体变种 | `normal` \\| `small-caps` \\| string | - | |\n| labelFontWeight | 节点标签字体粗细 | `normal` \\| `bold` \\| `bolder` \\| `lighter` \\| number | - | |\n| labelLeading | 行间距 | number | 0 | |\n| labelLetterSpacing | 节点标签字间距 | number \\| string | - | |\n| labelLineHeight | 节点标签行高 | number \\| string | - | |\n| labelMaxLines | 节点标签最大行数 | number | 1 | |\n| labelMaxWidth | 节点标签最大宽度，[配置项](#labelmaxwidth) | number \\| string | `200%` | |\n| labelOffsetX | 节点标签在 x 轴方向上的偏移量 | number | 0 | |\n| labelOffsetY | 节点标签在 y 轴方向上的偏移量 | number | 0 | |\n| labelPadding | 节点标签内边距 | number \\| number[] | 0 | |\n| labelPlacement | 节点标签相对于节点主图形的位置，[配置项](#labelplacement) | string | `bottom` | |\n| labelText | 节点标签文字内容 | `string` \\| `(datum) => string` | - | |\n| labelTextAlign | 节点标签文本水平对齐方式 | `start` \\| `center` \\| `middle` \\| `end` \\| `left` \\| `right` | `left` | |\n| labelTextBaseline | 节点标签文本基线 | `top` \\| `hanging` \\| `middle` \\| `alphabetic` \\| `ideographic` \\| `bottom` | - | |\n| labelTextDecorationColor | 节点标签文本装饰线颜色 | string | - | |\n| labelTextDecorationLine | 节点标签文本装饰线 | string | - | |\n| labelTextDecorationStyle | 节点标签文本装饰线样式 | `solid` \\| `double` \\| `dotted` \\| `dashed` \\| `wavy` | - | |\n| labelTextOverflow | 节点标签文本溢出处理方式 | `clip` \\| `ellipsis` \\| string | - | |\n| labelTextPath | 节点标签文本路径 | Path | - | |\n| labelWordWrap | 节点标签是否开启自动折行。开启 labelWordWrap 后，超出 labelMaxWidth 的部分自动换行 | boolean | false | |\n| labelZIndex | 节点标签渲染层级 | number | 0 | |\n\n#### LabelPlacement\n\n可选值有：`left` | `right` | `top` | `bottom` | `left-top` | `left-bottom` | `right-top` | `right-bottom` | `top-left` | `top-right` | `bottom-left` | `bottom-right` | `center` | `bottom`\n\n#### LabelMaxWidth\n\n开启自动折行 `labelWordWrap` 后，超出该宽度则换行:\n\n- string: 表示以相对于节点宽度的百分比形式定义最大宽度。例如 `50%` 表示标签宽度不超过节点宽度的一半\n- number: 表示以像素值为单位定义最大宽度。例如 100 表示标签的最大宽度为 100 像素\n\n比如，设置多行标签文字：\n\n```json\n{\n \"labelWordWrap\": true,\n \"labelMaxWidth\": 200,\n \"labelMaxLines\": 3\n}\n```\n\n### 标签背景样式\n\n标签背景用于显示节点标签的背景：\n\n| 属性 | 描述 | 类型 | 默认值 |\n| ----------------------------- | -------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | --------- |\n| labelBackground | 节点标签背景是否显示 | boolean | false |\n| labelBackgroundCursor | 节点标签背景鼠标移入样式，[配置项](#cursor) | string | `default` |\n| labelBackgroundFill | 节点标签背景填充色 | string | - |\n| labelBackgroundFillOpacity | 节点标签背景透明度 | number | 1 |\n| labelBackgroundHeight | 节点标签背景高度 | string \\| number | - |\n| labelBackgroundLineDash | 节点标签背景虚线配置 | number \\| string \\|(number \\| string )[] | - |\n| labelBackgroundLineDashOffset | 节点标签背景虚线偏移量 | number | - |\n| labelBackgroundLineWidth | 节点标签背景描边线宽 | number | - |\n| labelBackgroundRadius | 节点标签背景圆角半径 - number: 统一设置四个圆角半径
- number[]: 分别设置四个圆角半径，不足则自动补充 | number \\| number[] | 0 |\n| labelBackgroundShadowBlur | 节点标签背景阴影模糊程度 | number | - |\n| labelBackgroundShadowColor | 节点标签背景阴影颜色 | string | - |\n| labelBackgroundShadowOffsetX | 节点标签背景阴影 X 方向偏移 | number | - |\n| labelBackgroundShadowOffsetY | 节点标签背景阴影 Y 方向偏移 | number | - |\n| labelBackgroundStroke | 节点标签背景描边颜色 | string | - |\n| labelBackgroundStrokeOpacity | 节点标签背景描边透明度 | number \\| string | 1 |\n| labelBackgroundVisibility | 节点标签背景是否可见 | `visible` \\| `hidden` | - |\n| labelBackgroundZIndex | 节点标签背景渲染层级 | number | 1 |\n\n### 光晕样式\n\n光晕是围绕节点主图形显示的效果，通常用于高亮显示或表示节点的特殊状态。\n\n#### 基础光晕效果\n\n为节点添加基本的光晕效果：\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 100,\n autoFit: 'center',\n data: { nodes: [{ id: 'node1' }] },\n node: {\n style: {\n lineWidth: 1.5,\n halo: true,\n haloStroke: '#1890FF',\n haloLineWidth: 6,\n haloStrokeOpacity: 0.3,\n },\n },\n});\n\ngraph.render();\n```\n\n以下为完整的光晕样式配置：\n\n| 属性 | 描述 | 类型 | 默认值 | 必选 |\n| ----------------- | ---------------------------------------------------------------------- | ---------------------- | ---------------------------- | ---- |\n| halo | 节点光晕是否显示 | boolean | false | |\n| haloCursor | 节点光晕鼠标移入样式，[配置项](#cursor) | strig | `default` | |\n| haloDraggable | 节点光晕是否允许拖拽 | boolean | true | |\n| haloDroppable | 节点光晕是否允许接收被拖拽的元素 | boolean | true | |\n| haloFillRule | 节点光晕填充规则 | `nonzero` \\| `evenodd` | - | |\n| haloFilter | 节点光晕滤镜 | string | - | |\n| haloLineWidth | 节点光晕描边宽度 | number | 3 | |\n| haloPointerEvents | 节点光晕效果是否响应指针事件，[配置项](#pointerevents) | string | `none` | |\n| haloStroke | 节点光晕描边色，**此属性用于设置节点周围光晕的颜色，帮助突出显示节点** | string | 与主图形的填充色 `fill` 一致 | |\n| haloStrokeOpacity | 节点光晕描边色透明度 | number | 0.25 | |\n| haloVisibility | 节点光晕可见性 | `visible` \\| `hidden` | `visible` | |\n| haloZIndex | 节点光晕渲染层级 | number | -1 | |\n\n### 图标样式\n\n节点图标支持三种常见的使用方式：文字图标、图片图标和 IconFont 图标。下面分别展示这三种方式的配置：\n\n#### 1. 文字图标\n\n直接使用文字作为图标，适合简单的标识：\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 100,\n autoFit: 'center',\n data: { nodes: [{ id: 'node1' }] },\n node: {\n style: {\n fill: '#FFF0F6',\n stroke: '#EB2F96',\n lineWidth: 1.5,\n iconText: 'A', // 图标文字内容\n iconFill: '#C41D7F', // 深粉色图标\n iconFontSize: 16,\n iconFontWeight: 'bold',\n },\n },\n});\n\ngraph.render();\n```\n\n#### 2. 图片图标\n\n使用图片作为图标，支持各种图片格式：\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 100,\n autoFit: 'center',\n data: { nodes: [{ id: 'node1' }] },\n node: {\n style: {\n fill: '#F6FFED',\n stroke: '#52C41A',\n lineWidth: 1.5,\n iconSrc:\n 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDJMMTMuMDkgOC4yNkwyMSA5TDEzLjA5IDE1Ljc4TDEyIDIyTDEwLjkxIDE1Ljc4TDMgOUwxMC45MSA4LjI2TDEyIDJaIiBmaWxsPSIjNTJDNDFBIi8+Cjwvc3ZnPgo=',\n iconWidth: 20,\n iconHeight: 20,\n },\n },\n});\n\ngraph.render();\n```\n\n#### 3. IconFont 图标\n\n使用 IconFont 字体图标，需要先引入相应的字体文件：\n\n```js | ob { inject: true }\nimport { Graph, iconfont } from '@antv/g6';\n\nconst style = document.createElement('style');\nstyle.innerHTML = `@import url('${iconfont.css}');`;\ndocument.head.appendChild(style);\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 100,\n autoFit: 'center',\n data: { nodes: [{ id: 'node1' }] },\n node: {\n style: {\n fill: '#E6F7FF', // 淡蓝色背景\n stroke: '#1890FF', // 蓝色边框\n lineWidth: 1.5,\n iconFontFamily: 'iconfont',\n iconText: '\\ue602',\n iconFill: '#1890FF',\n },\n },\n});\n\ngraph.render();\n```\n\n以下为完整的图标样式配置：\n\n| 属性 | 描述 | 类型 | 默认值 |\n| ----------------------- | ----------------------------------- | --------------------------------------------------------------------------- | ---------------- |\n| icon | 是否显示节点图标 | boolean | true |\n| iconFill | 节点图标文字颜色 | string | - |\n| iconFontFamily | 节点图标字体族 | string | - |\n| iconFontSize | 节点图标字体大小 | number | 16 |\n| iconFontStyle | 节点图标字体样式 | `normal` \\| `italic` \\| `oblique` | `normal` |\n| iconFontVariant | 节点图标字体变种 | `normal` \\| `small-caps` \\| string | `normal` |\n| iconFontWeight | 节点图标字体粗细 | number \\| string | `normal` |\n| iconHeight | 节点图标高度 | number | 主图形高度的一半 |\n| iconLetterSpacing | 节点图标文本字间距 | number \\| string | - |\n| iconLineHeight | 节点图标文本行高 | number \\| string | - |\n| iconMaxLines | 节点图标文本最大行数 | number | 1 |\n| iconRadius | 节点图标圆角半径 | number | 0 |\n| iconSrc | 节点图片来源。其优先级高于 iconText | string \\| ((datum) => string) | - |\n| iconText | 节点图标文字 | string \\| ((datum) => string) | - |\n| iconTextAlign | 节点图标文本水平对齐方式 | `start` \\| `center` \\| `middle` \\| `end` \\| `left` \\| `right` | `left` |\n| iconTextBaseline | 节点图标文本基线 | `top` \\| `hanging` \\| `middle` \\| `alphabetic` \\| `ideographic` \\| `bottom` | `alphabetic` |\n| iconTextDecorationColor | 节点图标文本装饰线颜色 | string | - |\n| iconTextDecorationLine | 节点图标文本装饰线 | string | - |\n| iconTextDecorationStyle | 节点图标文本装饰线样式 | `solid` \\| `double` \\| `dotted` \\| `dashed` \\| `wavy` | `solid` |\n| iconTextOverflow | 节点图标文本溢出处理方式 | `clip` \\| `ellipsis` \\| string | `clip` |\n| iconWidth | 节点图标宽度 | number | 主图形宽度的一半 |\n| iconWordWrap | 节点图标文本是否自动换行 | boolean | - |\n\n### 徽标样式\n\n徽标是节点上显示的小标记，通常用于展示状态、数量或其他辅助信息。支持多个徽标同时显示，并可自定义位置。\n\n#### 单个徽标\n\n为节点添加一个简单的徽标：\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 100,\n autoFit: 'center',\n data: { nodes: [{ id: 'node1' }] },\n node: {\n style: {\n badges: [\n { text: 'NEW' }, // 默认显示在上方\n ],\n },\n },\n});\n\ngraph.render();\n```\n\n#### 多个徽标\n\n为节点添加多个不同位置的徽标：\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 100,\n autoFit: 'center',\n data: { nodes: [{ id: 'node1' }] },\n node: {\n style: {\n badge: true, // 是否显示徽标\n badges: [\n { text: 'A', placement: 'right-top' },\n { text: 'Important', placement: 'right' },\n { text: 'Notice', placement: 'right-bottom' },\n ],\n badgePalette: ['#7E92B5', '#F4664A', '#FFBE3A'], // 徽标的背景色板\n badgeFontSize: 7, // 徽标字体大小\n },\n },\n});\n\ngraph.render();\n```\n\n#### 自定义徽标样式\n\n完全自定义徽标的外观：\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 100,\n autoFit: 'center',\n data: { nodes: [{ id: 'node1' }] },\n node: {\n style: {\n badges: [\n {\n text: '99+',\n placement: 'right-top',\n backgroundFill: '#FF4D4F', // 红色背景\n fill: '#fff', // 白色文字\n fontSize: 10,\n padding: [2, 6],\n backgroundRadius: 8,\n },\n ],\n },\n },\n});\n\ngraph.render();\n```\n\n以下为完整的徽标样式配置：\n\n| 属性 | 描述 | 类型 | 默认值 |\n| ------------ | ------------------ | ------------------------------------- | --------------------------------- |\n| badge | 节点是否显示徽标 | boolean | true |\n| badgePalette | 节点徽标的背景色板 | string[] | [`#7E92B5`, `#F4664A`, `#FFBE3A`] |\n| badges | 节点徽标设置 | [BadgeStyleProps](#badgestyleprops)[] | - |\n\n#### BadgeStyleProps\n\n| 属性 | 描述 | 类型 | 默认值 |\n| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |\n| background | 节点徽标是否显示背景 | boolean | true |\n| backgroundCursor | 节点徽标背景鼠标移入样式，[配置项](#cursor) | string | `default` |\n| backgroundFill | 节点徽标背景填充色。若不指定，优先考虑 badgePalette 按顺序分配 | string | - |\n| backgroundFillOpacity | 节点徽标背景填充透明度 | number | 1 |\n| backgroundFilter | 节点徽标背景滤镜 | string | - |\n| backgroundHeight | 节点徽标背景高度 | number \\| string | - |\n| backgroundLineDash | 节点徽标背景虚线配置 | number \\| string \\|(number \\| string )[] | - |\n| backgroundLineDashOffset | 节点徽标背景虚线偏移量 | number | - |\n| backgroundLineWidth | 节点徽标背景描边线宽 | number | - |\n| backgroundRadius | 节点徽标背景圆角半径
- number: 统一设置四个圆角半径
- number[]: 分别设置四个圆角半径，会补足缺省的分量
- string: 与 [CSS padding](https://developer.mozilla.org/zh-CN/docs/Web/CSS/padding) 属性类似，使用空格分隔 | number \\| number[] \\| string | 0 |\n| backgroundShadowBlur | 节点徽标背景阴影模糊程度 | number | - |\n| backgroundShadowColor | 节点徽标背景阴影颜色 | string | - |\n| backgroundShadowOffsetX | 节点徽标背景阴影 X 方向偏移 | number | - |\n| backgroundShadowOffsetY | 节点徽标背景阴影 Y 方向偏移 | number | - |\n| backgroundStroke | 节点徽标背景描边颜色 | string | - |\n| backgroundStrokeOpacity | 节点徽标背景描边透明度 | number \\| string | 1 |\n| backgroundVisibility | 节点徽标背景是否可见 | `visible` \\| `hidden` | - |\n| backgroundZIndex | 节点徽标背景渲染层级 | number | - |\n| fill | 节点徽标文字颜色 | string | - |\n| fontFamily | 节点徽标字体族 | string | - |\n| fontSize | 节点徽标字体大小 | number | 8 |\n| fontStyle | 节点徽标字体样式 | `normal` \\| `italic` \\| `oblique` | `normal` |\n| fontVariant | 节点徽标字体变种 | `normal` \\| `small-caps` \\| string | `normal` |\n| fontWeight | 节点徽标字体粗细 | number \\| string | `normal` |\n| lineHeight | 节点徽标行高 | string \\| number | - |\n| lineWidth | 节点徽标行宽 | string \\| number | - |\n| maxLines | 节点徽标文本最大行数 | number | 1 |\n| offsetX | 节点徽标在 x 轴方向上的偏移量 | number | 0 |\n| offsetY | 节点徽标在 y 轴方向上的偏移量 | number | 0 |\n| padding | 节点徽标内边距 | number \\| number[] | 0 |\n| placement | 节点徽标相对于节点主图形的位置。若不指定，默认从右上角顺时针依次排放 | `left` \\| `right` \\| `top` \\| `bottom` \\| `left-top` \\| `left-bottom` \\| `right-top` \\| `right-bottom` \\| `top-left` \\| `top-right` \\| `bottom-left` \\| `bottom-right` | - |\n| text | 节点徽标文字内容 | string | - |\n| textAlign | 节点徽标文本水平对齐方式 | `start` \\| `center` \\| `middle` \\| `end` \\| `left` \\| `right` | `left` |\n| textBaseline | 节点徽标文本基线 | `top` \\| `hanging` \\| `middle` \\| `alphabetic` \\| `ideographic` \\| `bottom` | `alphabetic` |\n| textDecorationColor | 节点徽标文本装饰线颜色 | string | - |\n| textDecorationLine | 节点徽标文本装饰线 | string | - |\n| textDecorationStyle | 节点徽标文本装饰线样式 | `solid` \\| `double` \\| `dotted` \\| `dashed` \\| `wavy` | `solid` |\n| textOverflow | 节点徽标文本溢出处理方式 | `clip` \\| `ellipsis` \\| string | `clip` |\n| visibility | 节点徽标是否可见 | `visible` \\| `hidden` | - |\n| wordWrap | 节点徽标文本是否自动换行 | boolean | - |\n| zIndex | 节点徽标渲染层级 | number | 3 |\n\n### 连接桩样式\n\n连接桩是节点上的连接点，用于连接边。支持在节点的不同位置添加多个连接桩，并可自定义样式。\n\n#### 基础连接桩\n\n为节点添加四个基本方向的连接桩：\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 100,\n autoFit: 'center',\n data: { nodes: [{ id: 'node1' }] },\n node: {\n style: {\n port: true,\n ports: [\n { key: 'top', placement: 'top', fill: '#7E92B5' },\n { key: 'right', placement: 'right', fill: '#F4664A' },\n { key: 'bottom', placement: 'bottom', fill: '#FFBE3A' },\n { key: 'left', placement: 'left', fill: '#D580FF' },\n ],\n portR: 3,\n portLineWidth: 1,\n portStroke: '#fff',\n },\n },\n});\n\ngraph.render();\n```\n\n#### 自定义位置连接桩\n\n使用百分比或绝对坐标精确定位连接桩：\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 100,\n autoFit: 'center',\n data: { nodes: [{ id: 'node1' }] },\n node: {\n style: {\n ports: [\n { key: 'custom1', placement: [0.2, 0] }, // 相对位置：左上角20%处\n { key: 'custom2', placement: [0.8, 0] }, // 相对位置：右上角80%处\n { key: 'custom3', placement: [1, 0.5] }, // 相对位置：右边中央\n ],\n portR: 4,\n portLineWidth: 1,\n portStroke: '#fff',\n },\n },\n});\n\ngraph.render();\n```\n\n#### 差异化连接桩样式\n\n为不同的连接桩设置不同的样式：\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 100,\n autoFit: 'center',\n data: { nodes: [{ id: 'node1' }] },\n node: {\n style: {\n ports: [\n {\n key: 'input',\n placement: 'left',\n fill: '#52C41A', // 绿色输入桩\n r: 4,\n },\n {\n key: 'output',\n placement: 'right',\n fill: '#FF4D4F', // 红色输出桩\n r: 4,\n },\n ],\n portStroke: '#fff', // 统一的描边颜色\n portLineWidth: 2,\n },\n },\n});\n\ngraph.render();\n```\n\n以下为完整的连接桩样式配置：\n\n| 属性 | 描述 | 类型 | 默认值 | 必选 |\n| ----- | ------------------------------------ | ----------------------------------- | ------ | ---- |\n| port | 节点是否显示连接桩 | boolean | true | |\n| ports | 节点连接桩配置项，支持配置多个连接桩 | [PortStyleProps](#portstyleprops)[] | | |\n\n#### PortStyleProps\n\n| 属性 | 描述 | 类型 | 默认值 | 必选 |\n| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------- | ---- |\n| key | 节点连接桩的键值，默认为节点连接桩的索引 | string | - | |\n| placement | 节点连接桩相对于节点主图形的位置 | `left` \\| `right` \\| `top` \\| `bottom` \\| `center` \\| `left-top` \\| `left-bottom` \\| `right-top` \\| `right-bottom` \\| `top-left` \\| `top-right` \\| `bottom-left` \\| `bottom-right` \\| [number, number] | - | ✓ |\n| r | 节点连接桩半径
- 如果设置为 undefined，则连接桩被视为一个点，不在画布上显示但存在，边会优先连接到最近的连接桩
- 如果设置为数字，则连接桩被视为一个圆，圆的半径由此处指定 | number | - | |\n| linkToCenter | 边是否连接到节点连接桩的中心
- 若为 true，则边连接到节点连接桩的中心
- 若为 false，则边连接到节点连接桩的边缘 | boolean | false | |\n| cursor | 节点连接桩鼠标移入样式，[配置项](#cursor) | string | `default` | |\n| fill | 节点连接桩填充颜色 | string | - | |\n| fillOpacity | 节点连接桩填充透明度 | number | 1 | |\n| isBillboard | 节点连接桩是否为Billboard 效果 | boolean | - | |\n| isSizeAttenuation | 节点连接桩是否启用大小衰减 | boolean | - | |\n| lineDash | 节点连接桩描边虚线配置 | number \\| string \\|(number \\| string )[] | - | |\n| lineDashOffset | 节点连接桩描边虚线偏移量 | number | - | |\n| lineWidth | 节点连接桩描边线宽 | number | - | |\n| shadowBlur | 节点连接桩阴影模糊程度 | number | - | |\n| shadowColor | 节点连接桩阴影颜色 | string | - | |\n| shadowOffsetX | 节点连接桩阴影 X 方向偏移 | number | - | |\n| shadowOffsetY | 节点连接桩阴影 Y 方向偏移 | number | - | |\n| stroke | 节点连接桩描边颜色 | string | - | |\n| strokeOpacity | 节点连接桩描边透明度 | number \\| string | 1 | |\n| visibility | 节点连接桩是否可见 | `visible` \\| `hidden` | `visible` | |\n| zIndex | 节点连接桩渲染层级 | number | 2 | |\n\n## State\n\n在一些交互行为中，比如点击选中一个节点或鼠标悬停激活一个边，仅仅是在该元素做了某些状态的标识。为了将这些状态反应到终端用户所见的视觉空间中，我们需要为不同的状态设置不同的图元素样式，以响应该图元素状态的变化。\n\nG6 提供了几种内置的状态，包括选中（selected）、高亮（highlight）、激活（active）、不活跃（inactive）和禁用（disabled）。此外，它还支持自定义状态，以满足更特定的需求。对于每个状态，开发者可以定义一套样式规则，这些规则会覆盖元素的默认样式。\n\n
\n\n数据结构如下：\n\n```typescript\ntype NodeState = {\n [state: string]: NodeStyle;\n};\n```\n\n例如，当节点处于 `focus` 状态时，可以为其添加一个宽度为 3 且颜色为橙色的描边。\n\n```js {4-7}\nconst graph = new Graph({\n node: {\n state: {\n focus: {\n lineWidth: 3, // 描边宽度\n stroke: 'orange', // 描边颜色\n },\n },\n },\n});\n```\n\n效果如下图所示：\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 200,\n height: 100,\n autoFit: 'center',\n data: {\n nodes: [{ id: 'node1', states: ['focus'] }],\n },\n node: {\n state: {\n focus: {\n lineWidth: 3,\n stroke: 'orange',\n },\n },\n },\n});\n\ngraph.render();\n```\n\n## Animation\n\n定义节点的动画效果，支持下列两种配置方式：\n\n1. 关闭节点全部动画\n\n```json\n{\n \"node\": {\n \"animation\": false\n }\n}\n```\n\n2. 配置阶段动画\n\n阶段动画是指节点在进入画布、更新、离开画布时的动画效果。目前支持的阶段包括：\n\n- `enter`: 节点进入画布时的动画\n- `update`: 节点更新时的动画\n- `exit`: 节点离开画布时的动画\n- `show`: 节点从隐藏状态显示时的动画\n- `hide`: 节点隐藏时的动画\n- `collapse`: 节点收起时的动画\n- `expand`: 节点展开时的动画\n\n你可以参考 [动画范式](/manual/animation/animation#动画范式) 使用动画语法来配置节点，如：\n\n```json\n{\n \"node\": {\n \"animation\": {\n \"update\": [\n {\n \"fields\": [\"x\", \"y\"], // 更新时只对 x 和 y 属性进行动画\n \"duration\": 1000, // 动画持续时间\n \"easing\": \"linear\" // 缓动函数\n }\n ],\n }\n}\n```\n\n也可以使用内置的动画效果：\n\n```json\n{\n \"node\": {\n \"animation\": {\n \"enter\": \"fade\", // 使用渐变动画\n \"update\": \"translate\", // 使用平移动画\n \"exit\": \"fade\" // 使用渐变动画\n }\n }\n}\n```\n\n你可以传入 false 来关闭特定阶段的动画：\n\n```json\n{\n \"node\": {\n \"animation\": {\n \"enter\": false // 关闭节点入场动画\n }\n }\n}\n```\n\n## Palette\n\n定义节点的色板，即预定义节点颜色池，并根据规则进行分配，将颜色映射到 `fill` 属性。\n\n> 有关色板的定义，请参考 [色板](/manual/theme/palette)。\n\n| 属性 | 描述 | 类型 | 默认值 |\n| ------ | ------------------------------------------------------------------- | ----------------------------- | ------- |\n| color | 色板颜色。如果色板注册过，可以直接指定其注册名，也接受一个颜色数组 | string \\| string[] | - |\n| field | 指定元素数据中的分组字段。若不指定，默认取 id 作为分组字段 | string \\| ((datum) => string) | `id` |\n| invert | 是否反转色板 | boolean | false |\n| type | 指定当前色板类型。- `group`: 离散色板
- `value`: 连续色板 | `group` \\| `value` | `group` |\n\n如将一组数据按 `category` 字段分配节点颜色，使得同类别的节点颜色相同：\n\n```json\n{\n \"node\": {\n \"palette\": {\n \"type\": \"group\",\n \"field\": \"category\",\n \"color\": [\"#1783FF\", \"#F08F56\", \"#D580FF\", \"#00C9C9\", \"#7863FF\"]\n }\n }\n}\n```\n\n效果如下图所示：\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 600,\n height: 100,\n data: {\n nodes: new Array(10)\n .fill(0)\n .map((_, i) => ({ id: `node-${i}`, data: { category: ['A', 'B', 'C', 'D', 'E'][i % 5] } })),\n },\n layout: { type: 'grid', cols: 10 },\n node: {\n palette: {\n type: 'group',\n field: 'category',\n color: ['#1783FF', '#F08F56', '#D580FF', '#00C9C9', '#7863FF'],\n },\n },\n});\n\ngraph.render();\n```\n\n也可以使用默认配置：\n\n```json\n{\n \"node\": {\n \"palette\": \"tableau\" // tableau 为色板名，默认根据 ID 分配颜色\n }\n}\n```\n\n效果如下图所示：\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 600,\n height: 100,\n data: {\n nodes: new Array(10)\n .fill(0)\n .map((_, i) => ({ id: `node-${i}`, data: { category: ['A', 'B', 'C', 'D', 'E'][i % 5] } })),\n },\n layout: { type: 'grid', cols: 10 },\n node: {\n palette: 'tableau',\n },\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/element/node/Circle.en.md":"---\ntitle: Circle Node\norder: 2\n---\n\n## Overview\n\nA circle is a symmetrical geometric shape with a uniform radius.\n\nApplicable scenarios:\n\n- Used to represent the size or weight of a node (controlled by radius).\n- Suitable for representing non-directional relationships, such as user nodes in social networks.\n- Commonly used in flowcharts, network diagrams, topology diagrams, etc.\n\n## Online Experience\n\n\n\n## Style Configuration\n\n> If the element has specific attributes, we will list them below. For all general style attributes, see [BaseNode](/en/manual/element/node/base-node))\n\n## Example\n\n### Built-in Circle Node Effect\n\n```js | ob { inject: true }\nimport { Graph, iconfont } from '@antv/g6';\n\nconst style = document.createElement('style');\nstyle.innerHTML = `@import url('${iconfont.css}');`;\ndocument.head.appendChild(style);\n\nconst data = {\n nodes: [\n { id: 'default' },\n { id: 'halo' },\n { id: 'badges' },\n { id: 'ports' },\n {\n id: 'active',\n states: ['active'],\n },\n {\n id: 'selected',\n states: ['selected'],\n },\n {\n id: 'highlight',\n states: ['highlight'],\n },\n {\n id: 'inactive',\n states: ['inactive'],\n },\n {\n id: 'disabled',\n states: ['disabled'],\n },\n ],\n};\n\nconst graph = new Graph({\n container: 'container',\n data,\n node: {\n type: 'circle',\n style: {\n size: 40,\n labelText: (d) => d.id,\n iconFontFamily: 'iconfont',\n iconText: '\\ue602',\n halo: (d) => (d.id === 'halo' ? true : false),\n badges: (d) =>\n d.id === 'badges'\n ? [\n {\n text: 'A',\n placement: 'right-top',\n },\n {\n text: 'Important',\n placement: 'right',\n },\n {\n text: 'Notice',\n placement: 'right-bottom',\n },\n ]\n : [],\n badgeFontSize: 8,\n badgePadding: [1, 4],\n portR: 3,\n ports: (d) =>\n d.id === 'ports'\n ? [{ placement: 'left' }, { placement: 'right' }, { placement: 'top' }, { placement: 'bottom' }]\n : [],\n },\n },\n layout: {\n type: 'grid',\n },\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/element/node/Circle.zh.md":"---\ntitle: 圆形节点 Circle\norder: 2\n---\n\n## 概述\n\n圆形是一个对称的几何形状，具有均匀的半径。\n\n适用场景：\n\n- 用于表示节点的大小或权重（通过半径控制）。\n- 适合表示无方向性的关系，如社交网络中的用户节点。\n- 常用于流程图、网络图、拓扑图等。\n\n## 在线体验\n\n\n\n## 样式配置\n\n> 如果元素有其特定的属性，我们将在下面列出。对于所有的通用样式属性，见[BaseNode](/manual/element/node/base-node)\n\n## 示例\n\n### 内置圆形节点效果\n\n```js | ob { inject: true }\nimport { Graph, iconfont } from '@antv/g6';\n\nconst style = document.createElement('style');\nstyle.innerHTML = `@import url('${iconfont.css}');`;\ndocument.head.appendChild(style);\n\nconst data = {\n nodes: [\n { id: 'default' },\n { id: 'halo' },\n { id: 'badges' },\n { id: 'ports' },\n {\n id: 'active',\n states: ['active'],\n },\n {\n id: 'selected',\n states: ['selected'],\n },\n {\n id: 'highlight',\n states: ['highlight'],\n },\n {\n id: 'inactive',\n states: ['inactive'],\n },\n {\n id: 'disabled',\n states: ['disabled'],\n },\n ],\n};\n\nconst graph = new Graph({\n container: 'container',\n data,\n node: {\n type: 'circle',\n style: {\n size: 40,\n labelText: (d) => d.id,\n iconFontFamily: 'iconfont',\n iconText: '\\ue602',\n halo: (d) => (d.id === 'halo' ? true : false),\n badges: (d) =>\n d.id === 'badges'\n ? [\n {\n text: 'A',\n placement: 'right-top',\n },\n {\n text: 'Important',\n placement: 'right',\n },\n {\n text: 'Notice',\n placement: 'right-bottom',\n },\n ]\n : [],\n badgeFontSize: 8,\n badgePadding: [1, 4],\n portR: 3,\n ports: (d) =>\n d.id === 'ports'\n ? [{ placement: 'left' }, { placement: 'right' }, { placement: 'top' }, { placement: 'bottom' }]\n : [],\n },\n },\n layout: {\n type: 'grid',\n },\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/element/node/Diamond.en.md":"---\ntitle: Diamond Node\norder: 3\n---\n\n## Overview\n\nA diamond is a geometric shape with four equal sides and diagonal symmetry.\n\nApplicable scenarios:\n\n- Used to represent decision nodes, conditional judgments, or critical paths.\n\n- Suitable for representing decision nodes or key steps in flowcharts.\n\n- Commonly used in flowcharts, decision trees, network diagrams, etc.\n\n## Online Experience\n\n\n\n## Style Configuration\n\n> If the element has specific attributes, we will list them below. For all general style attributes, see [BaseNode](/en/manual/element/node/base-node)\n\n## Example\n\n### Built-in Diamond Node Effect\n\n```js | ob { inject: true }\nimport { Graph, iconfont } from '@antv/g6';\n\nconst style = document.createElement('style');\nstyle.innerHTML = `@import url('${iconfont.css}');`;\ndocument.head.appendChild(style);\n\nconst data = {\n nodes: [\n { id: 'default' },\n { id: 'halo' },\n { id: 'badges' },\n { id: 'ports' },\n {\n id: 'active',\n states: ['active'],\n },\n {\n id: 'selected',\n states: ['selected'],\n },\n {\n id: 'highlight',\n states: ['highlight'],\n },\n {\n id: 'inactive',\n states: ['inactive'],\n },\n {\n id: 'disabled',\n states: ['disabled'],\n },\n ],\n};\n\nconst graph = new Graph({\n container: 'container',\n data,\n node: {\n type: 'diamond',\n style: {\n size: 40,\n labelText: (d) => d.id,\n iconFontFamily: 'iconfont',\n iconText: '\\ue602',\n halo: (d) => (d.id === 'halo' ? true : false),\n badges: (d) =>\n d.id === 'badges'\n ? [\n {\n text: 'A',\n placement: 'right-top',\n },\n {\n text: 'Important',\n placement: 'right',\n },\n {\n text: 'Notice',\n placement: 'right-bottom',\n },\n ]\n : [],\n badgeFontSize: 8,\n badgePadding: [1, 4],\n portR: 3,\n ports: (d) =>\n d.id === 'ports'\n ? [{ placement: 'left' }, { placement: 'right' }, { placement: 'top' }, { placement: 'bottom' }]\n : [],\n },\n },\n layout: {\n type: 'grid',\n },\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/element/node/Diamond.zh.md":"---\ntitle: 菱形节点 Diamond\norder: 3\n---\n\n## 概述\n\n菱形是一个四边相等的几何形状，具有对角线对称性。\n\n适用场景：\n\n- 用于表示决策节点、条件判断或关键路径。\n\n- 适合表示流程图中的判断节点或关键步骤。\n\n- 常用于流程图、决策树、网络图等。\n\n## 在线体验\n\n\n\n## 样式配置\n\n> 如果元素有其特定的属性，我们将在下面列出。对于所有的通用样式属性，见 [BaseNode](/manual/element/node/base-node)\n\n## 示例\n\n### 内置菱形节点效果\n\n```js | ob { inject: true }\nimport { Graph, iconfont } from '@antv/g6';\n\nconst style = document.createElement('style');\nstyle.innerHTML = `@import url('${iconfont.css}');`;\ndocument.head.appendChild(style);\n\nconst data = {\n nodes: [\n { id: 'default' },\n { id: 'halo' },\n { id: 'badges' },\n { id: 'ports' },\n {\n id: 'active',\n states: ['active'],\n },\n {\n id: 'selected',\n states: ['selected'],\n },\n {\n id: 'highlight',\n states: ['highlight'],\n },\n {\n id: 'inactive',\n states: ['inactive'],\n },\n {\n id: 'disabled',\n states: ['disabled'],\n },\n ],\n};\n\nconst graph = new Graph({\n container: 'container',\n data,\n node: {\n type: 'diamond',\n style: {\n size: 40,\n labelText: (d) => d.id,\n iconFontFamily: 'iconfont',\n iconText: '\\ue602',\n halo: (d) => (d.id === 'halo' ? true : false),\n badges: (d) =>\n d.id === 'badges'\n ? [\n {\n text: 'A',\n placement: 'right-top',\n },\n {\n text: 'Important',\n placement: 'right',\n },\n {\n text: 'Notice',\n placement: 'right-bottom',\n },\n ]\n : [],\n badgeFontSize: 8,\n badgePadding: [1, 4],\n portR: 3,\n ports: (d) =>\n d.id === 'ports'\n ? [{ placement: 'left' }, { placement: 'right' }, { placement: 'top' }, { placement: 'bottom' }]\n : [],\n },\n },\n layout: {\n type: 'grid',\n },\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/element/node/Donut.en.md":"---\ntitle: Donut Node\norder: 4\n---\n\n## Overview\n\nThe donut node is a ring-shaped geometric figure composed of two concentric circles.\n\nApplicable scenarios:\n\n- Used to represent proportional data, such as completion progress and ratio analysis.\n\n- Suitable for representing multi-layered data, such as nested ring charts.\n\n- Commonly used in data visualization, dashboards, progress charts, etc.\n\n## Online Experience\n\n\n\n## Style Configuration\n\n> If the element has specific attributes, we will list them below. For all general style attributes, see [BaseNode](/en/manual/element/node/base-node)\n\n| Attribute | Description | Type | Default | Required |\n| ------------------- | ----------------------------------- | --------------------------------------- | --------- | -------- |\n| donutFill | Fill color | string | `#1783FF` | |\n| donutFillOpacity | Fill color opacity | number \\| string | 1 | |\n| donutLineCap | Stroke end style | `round` \\| `square` \\| `butt` | `butt` | |\n| donutLineDash | Stroke dash style | number[] | - | |\n| donutLineDashOffset | Stroke dash offset | number | - | |\n| donutLineJoin | Stroke join style | `round` \\| `bevel` \\| `miter` | `miter` | |\n| donutLineWidth | Stroke width | number | 1 | |\n| donutOpacity | Opacity | number \\| string | 1 | |\n| donutPalette | Color or palette name | string \\| string[] | `tableau` | |\n| donuts | Donut data | number[] \\| [DonutRound](#donutround)[] | - | |\n| donutShadowBlur | Shadow blur | number | - | |\n| donutShadowColor | Shadow color | string | - | |\n| donutShadowOffsetX | Shadow offset in x-axis direction | number \\| string | - | |\n| donutShadowOffsetY | Shadow offset in y-axis direction | number \\| string | - | |\n| donutShadowType | Shadow type | `inner` \\| `outer` | `outer` | |\n| donutStroke | Stroke color | string | `#000` | |\n| donutStrokeOpacity | Stroke color opacity | number \\| string | 1 | |\n| donutVisibility | Visibility of the shape | `visible` \\| `hidden` | `visible` | |\n| innerR | Inner ring radius, percentage or px | string \\| number | 50% | |\n\n### DonutRound\n\n| Attribute | Description | Type | Default | Required |\n| -------------- | --------------------------------- | ----------------------------- | --------- | -------- |\n| color | Color | string | - | |\n| fill | Fill color | string | `#1783FF` | |\n| fillOpacity | Fill color opacity | number \\| string | 1 | |\n| lineCap | Stroke end style | `round` \\| `square` \\| `butt` | `butt` | |\n| lineDash | Stroke dash style | number[] | - | |\n| lineDashOffset | Stroke dash offset | number | - | |\n| lineJoin | Stroke join style | `round` \\| `bevel` \\| `miter` | `miter` | |\n| lineWidth | Stroke width | number | 1 | |\n| opacity | Opacity | number \\| string | 1 | |\n| shadowBlur | Shadow blur | number | - | |\n| shadowColor | Shadow color | string | - | |\n| shadowOffsetX | Shadow offset in x-axis direction | number \\| string | - | |\n| shadowOffsetY | Shadow offset in y-axis direction | number \\| string | - | |\n| shadowType | Shadow type | `inner` \\| `outer` | `outer` | |\n| stroke | Stroke color | string | `#000` | |\n| strokeOpacity | Stroke color opacity | number \\| string | 1 | |\n| value | Value for ratio calculation | number | - | ✓ |\n| visibility | Visibility of the shape | `visible` \\| `hidden` | `visible` | |\n\n## Example\n\n### Built-in Donut Node Effect\n\n```js | ob { inject: true }\nimport { Graph, iconfont } from '@antv/g6';\n\nconst style = document.createElement('style');\nstyle.innerHTML = `@import url('${iconfont.css}');`;\ndocument.head.appendChild(style);\n\nconst data = {\n nodes: [\n { id: 'default', index: 0 },\n { id: 'halo', index: 1 },\n { id: 'badges', index: 2 },\n { id: 'ports', index: 3 },\n {\n id: 'active',\n states: ['active'],\n index: 4,\n },\n {\n id: 'selected',\n states: ['selected'],\n index: 5,\n },\n {\n id: 'highlight',\n states: ['highlight'],\n index: 6,\n },\n {\n id: 'inactive',\n states: ['inactive'],\n index: 7,\n },\n {\n id: 'disabled',\n states: ['disabled'],\n index: 8,\n },\n ],\n};\nconst graph = new Graph({\n container: 'container',\n animation: false,\n data,\n node: {\n type: 'donut',\n style: {\n size: 80,\n fill: '#DB9D0D',\n innerR: 20,\n donuts: (item) => {\n const { index } = item;\n if (index === 0) return [1, 2, 3]; // donuts数据类型为number[]时，根据值的大小决定环的占比\n\n if (index === 1) {\n return [\n { value: 50, color: 'red' },\n { value: 150, color: 'green' },\n { value: 100, color: 'blue' },\n ];\n }\n\n if (index === 4) {\n return [\n { value: 150, fill: 'pink', stroke: '#fff', lineWidth: 1 },\n { value: 250, stroke: '#fff', lineWidth: 1 },\n { value: 200, stroke: '#fff', lineWidth: 1 },\n ];\n }\n\n return [100, 200, 100, 200];\n },\n labelText: (d) => d.id,\n iconFontFamily: 'iconfont',\n iconText: '\\ue602',\n halo: (d) => (d.id === 'halo' ? true : false),\n badges: (d) =>\n d.id === 'badges'\n ? [\n {\n text: 'A',\n placement: 'right-top',\n },\n {\n text: 'Important',\n placement: 'right',\n },\n {\n text: 'Notice',\n placement: 'right-bottom',\n },\n ]\n : [],\n badgeFontSize: 8,\n badgePadding: [1, 4],\n portR: 3,\n ports: (d) =>\n d.id === 'ports'\n ? [{ placement: 'left' }, { placement: 'right' }, { placement: 'top' }, { placement: 'bottom' }]\n : [],\n },\n },\n layout: {\n type: 'grid',\n },\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/element/node/Donut.zh.md":"---\ntitle: 甜甜圈节点 Donut\norder: 4\n---\n\n## 概述\n\n甜甜圈节点是一个环形几何形状，由内外两个同心圆组成。\n\n适用场景：\n\n- 用于表示比例数据，如完成进度、占比分析。\n\n- 适合表示多层数据，如嵌套的环形图。\n\n- 常用于数据可视化、仪表盘、进度图等。\n\n## 在线体验\n\n\n\n## 样式配置\n\n> 如果元素有其特定的属性，我们将在下面列出。对于所有的通用样式属性，见 [BaseNode](/manual/element/node/base-node)\n\n| 属性 | 描述 | 类型 | 默认值 | 必选 |\n| ------------------- | ------------------------------ | ------------------------------------------- | --------- | ---- |\n| donutFill | 填充色 | string | `#1783FF` | |\n| donutFillOpacity | 填充色透明度 | number \\| string | 1 | |\n| donutLineCap | 描边端点样式 | `round` \\| `square` \\| `butt` | `butt` | |\n| donutLineDash | 描边虚线样式 | number[] | - | |\n| donutLineDashOffset | 描边虚线偏移量 | number | - | |\n| donutLineJoin | 描边连接处样式 | `round` \\| `bevel` \\| `miter` | `miter` | |\n| donutLineWidth | 描边宽度 | number | 1 | |\n| donutOpacity | 透明度 | number \\| string | 1 | |\n| donutPalette | 颜色或者色板名 | string | string[] | `tableau` | |\n| donuts | 圆环数据 | number[] | [DonutRound](#donutround)[] | - | |\n| donutShadowBlur | 阴影模糊度 | number | - | |\n| donutShadowColor | 阴影颜色 | string | - | |\n| donutShadowOffsetX | 阴影在 x 轴方向上的偏移量 | number \\| string | - | |\n| donutShadowOffsetY | 阴影在 y 轴方向上的偏移量 | number \\| string | - | |\n| donutShadowType | 阴影类型 | `inner` \\| `outer` | `outer` | |\n| donutStroke | 描边色 | string | `#000` | |\n| donutStrokeOpacity | 描边色透明度 | number \\| string | 1 | |\n| donutVisibility | 图形是否可见 | `visible` \\| `hidden` | `visible` | |\n| innerR | 内环半径，使用百分比或者像素值 | string | number | 50% | |\n\n### DonutRound\n\n| 属性 | 描述 | 类型 | 默认值 | 必选 |\n| -------------- | ------------------------- | ----------------------------- | --------- | ---- |\n| color | 颜色 | string | - | |\n| fill | 填充色 | string | `#1783FF` | |\n| fillOpacity | 填充色透明度 | number \\| string | 1 | |\n| lineCap | 描边端点样式 | `round` \\| `square` \\| `butt` | `butt` | |\n| lineDash | 描边虚线样式 | number[] | - | |\n| lineDashOffset | 描边虚线偏移量 | number | - | |\n| lineJoin | 描边连接处样式 | `round` \\| `bevel` \\| `miter` | `miter` | |\n| lineWidth | 描边宽度 | number | 1 | |\n| opacity | 透明度 | number \\| string | 1 | |\n| shadowBlur | 阴影模糊度 | number | - | |\n| shadowColor | 阴影颜色 | string | - | |\n| shadowOffsetX | 阴影在 x 轴方向上的偏移量 | number \\| string | - | |\n| shadowOffsetY | 阴影在 y 轴方向上的偏移量 | number \\| string | - | |\n| shadowType | 阴影类型 | `inner` \\| `outer` | `outer` | |\n| stroke | 描边色 | string | `#000` | |\n| strokeOpacity | 描边色透明度 | number \\| string | 1 | |\n| value | 数值，用于计算比例 | number | - | ✓ |\n| visibility | 图形是否可见 | `visible` \\| `hidden` | `visible` | |\n\n## 示例\n\n### 内置甜甜圈节点效果\n\n```js | ob { inject: true }\nimport { Graph, iconfont } from '@antv/g6';\n\nconst style = document.createElement('style');\nstyle.innerHTML = `@import url('${iconfont.css}');`;\ndocument.head.appendChild(style);\n\nconst data = {\n nodes: [\n { id: 'default', index: 0 },\n { id: 'halo', index: 1 },\n { id: 'badges', index: 2 },\n { id: 'ports', index: 3 },\n {\n id: 'active',\n states: ['active'],\n index: 4,\n },\n {\n id: 'selected',\n states: ['selected'],\n index: 5,\n },\n {\n id: 'highlight',\n states: ['highlight'],\n index: 6,\n },\n {\n id: 'inactive',\n states: ['inactive'],\n index: 7,\n },\n {\n id: 'disabled',\n states: ['disabled'],\n index: 8,\n },\n ],\n};\nconst graph = new Graph({\n container: 'container',\n animation: false,\n data,\n node: {\n type: 'donut',\n style: {\n size: 80,\n fill: '#DB9D0D',\n innerR: 20,\n donuts: (item) => {\n const { index } = item;\n if (index === 0) return [1, 2, 3]; // donuts数据类型为number[]时，根据值的大小决定环的占比\n\n if (index === 1) {\n return [\n { value: 50, color: 'red' },\n { value: 150, color: 'green' },\n { value: 100, color: 'blue' },\n ];\n }\n\n if (index === 4) {\n return [\n { value: 150, fill: 'pink', stroke: '#fff', lineWidth: 1 },\n { value: 250, stroke: '#fff', lineWidth: 1 },\n { value: 200, stroke: '#fff', lineWidth: 1 },\n ];\n }\n\n return [100, 200, 100, 200];\n },\n labelText: (d) => d.id,\n iconFontFamily: 'iconfont',\n iconText: '\\ue602',\n halo: (d) => (d.id === 'halo' ? true : false),\n badges: (d) =>\n d.id === 'badges'\n ? [\n {\n text: 'A',\n placement: 'right-top',\n },\n {\n text: 'Important',\n placement: 'right',\n },\n {\n text: 'Notice',\n placement: 'right-bottom',\n },\n ]\n : [],\n badgeFontSize: 8,\n badgePadding: [1, 4],\n portR: 3,\n ports: (d) =>\n d.id === 'ports'\n ? [{ placement: 'left' }, { placement: 'right' }, { placement: 'top' }, { placement: 'bottom' }]\n : [],\n },\n },\n layout: {\n type: 'grid',\n },\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/element/node/Ellipse.en.md":"---\ntitle: Ellipse Node\norder: 5\n---\n\n## Overview\n\nAn ellipse is a geometric shape with asymmetrical major and minor axes.\n\nApplicable scenarios:\n\n- Used to represent dynamic nodes, asymmetric relationships, or special shapes.\n\n- Suitable for representing flowcharts, network diagrams, or topology diagrams.\n\n- Commonly used in flowcharts, network diagrams, topology diagrams, etc.\n\n## Online Experience\n\n\n\n## Style Configuration\n\n> If the element has specific attributes, we will list them below. For all general style attributes, see [BaseNode](/en/manual/element/node/base-node)\n\n## Example\n\n### Built-in Ellipse Node Effect\n\n```js | ob { inject: true }\nimport { Graph, iconfont } from '@antv/g6';\n\nconst style = document.createElement('style');\nstyle.innerHTML = `@import url('${iconfont.css}');`;\ndocument.head.appendChild(style);\n\nconst data = {\n nodes: [\n { id: 'default' },\n { id: 'halo' },\n { id: 'badges' },\n { id: 'ports' },\n {\n id: 'active',\n states: ['active'],\n },\n {\n id: 'selected',\n states: ['selected'],\n },\n {\n id: 'highlight',\n states: ['highlight'],\n },\n {\n id: 'inactive',\n states: ['inactive'],\n },\n {\n id: 'disabled',\n states: ['disabled'],\n },\n ],\n};\n\nconst graph = new Graph({\n container: 'container',\n data,\n node: {\n type: 'ellipse',\n style: {\n size: [45, 35],\n labelText: (d) => d.id,\n iconFontFamily: 'iconfont',\n iconText: '\\ue602',\n halo: (d) => (d.id === 'halo' ? true : false),\n badges: (d) =>\n d.id === 'badges'\n ? [\n {\n text: 'A',\n placement: 'right-top',\n },\n {\n text: 'Important',\n placement: 'right',\n },\n {\n text: 'Notice',\n placement: 'right-bottom',\n },\n ]\n : [],\n badgeFontSize: 8,\n badgePadding: [1, 4],\n portR: 3,\n ports: (d) =>\n d.id === 'ports'\n ? [{ placement: 'left' }, { placement: 'right' }, { placement: 'top' }, { placement: 'bottom' }]\n : [],\n },\n },\n layout: {\n type: 'grid',\n },\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/element/node/Ellipse.zh.md":"---\ntitle: 椭圆形节点 Ellipse\norder: 5\n---\n\n## 概述\n\n椭圆是一个长轴和短轴不对称的几何形状。\n\n适用场景：\n\n- 用于表示动态节点、非对称关系或特殊形状。\n\n- 适合表示流程图、网络图或拓扑图。\n\n- 常用于流程图、网络图、拓扑图等。\n\n## 在线体验\n\n\n\n## 样式配置\n\n> 如果元素有其特定的属性，我们将在下面列出。对于所有的通用样式属性，见 [BaseNode](/manual/element/node/base-node)\n\n## 示例\n\n### 内置椭圆形节点效果\n\n```js | ob { inject: true }\nimport { Graph, iconfont } from '@antv/g6';\n\nconst style = document.createElement('style');\nstyle.innerHTML = `@import url('${iconfont.css}');`;\ndocument.head.appendChild(style);\n\nconst data = {\n nodes: [\n { id: 'default' },\n { id: 'halo' },\n { id: 'badges' },\n { id: 'ports' },\n {\n id: 'active',\n states: ['active'],\n },\n {\n id: 'selected',\n states: ['selected'],\n },\n {\n id: 'highlight',\n states: ['highlight'],\n },\n {\n id: 'inactive',\n states: ['inactive'],\n },\n {\n id: 'disabled',\n states: ['disabled'],\n },\n ],\n};\n\nconst graph = new Graph({\n container: 'container',\n data,\n node: {\n type: 'ellipse',\n style: {\n size: [45, 35],\n labelText: (d) => d.id,\n iconFontFamily: 'iconfont',\n iconText: '\\ue602',\n halo: (d) => (d.id === 'halo' ? true : false),\n badges: (d) =>\n d.id === 'badges'\n ? [\n {\n text: 'A',\n placement: 'right-top',\n },\n {\n text: 'Important',\n placement: 'right',\n },\n {\n text: 'Notice',\n placement: 'right-bottom',\n },\n ]\n : [],\n badgeFontSize: 8,\n badgePadding: [1, 4],\n portR: 3,\n ports: (d) =>\n d.id === 'ports'\n ? [{ placement: 'left' }, { placement: 'right' }, { placement: 'top' }, { placement: 'bottom' }]\n : [],\n },\n },\n layout: {\n type: 'grid',\n },\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/element/node/Hexagon.en.md":"---\ntitle: Hexagon Node\norder: 6\n---\n\n## Overview\n\nA hexagon is a geometric shape with six equal sides, featuring a honeycomb structure.\n\nApplicable scenarios:\n\n- Used to represent honeycomb networks, molecular structures, or tightly packed nodes.\n\n- Suitable for representing network topology, molecular diagrams, or game maps.\n\n- Commonly used in network diagrams, topology diagrams, game design, etc.\n\n## Online Experience\n\n\n\n## Style Configuration\n\n> If the element has specific attributes, we will list them below. For all general style attributes, see [BaseNode](/en/manual/element/node/base-node)\n\n| Attribute | Description | Type | Default | Required |\n| --------- | ------------------------------------------------------------------ | ------ | --------------------------------------- | -------- |\n| outerR | Outer radius, the distance from the hexagon's center to any vertex | number | Half of the minimum of width and height | |\n\n## Example\n\n### Built-in Hexagon Node Effect\n\n```js | ob { inject: true }\nimport { Graph, iconfont } from '@antv/g6';\n\nconst style = document.createElement('style');\nstyle.innerHTML = `@import url('${iconfont.css}');`;\ndocument.head.appendChild(style);\n\nconst data = {\n nodes: [\n { id: 'default' },\n { id: 'halo' },\n { id: 'badges' },\n { id: 'ports' },\n {\n id: 'active',\n states: ['active'],\n },\n {\n id: 'selected',\n states: ['selected'],\n },\n {\n id: 'highlight',\n states: ['highlight'],\n },\n {\n id: 'inactive',\n states: ['inactive'],\n },\n {\n id: 'disabled',\n states: ['disabled'],\n },\n ],\n};\n\nconst graph = new Graph({\n container: 'container',\n data,\n node: {\n type: 'hexagon',\n style: {\n size: 40,\n labelText: (d) => d.id,\n iconFontFamily: 'iconfont',\n iconText: '\\ue602',\n halo: (d) => (d.id === 'halo' ? true : false),\n badges: (d) =>\n d.id === 'badges'\n ? [\n {\n text: 'A',\n placement: 'right-top',\n },\n {\n text: 'Important',\n placement: 'right',\n },\n {\n text: 'Notice',\n placement: 'right-bottom',\n },\n ]\n : [],\n badgeFontSize: 8,\n badgePadding: [1, 4],\n outerR: 30, // 外半径\n portR: 3,\n ports: (d) =>\n d.id === 'ports'\n ? [{ placement: 'left' }, { placement: 'right' }, { placement: 'top' }, { placement: 'bottom' }]\n : [],\n },\n },\n layout: {\n type: 'grid',\n },\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/element/node/Hexagon.zh.md":"---\ntitle: 六边形节点 Hexagon\norder: 6\n---\n\n## 概述\n\n六边形是一个六边相等的几何形状，具有蜂窝状结构。\n\n适用场景：\n\n- 用于表示蜂窝网络、分子结构或紧密排列的节点。\n\n- 适合表示网络拓扑、分子图或游戏地图。\n\n- 常用于网络图、拓扑图、游戏设计等。\n\n## 在线体验\n\n\n\n## 样式配置\n\n> 如果元素有其特定的属性，我们将在下面列出。对于所有的通用样式属性，见 [BaseNode](/manual/element/node/base-node)\n\n| 属性 | 描述 | 类型 | 默认值 | 必选 |\n| ------ | ---------------------------------------- | ------ | ------------------------ | ---- |\n| outerR | 外半径，是指从六边形中心到任意顶点的距离 | number | 默认为宽高的最小值的一半 | |\n\n## 示例\n\n### 内置六边形节点效果\n\n```js | ob { inject: true }\nimport { Graph, iconfont } from '@antv/g6';\n\nconst style = document.createElement('style');\nstyle.innerHTML = `@import url('${iconfont.css}');`;\ndocument.head.appendChild(style);\n\nconst data = {\n nodes: [\n { id: 'default' },\n { id: 'halo' },\n { id: 'badges' },\n { id: 'ports' },\n {\n id: 'active',\n states: ['active'],\n },\n {\n id: 'selected',\n states: ['selected'],\n },\n {\n id: 'highlight',\n states: ['highlight'],\n },\n {\n id: 'inactive',\n states: ['inactive'],\n },\n {\n id: 'disabled',\n states: ['disabled'],\n },\n ],\n};\n\nconst graph = new Graph({\n container: 'container',\n data,\n node: {\n type: 'hexagon',\n style: {\n size: 40,\n labelText: (d) => d.id,\n iconFontFamily: 'iconfont',\n iconText: '\\ue602',\n halo: (d) => (d.id === 'halo' ? true : false),\n badges: (d) =>\n d.id === 'badges'\n ? [\n {\n text: 'A',\n placement: 'right-top',\n },\n {\n text: 'Important',\n placement: 'right',\n },\n {\n text: 'Notice',\n placement: 'right-bottom',\n },\n ]\n : [],\n badgeFontSize: 8,\n badgePadding: [1, 4],\n outerR: 30, // 外半径\n portR: 3,\n ports: (d) =>\n d.id === 'ports'\n ? [{ placement: 'left' }, { placement: 'right' }, { placement: 'top' }, { placement: 'bottom' }]\n : [],\n },\n },\n layout: {\n type: 'grid',\n },\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/element/node/Html.en.md":"---\ntitle: HTML Node\norder: 7\n---\n\n## Overview\n\nHTML node is a custom rectangular area used to display HTML content. It allows you to embed arbitrary HTML elements within graph nodes, providing great flexibility for creating complex custom nodes.\n\nUse Cases:\n\n- Used to represent complex custom nodes such as tables, charts, or rich text\n- Suitable for representing custom visual elements or interactive components\n- Commonly used in custom charts, UI design, dashboards, and other scenarios\n- When you need to embed interactive elements like forms and buttons in nodes\n\n## Framework Support\n\n> **💡 Tips**：\n>\n> - **React Projects**: Recommended to use [React Node](/en/manual/element/node/react-node) for better component-based development experience\n> - **Vue Projects**: Vue Node is not currently supported, community contributions are welcome\n> - **Native HTML**: The HTML node introduced in this document is suitable for native HTML development\n\n## Online Demo\n\n\n\n## Style Configuration\n\n> If the element has specific properties, we will list them below. For all common style properties, see [BaseNode](/en/manual/element/node/base-node)\n\n| Property | Description | Type | Default | Required |\n| --------- | ----------------------------------------------------------------------------------------------------- | --------------------------- | ------- | -------- |\n| dx | Horizontal offset. HTML container defaults to top-left corner as origin, use dx for horizontal offset | number | 0 | |\n| dy | Vertical offset. HTML container defaults to top-left corner as origin, use dy for vertical offset | number | 0 | |\n| innerHTML | HTML content, can be string or `HTMLElement` | string | `HTMLElement` | - | ✓ |\n\n## Examples\n\n### Basic HTML Node\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n data: {\n nodes: [\n { id: 'node-1', data: { location: 'East', status: 'error', ip: '192.168.1.2' } },\n { id: 'node-2', data: { location: 'West', status: 'overload', ip: '192.168.1.3' } },\n { id: 'node-3', data: { location: 'South', status: 'running', ip: '192.168.1.4' } },\n ],\n },\n node: {\n type: 'html',\n style: {\n size: [240, 80],\n dx: -120,\n dy: -40,\n innerHTML: (d) => {\n const ICON_MAP = {\n error: '❌',\n overload: '⚡',\n running: '✅',\n };\n\n const COLOR_MAP = {\n error: '#f5222d',\n overload: '#faad14',\n running: '#52c41a',\n };\n\n const {\n data: { location, status, ip },\n } = d;\n const color = COLOR_MAP[status];\n\n return `\n
${data.name}
\n ${data.status.toUpperCase()}\n${data.title}
\n \n${data.name}
\n ${data.status.toUpperCase()}\n${data.title}
\n \n![](\"https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*VKrvQpdqwXoAAAAAAAAAAAAAemJ7AQ/original\")
\n\n## Example\n\n### Built-in Star Node Effect\n\n```js | ob { inject: true }\nimport { Graph, iconfont } from '@antv/g6';\n\nconst style = document.createElement('style');\nstyle.innerHTML = `@import url('${iconfont.css}');`;\ndocument.head.appendChild(style);\n\nconst data = {\n nodes: [\n { id: 'default' },\n { id: 'halo' },\n { id: 'badges' },\n { id: 'ports' },\n {\n id: 'active',\n states: ['active'],\n },\n {\n id: 'selected',\n states: ['selected'],\n },\n {\n id: 'highlight',\n states: ['highlight'],\n },\n {\n id: 'inactive',\n states: ['inactive'],\n },\n {\n id: 'disabled',\n states: ['disabled'],\n },\n ],\n};\n\nconst graph = new Graph({\n container: 'container',\n data,\n node: {\n type: 'star',\n style: {\n size: 40,\n labelText: (d) => d.id,\n iconFontFamily: 'iconfont',\n iconText: '\\ue602',\n halo: (d) => (d.id === 'halo' ? true : false),\n badges: (d) =>\n d.id === 'badges'\n ? [\n {\n text: 'A',\n placement: 'right-top',\n },\n {\n text: 'Important',\n placement: 'right',\n },\n {\n text: 'Notice',\n placement: 'right-bottom',\n },\n ]\n : [],\n badgeFontSize: 8,\n badgePadding: [1, 4],\n portR: 3,\n ports: (d) =>\n d.id === 'ports'\n ? [{ placement: 'left' }, { placement: 'right' }, { placement: 'top' }, { placement: 'bottom' }]\n : [],\n },\n },\n layout: {\n type: 'grid',\n },\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/element/node/Star.zh.md":"---\ntitle: 五角形节点 Star\norder: 10\n---\n\n## 概述\n\n星形是一个多角几何形状，具有突出的角。\n\n适用场景：\n\n- 用于表示重要节点、特殊标记或装饰性元素。\n\n- 适合表示流程图、网络图或拓扑图。\n\n- 常用于流程图、网络图、拓扑图等。\n\n## 在线体验\n\n\n\n## 样式配置\n\n> 如果元素有其特定的属性，我们将在下面列出。对于所有的通用样式属性，见 [BaseNode](/manual/element/node/base-node)\n\n| 属性 | 描述 | 类型 | 默认值 | 必选 |\n| ------ | ------------------------------------ | ------ | ------------------ | ---- |\n| innerR | 内半径，是指从星形中心到内顶点的距离 | number | 默认为外半径的 3/8 |\n\n结构说明：\n\n\n\n## 示例\n\n### 内置五角形节点效果\n\n```js | ob { inject: true }\nimport { Graph, iconfont } from '@antv/g6';\n\nconst style = document.createElement('style');\nstyle.innerHTML = `@import url('${iconfont.css}');`;\ndocument.head.appendChild(style);\n\nconst data = {\n nodes: [\n { id: 'default' },\n { id: 'halo' },\n { id: 'badges' },\n { id: 'ports' },\n {\n id: 'active',\n states: ['active'],\n },\n {\n id: 'selected',\n states: ['selected'],\n },\n {\n id: 'highlight',\n states: ['highlight'],\n },\n {\n id: 'inactive',\n states: ['inactive'],\n },\n {\n id: 'disabled',\n states: ['disabled'],\n },\n ],\n};\n\nconst graph = new Graph({\n container: 'container',\n data,\n node: {\n type: 'star',\n style: {\n size: 40,\n labelText: (d) => d.id,\n iconFontFamily: 'iconfont',\n iconText: '\\ue602',\n halo: (d) => (d.id === 'halo' ? true : false),\n badges: (d) =>\n d.id === 'badges'\n ? [\n {\n text: 'A',\n placement: 'right-top',\n },\n {\n text: 'Important',\n placement: 'right',\n },\n {\n text: 'Notice',\n placement: 'right-bottom',\n },\n ]\n : [],\n badgeFontSize: 8,\n badgePadding: [1, 4],\n portR: 3,\n ports: (d) =>\n d.id === 'ports'\n ? [{ placement: 'left' }, { placement: 'right' }, { placement: 'top' }, { placement: 'bottom' }]\n : [],\n },\n },\n layout: {\n type: 'grid',\n },\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/element/node/Triangle.en.md":"---\ntitle: Triangle Node\norder: 11\n---\n\n## Overview\n\nA triangle is a geometric shape with three sides, having a clear directionality.\n\nApplicable scenarios:\n\n- Used to represent directional nodes, warnings, or prompts.\n\n- Suitable for indicating direction or hierarchy in flowcharts.\n\n- Commonly used in flowcharts, network diagrams, topology diagrams, etc.\n\n## Online Experience\n\n\n\n## Style Configuration\n\n> If the element has specific attributes, we will list them below. For all general style attributes, see [BaseNode](/en/manual/element/node/base-node)\n\n| Attribute | Description | Type | Default | Required |\n| --------- | ------------------------- | ----------------------------------- | ------- | -------- |\n| direction | Direction of the triangle | `up` \\| `left` \\| `right` \\| `down` | `up` |\n\n## Example\n\n### Built-in Triangle Node Effect\n\n```js | ob { inject: true }\nimport { Graph, iconfont } from '@antv/g6';\n\nconst style = document.createElement('style');\nstyle.innerHTML = `@import url('${iconfont.css}');`;\ndocument.head.appendChild(style);\n\nconst data = {\n nodes: [\n { id: 'default' },\n { id: 'halo' },\n { id: 'badges' },\n { id: 'ports' },\n {\n id: 'active',\n states: ['active'],\n },\n {\n id: 'selected',\n states: ['selected'],\n },\n {\n id: 'highlight',\n states: ['highlight'],\n },\n {\n id: 'inactive',\n states: ['inactive'],\n },\n {\n id: 'disabled',\n states: ['disabled'],\n },\n ],\n};\n\nconst graph = new Graph({\n container: 'container',\n data,\n node: {\n type: 'triangle',\n style: {\n size: 40,\n direction: (d) => (d.id === 'ports' ? 'left' : undefined),\n labelText: (d) => d.id,\n iconFontFamily: 'iconfont',\n iconText: '\\ue602',\n halo: (d) => (d.id === 'halo' ? true : false),\n badges: (d) =>\n d.id === 'badges'\n ? [\n {\n text: 'A',\n placement: 'right-top',\n },\n {\n text: 'Important',\n placement: 'right',\n },\n {\n text: 'Notice',\n placement: 'right-bottom',\n },\n ]\n : [],\n badgeFontSize: 8,\n badgePadding: [1, 4],\n portR: 3,\n ports: (d) =>\n d.id === 'ports'\n ? [{ placement: 'left' }, { placement: 'right' }, { placement: 'top' }, { placement: 'bottom' }]\n : [],\n },\n },\n layout: {\n type: 'grid',\n },\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/element/node/Triangle.zh.md":"---\ntitle: 三角形节点 Triangle\norder: 11\n---\n\n## 概述\n\n三角形是一个三边几何形状，具有明确的方向性。\n\n适用场景：\n\n- 用于表示方向性节点、警告或提示。\n\n- 适合表示流程图中的方向指示或层级关系。\n\n- 常用于流程图、网络图、拓扑图等。\n\n## 在线体验\n\n\n\n## 样式配置\n\n> 如果元素有其特定的属性，我们将在下面列出。对于所有的通用样式属性，见 [BaseNode](/manual/element/node/base-node)\n\n| 属性 | 描述 | 类型 | 默认值 | 必选 |\n| --------- | ------------ | ----------------------------------- | ------ | ---- |\n| direction | 三角形的方向 | `up` \\| `left` \\| `right` \\| `down` | `up` |\n\n## 示例\n\n### 内置三角形节点效果\n\n```js | ob { inject: true }\nimport { Graph, iconfont } from '@antv/g6';\n\nconst style = document.createElement('style');\nstyle.innerHTML = `@import url('${iconfont.css}');`;\ndocument.head.appendChild(style);\n\nconst data = {\n nodes: [\n { id: 'default' },\n { id: 'halo' },\n { id: 'badges' },\n { id: 'ports' },\n {\n id: 'active',\n states: ['active'],\n },\n {\n id: 'selected',\n states: ['selected'],\n },\n {\n id: 'highlight',\n states: ['highlight'],\n },\n {\n id: 'inactive',\n states: ['inactive'],\n },\n {\n id: 'disabled',\n states: ['disabled'],\n },\n ],\n};\n\nconst graph = new Graph({\n container: 'container',\n data,\n node: {\n type: 'triangle',\n style: {\n size: 40,\n direction: (d) => (d.id === 'ports' ? 'left' : undefined),\n labelText: (d) => d.id,\n iconFontFamily: 'iconfont',\n iconText: '\\ue602',\n halo: (d) => (d.id === 'halo' ? true : false),\n badges: (d) =>\n d.id === 'badges'\n ? [\n {\n text: 'A',\n placement: 'right-top',\n },\n {\n text: 'Important',\n placement: 'right',\n },\n {\n text: 'Notice',\n placement: 'right-bottom',\n },\n ]\n : [],\n badgeFontSize: 8,\n badgePadding: [1, 4],\n portR: 3,\n ports: (d) =>\n d.id === 'ports'\n ? [{ placement: 'left' }, { placement: 'right' }, { placement: 'top' }, { placement: 'bottom' }]\n : [],\n },\n },\n layout: {\n type: 'grid',\n },\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/element/node/custom-node.en.md":"---\ntitle: Custom Node\norder: 12\n---\n\nG6 provides a series of [built-in nodes](/en/manual/element/node/base-node), including [circle (Circle Node)](/en/manual/element/node/circle), [diamond (Diamond Node)](/en/manual/element/node/diamond), [donut (Donut Node)](/en/manual/element/node/donut), [ellipse (Ellipse Node)](/en/manual/element/node/ellipse), [hexagon (Hexagon Node)](/en/manual/element/node/hexagon), [html (HTML Node)](/en/manual/element/node/html), [image (Image Node)](/en/manual/element/node/image), [rect (Rectangle Node)](/en/manual/element/node/rect), [star (Star Node)](/en/manual/element/node/star), and [triangle (Triangle Node)](/en/manual/element/node/triangle). These built-in nodes can meet most basic scenario requirements.\n\nHowever, in actual projects, you may encounter needs that these basic nodes cannot satisfy. In such cases, you need to create custom nodes. Don't worry, this is simpler than you might think!\n\n## Ways to Create Custom Nodes ![](\"https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*sEaLR7Q_hmoAAAAAAAAAAAAAemJ7AQ/fmt.avif\")
\n\n✅ **Recommended Scenarios:**\n\n- Nodes are simple geometric shapes\n- Scenarios requiring efficient rendering of more than 2,000 nodes\n- Need to directly manipulate graphic instances for fine control\n\n> For detailed information on how to customize nodes using Canvas graphics, please refer to the [Custom Node](/en/manual/element/node/custom-node) documentation\n\n### React Node\n\n![](\"https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*9oz-R7bIkd0AAAAAAAAAAAAADmJ7AQ/original\")
\n\n✅ **Recommended Scenarios:**\n\n- Business systems that need to integrate UI libraries like Ant Design\n- Nodes contain interactive logic such as form input, state switching\n- Scenarios where an existing React design system needs to be reused\n\n## Quick Start\n\n### Environment Preparation\n\nBefore starting, please ensure you have:\n\n- **Installed a React project**: Ensure a React project is installed and created.\n- **React version requirement**: Ensure the React version used is >=16.8.0.\n\n### Install Dependencies\n\nTo use `@antv/g6-extension-react`, run the following command:\n\n:::code-group\n\n```bash [npm]\nnpm install @antv/g6-extension-react\n```\n\n```bash [yarn]\nyarn add @antv/g6-extension-react\n```\n\n```bash [pnpm]\npnpm add @antv/g6-extension-react\n```\n\n:::\n\n### Component Integration\n\n#### 1. Register React Node Type\n\nRegister the React node type through the extension mechanism:\n\n```jsx\nimport { ExtensionCategory, register } from '@antv/g6';\nimport { ReactNode } from '@antv/g6-extension-react';\n\nregister(ExtensionCategory.NODE, 'react-node', ReactNode);\n```\n\nThe `register` method requires three parameters:\n\n- Extension category: `ExtensionCategory.NODE` indicates this is a node type\n- Type name: `react-node` is the name we give to this custom node, which will be used in the configuration later\n- Class definition: ReactNode is the implementation class exported by `@antv/g6-extension-react`\n\n#### 2. Define Business Component\n\nDefine a simple React component as the content of the node:\n\n```jsx\nconst MyReactNode = () => {\n return \n\n```js | ob { inject: true }\nimport { UserOutlined } from '@ant-design/icons';\nimport { ExtensionCategory, Graph, register } from '@antv/g6';\nimport { ReactNode } from '@antv/g6-extension-react';\nimport { Avatar, Button, Card, Descriptions, Select, Space, Typography } from 'antd';\nimport React, { useEffect, useRef } from 'react';\nimport { createRoot } from 'react-dom/client';\n\nconst { Title, Text } = Typography;\nconst { Option } = Select;\n\nregister(ExtensionCategory.NODE, 'react-node', ReactNode);\n\nconst IDCardNode = ({ id, data }) => {\n const { name, idNumber, address, expanded, selected, graph } = data;\n\n const toggleExpand = (e) => {\n e.stopPropagation();\n graph.updateNodeData([\n {\n id,\n data: { expanded: !expanded },\n },\n ]);\n graph.render();\n };\n\n const handleSelect = (value) => {\n graph.updateNodeData([\n {\n id,\n data: { selected: value !== 0 },\n },\n ]);\n if (value === 2) {\n // 获取与当前节点相连的所有节点\n const connectedNodes = graph.getNeighborNodesData(id);\n\n connectedNodes.forEach((node) => {\n graph.updateNodeData([\n {\n id: node.id,\n data: { selected: true },\n },\n ]);\n });\n }\n graph.render();\n };\n\n const CardTitle = (\n
\n\n✅ **推荐场景：**\n\n- 节点只是简单的几何图形\n- 需要高效渲染超过 2,000 个节点的场景\n- 需要直接操作图形实例进行精细控制\n\n> 有关如何使用 Canvas 图形自定义节点的详细信息，请参阅 [自定义节点](/manual/element/node/custom-node) 文档\n\n### React Node\n\n\n\n✅ **推荐场景：**\n\n- 需要集成 Ant Design 等 UI 库的业务系统\n- 节点包含表单输入、状态切换等交互逻辑\n- 已有 React 设计系统需要复用的场景\n\n## 快速入门\n\n### 环境准备\n\n在开始之前，请确保您已经：\n\n- **安装 React 项目**：确保已安装并创建 React 项目。\n- **React 版本要求**：确保使用的 React 版本 >=16.8.0。\n\n### 安装依赖\n\n要使用 `@antv/g6-extension-react`，请运行以下命令：\n\n:::code-group\n\n```bash [npm]\nnpm install @antv/g6-extension-react\n```\n\n```bash [yarn]\nyarn add @antv/g6-extension-react\n```\n\n```bash [pnpm]\npnpm add @antv/g6-extension-react\n```\n\n:::\n\n### 组件集成\n\n#### 1. 注册 React 节点类型\n\n通过扩展机制注册 React 节点类型：\n\n```jsx\nimport { ExtensionCategory, register } from '@antv/g6';\nimport { ReactNode } from '@antv/g6-extension-react';\n\nregister(ExtensionCategory.NODE, 'react-node', ReactNode);\n```\n\n`register` 方法需要三个参数：\n\n- 扩展类别：`ExtensionCategory.NODE` 表示这是一个节点类型\n- 类型名称：`react-node` 是我们给这个自定义节点起的名字，后续会在配置中使用\n- 类定义：ReactNode 是 `@antv/g6-extension-react` 导出的实现类\n\n#### 2. 定义业务组件\n\n定义一个简单的 React 组件作为节点的内容：\n\n```jsx\nconst MyReactNode = () => {\n return \n\n```js | ob { inject: true }\nimport { UserOutlined } from '@ant-design/icons';\nimport { ExtensionCategory, Graph, register } from '@antv/g6';\nimport { ReactNode } from '@antv/g6-extension-react';\nimport { Avatar, Button, Card, Descriptions, Select, Space, Typography } from 'antd';\nimport React, { useEffect, useRef } from 'react';\nimport { createRoot } from 'react-dom/client';\n\nconst { Title, Text } = Typography;\nconst { Option } = Select;\n\nregister(ExtensionCategory.NODE, 'react-node', ReactNode);\n\nconst IDCardNode = ({ id, data }) => {\n const { name, idNumber, address, expanded, selected, graph } = data;\n\n const toggleExpand = (e) => {\n e.stopPropagation();\n graph.updateNodeData([\n {\n id,\n data: { expanded: !expanded },\n },\n ]);\n graph.render();\n };\n\n const handleSelect = (value) => {\n graph.updateNodeData([\n {\n id,\n data: { selected: value !== 0 },\n },\n ]);\n if (value === 2) {\n // 获取与当前节点相连的所有节点\n const connectedNodes = graph.getNeighborNodesData(id);\n\n connectedNodes.forEach((node) => {\n graph.updateNodeData([\n {\n id: node.id,\n data: { selected: true },\n },\n ]);\n });\n }\n graph.render();\n };\n\n const CardTitle = (\n
\n\n✅ **Recommended Scenarios:**\n\n- Nodes are simple geometric shapes\n- Scenarios requiring efficient rendering of more than 2,000 nodes\n- Need to directly manipulate graphic instances for fine control\n\n> For detailed information on how to customize nodes using Canvas graphics, please refer to the [Custom Node](/en/manual/element/node/custom-node) documentation\n\n### Vue Node\n\n\n\n✅ **Recommended Scenarios:**\n\n- Business systems that need to integrate UI libraries like Element Plus / Ant Design Vue\n- Nodes contain interactive logic such as form input, state switching\n- Scenarios where an existing Vue design system needs to be reused\n\n## Quick Start\n\n### Environment Preparation\n\nBefore starting, please ensure you have:\n\n- **Installed a Vue project**: Ensure a Vue project is installed and created.\n- **Vue version requirement**: Ensure the Vue version used is >=2.6.0. (Vue 3 is recommended)\n\n### Install Dependencies\n\nTo use [`g6-extension-vue`](https://github.com/Child-qjj/g6-extension-vue), run the following command:\n\n:::code-group\n\n```bash [npm]\nnpm install g6-extension-vue\n```\n\n```bash [yarn]\nyarn add g6-extension-vue\n```\n\n```bash [pnpm]\npnpm add g6-extension-vue\n```\n\n:::\n\n### Component Integration\n\n#### 1. Register Vue Node Type\n\nRegister the Vue node type through the extension mechanism:\n\n```jsx\nimport { ExtensionCategory, register } from '@antv/g6';\nimport { VueNode } from 'g6-extension-vue';\n\nregister(ExtensionCategory.NODE, 'vue-node', VueNode);\n```\n\nThe `register` method requires three parameters:\n\n- Extension category: `ExtensionCategory.NODE` indicates this is a node type\n- Type name: `vue-node` is the name we give to this custom node, which will be used in the configuration later\n- Class definition: VueNode is the implementation class exported by `g6-extension-vue`\n\n#### 2. Define Business Component\n\nDefine a simple Vue component as the content of the node:\n\n```jsx\nimport { defineComponent, h } from 'vue';\n\nconst MyVueNode = defineComponent({\n setup(props, { attrs, slots, expose }) {\n return () => {\n return h('div', 'vue node');\n };\n },\n});\n```\n\n#### 3. Use the Component\n\nUse the custom Vue node in the graph configuration. Specify the node type and style in the graph configuration to use the custom Vue component.\n\n- `type`: Specify the node type as `vue-node` (use the name given during registration)\n- `style.component`: Define the Vue component content of the node\n\n```jsx\nconst graph = new Graph({\n node: {\n type: 'vue-node',\n style: {\n component: () => \n\n✅ **推荐场景：**\n\n- 节点只是简单的几何图形\n- 需要高效渲染超过 2,000 个节点的场景\n- 需要直接操作图形实例进行精细控制\n\n> 有关如何使用 Canvas 图形自定义节点的详细信息，请参阅 [自定义节点](/manual/element/node/custom-node) 文档\n\n### Vue Node\n\n\n\n✅ **推荐场景：**\n\n- 需要集成 Element Plus / Ant Design Vue 等 UI 库的业务系统\n- 节点包含表单输入、状态切换等交互逻辑\n- 已有 Vue 设计系统需要复用的场景\n\n## 快速入门\n\n### 环境准备\n\n在开始之前，请确保您已经：\n\n- **安装 Vue 项目**：确保已安装并创建 Vue 项目。\n- **Vue 版本要求**：确保使用的 Vue 版本 >=2.6.0。(推荐使用 Vue 3)\n\n### 安装依赖\n\n要使用 [`g6-extension-vue`](https://github.com/Child-qjj/g6-extension-vue)，请运行以下命令：\n\n:::code-group\n\n```bash [npm]\nnpm install g6-extension-vue\n```\n\n```bash [yarn]\nyarn add g6-extension-vue\n```\n\n```bash [pnpm]\npnpm add g6-extension-vue\n```\n\n:::\n\n### 组件集成\n\n#### 1. 注册 Vue 节点类型\n\n通过扩展机制注册 Vue 节点类型：\n\n```jsx\nimport { ExtensionCategory, register } from '@antv/g6';\nimport { VueNode } from 'g6-extension-vue';\n\nregister(ExtensionCategory.NODE, 'vue-node', VueNode);\n```\n\n`register` 方法需要三个参数：\n\n- 扩展类别：`ExtensionCategory.NODE` 表示这是一个节点类型\n- 类型名称：`vue-node` 是我们给这个自定义节点起的名字，后续会在配置中使用\n- 类定义：VueNode 是 `g6-extension-vue` 导出的实现类\n\n#### 2. 定义业务组件\n\n定义一个简单的 Vue 组件作为节点的内容：\n\n```jsx\nimport { defineComponent, h } from 'vue';\n\nconst MyVueNode = defineComponent({\n setup(props, { attrs, slots, expose }) {\n return () => {\n return h('div', 'vue node');\n };\n },\n});\n```\n\n#### 3. 使用组件\n\n在图配置中使用自定义的 Vue 节点。通过在图配置中指定节点类型和样式，来使用自定义的 Vue 组件。\n\n- `type`：指定节点类型为 `vue-node` (使用与注册时起的名字)\n- `style.component`：定义节点的 Vue 组件内容\n\n```jsx\nconst graph = new Graph({\n node: {\n type: 'vue-node',\n style: {\n component: () => ![](\"https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*W3oqSYPZtWEAAAAAAAAAAAAAemJ7AQ/original\")
\n\n## 1. Customization and Encapsulation of Shape\n\n### 1. Base Class Design of Shape\n\nAll Shapes inherit from `BaseShape`, which centrally manages the lifecycle (creation, update, destruction), property parsing, animation, event binding, etc. You only need to focus on implementing the `render` method.\n\n**Core Abstraction:**\n\n```js\nimport { CustomElement } from '@antv/g';\n\nabstract class BaseShape extends CustomElement {\n // Lifecycle management, property parsing, animation, etc...\n public abstract render(attributes, container): void;\n}\n```\n\n### 2. Hierarchical Structure of Composite Shape\n\nA node usually contains multiple child Shapes, for example:\n\n```\nNode\n├── keyShape (main shape)\n├── label (label, auxiliary information)\n│ ├── text\n│ └── rect\n├── icon\n│ ├── text\n│ └── image\n├── badge\n│ ├── text\n│ └── rect\n└── port\n│ ├── circle\n```\n\n\n\n### 3. Implementation of Label Shape\n\nLabel is a typical composite Shape, consisting of text (Text) and an optional background (Rect). The implementation idea is as follows:\n\n- **Property Separation**: The style properties of Label are divided into text style and background style, which are passed to Text and Rect respectively.\n- **Smart Layout**: The background automatically adjusts its size and position based on the text content, padding, border radius, etc.\n- **Reuse upsert**: The `upsert` method is used to automatically manage the creation, update, and destruction of child Shapes.\n\n**Main code snippet of Label:**\n\n```js\nimport { Text, Rect } from '@antv/g'; // Import atomic graphics\n\nexport class Label extends BaseShape {\n public render(attributes = this.parsedAttributes, container= this): void {\n this.upsert('text', Text, this.getTextStyle(attributes), container);\n this.upsert('background', Rect, this.getBackgroundStyle(attributes), container);\n }\n // ... Omitted style extraction methods\n}\n```\n\n- `getTextStyle` and `getBackgroundStyle` extract the style properties for text and background respectively to avoid interference.\n- The `upsert` method ensures automatic CRUD of Shapes, greatly improving reusability and robustness.\n\n### 4. Complete Custom Shape Example\n\nBelow is an example of customizing a label with special decoration, demonstrating the complete definition, registration, and usage of a Shape:\n\n```js\nimport { BaseShape, ExtensionCategory, Circle } from 'g6';\nimport { Text, Rect, Circle } from '@antv/g';\n\nclass FancyLabel extends BaseShape {\n render(attributes = this.parsedAttributes, container = this) {\n // Main text\n this.upsert('text', Text, this.getTextStyle(attributes), container);\n // Background\n this.upsert('background', Rect, this.getBackgroundStyle(attributes), container);\n // Extra decoration: small dot on the left\n this.upsert('dot', Circle, {\n x: -8, y: 0, r: 3, fill: '#faad14',\n }, container);\n }\n // ...implement getTextStyle/getBackgroundStyle\n}\n\n// Register custom Shape\nregister(ExtensionCategory.SHAPE, 'fancy-label-shape', FancyLabel);\n\n// Define custom node\nclass CustomCircle extends Circle {\n public drawFancyLabelShape(attributes, container) {\n this.upsert('fancy-label', 'fancy-label-shape', this.getFancyLabelStyle(attributes), container);\n }\n\n render(attributes = this.parsedAttributes, container) {\n super.render(attributes, container);\n\n this.drawFancyLabelShape(attributes, container);\n }\n}\n\n// Register custom node\nregister(ExtensionCategory.Node, 'fancy-label-node', CustomCircle);\n```\n\n## 2. Prefix Separation of Style Properties\n\nIn G6, elements such as nodes, edges, and combos often contain multiple child Shapes (such as main shape, label, badge, port, etc.). To ensure that the style of each child Shape does not interfere with each other, G6 adopts a **prefix separation** design for style properties.\n\n### 1. Significance of Prefix Separation\n\n- **Decoupling**: Each child Shape only cares about its own style properties, avoiding style pollution.\n- **Easy Expansion**: Adding a new child Shape only requires defining a new prefix, without modifying the original logic.\n- **Intuitive Configuration**: When configuring nodes/edges/combos, users can clearly set the style of each part.\n\n### 2. Code Implementation\n\nTake Label as an example:\n\n```ts\nimport { RectStyleProps, TextStyleProps } from '@antv/g';\n\ntype PrefixKey = `${P}${Capitalize = {\n [K in keyof T as K extends string ? PrefixKey = `${P}${Capitalize = {\n [K in keyof T as K extends string ? PrefixKey G6 is a graph visualization engine. It provides capabilities for graph drawing, layout, analysis, interaction, animation, and other aspects of graph visualization. It aims to offer developers a set of tools that are easy to use, professionally reliable, and highly customizable for graph visualization development. Built-in 10+ elements to meet the needs of common scenarios. Built-in 10+ interactions that can be freely combined according to different scenarios. High-performance layouts, built-in 10+ common graph layouts, with support for WebGPU and WASM computational acceleration. Supports 3D elements and layouts to create immersive graph visualization scenarios. Elements, layouts, interactions, and plugins are all customizable, enabling every creative idea you have. Click to enter 👉 Quick Start G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化能力。旨在为开发者提供一套简单易用、专业可靠、可高度定制的图可视化开发工具 内置 10+ 元素，满足常规场景需求 内置 10+ 交互，并可根据不同场景自由组合 高性能布局，内置 10+ 常用的图布局，支持 WebGPU、 WASM 计算加速 支持 3D 元素、布局，打造沉浸式的图可视化场景 元素、布局、交互、插件统统可定制，实现你的每一个创意 点击进入👉 快速开始, container: Group): void {\n const style = this.getLabelStyle(attributes);\n this.upsert('label', Label, style, container);\n}\n\npublic render(attributes = this.parsedAttributes, container: Group = this) {\n // 1. Draw keyShape (main shape)\n this._drawKeyShape(attributes, container);\n if (!this.getShape('key')) return;\n\n // 2. Draw halo\n this.drawHaloShape(attributes, container);\n\n // 3. Draw icon\n this.drawIconShape(attributes, container);\n\n // 4. Draw badges\n this.drawBadgeShapes(attributes, container);\n\n // 5. Draw label\n this.drawLabelShape(attributes, container);\n\n // 6. Draw ports\n this.drawPortShapes(attributes, container);\n}\n```\n\n- The style of each child Shape is automatically extracted by prefix separation and passed to the corresponding Shape instance.\n- You can flexibly control the display and style of each child Shape through configuration options.\n\n### 2. Example of Applying Label\n\nSuppose you want to add a label with a background to a node, just configure the label-related properties in the node data:\n\n```js\n{\n label: true,\n labelText: 'I am a label',\n labelFill: '#333',\n labelFontSize: 14,\n labelBackground: true,\n labelBackgroundFill: '#fffbe6',\n labelBackgroundRadius: 6,\n labelPadding: [4, 8],\n}\n```\n\n- `labelText`, `labelFill`, `labelFontSize`, etc. will be automatically extracted and passed to the text part of the Label.\n- `labelBackground`, `labelBackgroundFill`, `labelBackgroundRadius`, `labelPadding`, etc. will be automatically extracted and passed to the background part of the Label.\n\nYou do not need to manually manage the creation, update, or destruction of the Label. G6 will handle it automatically.\n\n## 5. Common Issues and Debugging Suggestions\n\n### 1. Why is the label style not effective?\n\n- Check whether the style property prefix is correct (such as `labelFill`, `labelBackgroundFill`).\n- Make sure the `label` configuration of the node/edge/combo is `true` and `labelText` is set.\n- Check if it is overridden by other styles.\n\n### 2. How to debug the rendering of custom Shape?\n\n- Use the browser console to view `shapeMap` and confirm whether each child Shape is created correctly.\n\n### 3. How to make Label respond to node states (such as hover, selected)?\n\n- Directly set node state styles in the graph configuration (recommended)\n\n```js\nconst graph = new Graph({\n node: {\n style: {\n label: false,\n },\n state: {\n hover: {\n label: true,\n labelText: 'show when hovered',\n },\n },\n },\n});\n```\n\n- Or listen for state changes in the implementation of Label and dynamically adjust the style. You can get the current state value through data.\n\n---\n\nFor more details, it is recommended to read the source code [`base-shape.ts`](https://github.com/antvis/G6/blob/v5/packages/g6/src/elements/shapes/base-shape.ts), [`base-node.ts`](https://github.com/antvis/G6/blob/v5/packages/g6/src/elements/shapes/base-node.ts).\n","packages/site/docs/manual/element/shape/label-shape.zh.md":"---\ntitle: 复合 Shape 的设计与实现\norder: 3\n---\n\nG6 提供了灵活的 Shape 机制，支持开发者自定义各种图形，并在节点、边、Combo 等元素中高效复用。本文将以 Label（标签）为例，讲解如何自定义 Shape、如何在元素中应用。\n\n, container: Group): void {\n const style = this.getLabelStyle(attributes);\n this.upsert('label', Label, style, container);\n}\n\npublic render(attributes = this.parsedAttributes, container: Group = this) {\n // 1. 绘制 keyShape（主图形）\n this._drawKeyShape(attributes, container);\n if (!this.getShape('key')) return;\n\n // 2. 绘制 halo\n this.drawHaloShape(attributes, container);\n\n // 3. 绘制 icon\n this.drawIconShape(attributes, container);\n\n // 4. 绘制 badges\n this.drawBadgeShapes(attributes, container);\n\n // 5. 绘制 label\n this.drawLabelShape(attributes, container);\n\n // 6. 绘制 ports\n this.drawPortShapes(attributes, container);\n}\n```\n\n- 每个子 Shape 的样式都通过前缀分离自动提取，传递给对应的 Shape 实例。\n- 你可以通过配置项灵活控制每个子 Shape 的显示与样式。\n\n### 2. 应用 Label 的示例\n\n假设你要为节点添加带背景的标签，只需在节点数据中配置 label 相关属性：\n\n```js\n{\n label: true,\n labelText: '我是标签',\n labelFill: '#333',\n labelFontSize: 14,\n labelBackground: true,\n labelBackgroundFill: '#fffbe6',\n labelBackgroundRadius: 6,\n labelPadding: [4, 8],\n}\n```\n\n- `labelText`、`labelFill`、`labelFontSize` 等会被自动提取并传递给 Label 的文本部分。\n- `labelBackground`、`labelBackgroundFill`、`labelBackgroundRadius`、`labelPadding` 等会被自动提取并传递给 Label 的背景部分。\n\n你无需手动管理 Label 的创建、更新、销毁，G6 会自动完成。\n\n## 五、常见问题与调试建议\n\n### 1. 为什么 label 样式没有生效？\n\n- 检查样式属性前缀是否正确（如 `labelFill`、`labelBackgroundFill`）。\n- 确认节点/边/Combo 的 `label` 配置为 `true`，且 `labelText` 已设置。\n- 检查是否被其他样式覆盖。\n\n### 2. 如何调试自定义 Shape 的渲染？\n\n- 使用浏览器控制台查看 `shapeMap`，确认各子 Shape 是否被正确创建。\n\n### 3. 如何让 Label 响应节点状态（如 hover、selected）？\n\n- 直接在图配置中设置节点状态样式（推荐）\n\n```js\nconst graph = new Graph({\n node: {\n style: {\n label: false,\n },\n state: {\n hover: {\n label: true,\n labelText: 'show when hovered',\n },\n },\n },\n});\n```\n\n- 或者在 Label 的实现中监听状态变化，动态调整样式。可以通过 data 获取到当前的状态值\n\n---\n\n如需更深入了解，建议阅读源码 [`base-shape.ts`](https://github.com/antvis/G6/blob/v5/packages/g6/src/elements/shapes/base-shape.ts)、[`base-node.ts`](https://github.com/antvis/G6/blob/v5/packages/g6/src/elements/shapes/base-node.ts)。\n","packages/site/docs/manual/element/shape/overview.en.md":"---\ntitle: Shape and KeyShape\norder: 1\n---\n\n## Shape\n\nA Shape in G6 refers to a graphical element, such as a circle, rectangle, or path. Shapes are generally associated with nodes, edges, or combos in G6. **💡 Every node/edge/combo in G6 is composed of one or more shapes. The style configuration of nodes, edges, and combos is reflected on their corresponding shapes.**\n\nFor example, in the images below: the node on the left contains a single circular shape; the node in the middle contains a circle and a text shape; the node on the right contains five circles (the blue-green main circle and four anchor points at the top, bottom, left, and right) and a text shape. Each node/edge/combo has its unique key shape (keyShape). In the examples below, the keyShape for all three nodes is the blue-green circle. The keyShape is mainly used for interaction detection and automatic style updates with [element states](/en/manual/element/state), see [keyShape](#keyshape).\n\n
![](\"https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*HOcfToHFDIYAAAAAAAAAAAAADmJ7AQ/original\")
Complete Code
\n\n```js\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n data: {\n nodes: Array.from({ length: 10 }).map((_, i) => ({ id: `node-${i}` })),\n edges: Array.from({ length: 9 }).map((_, i) => ({ source: `node-0`, target: `node-${i + 1}` })),\n },\n node: {\n style: {\n size: 20,\n fill: 'pink',\n },\n },\n edge: {\n style: {\n stroke: 'lightgreen',\n },\n },\n behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],\n layout: {\n type: 'd3-force',\n },\n});\n\ngraph.render();\n```\n\n完整代码
\n\n```js\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n data: {\n nodes: Array.from({ length: 10 }).map((_, i) => ({ id: `node-${i}` })),\n edges: Array.from({ length: 9 }).map((_, i) => ({ source: `node-0`, target: `node-${i + 1}` })),\n },\n node: {\n style: {\n size: 20,\n fill: 'pink',\n },\n },\n edge: {\n style: {\n stroke: 'lightgreen',\n },\n },\n behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element'],\n layout: {\n type: 'd3-force',\n },\n});\n\ngraph.render();\n```\n\n
- `'overflow'` adapt only when content overflows
- `'always'` always adapt | `'overflow'` \\| `'always'` | `'always'` | |\n| direction | Adapt only in the specified direction
- `'x'` adapt only in x direction
- `'y'` adapt only in y direction
- `'both'` adapt in both x and y directions | `'x'` \\| `'y'` \\| `'both'` | `'both'` | |\n\n#### ViewportAnimationEffectTiming\n\n```typescript\ntype ViewportAnimationEffectTiming =\n | boolean // true to enable default animation, false to disable animation\n | {\n easing?: string; // Animation easing function: 'ease-in-out', 'ease-in', 'ease-out', 'linear'\n duration?: number; // Animation duration (milliseconds)\n };\n```\n\n## autoResize\n\n> _boolean_ **Default:** `false`\n\nWhether to automatically resize the canvas.\n\nImplemented based on the `window.onresize` event. When the browser window size changes, the canvas will automatically resize to fit the container.\n\n## background\n\n> _string_\n\nCanvas background color.\n\nThis color is used as the background color when exporting images. Any valid CSS color value can be used, such as hexadecimal, RGB, RGBA, etc.\n\n## canvas\n\n> [CanvasConfig](#canvasconfig)\n\nCanvas configuration. Related configuration items under GraphOptions (such as `container`, `width`, `height`, `devicePixelRatio`, `background`, `cursor`) are shortcut configuration items and will be converted to canvas configuration items.\n\n#### CanvasConfig\n\n| Property | Description | Type | Default | Required |\n| ---------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | ------- | -------- |\n| container | Canvas container | string \\| HTMLElement | - | |\n| devicePixelRatio | Device pixel ratio | number | - | |\n| width | Canvas width | number | - | |\n| height | Canvas height | number | - | |\n| cursor | Cursor style, same as [GraphOptions.cursor](#cursor) | string | - | |\n| background | Canvas background color | string | - | |\n| renderer | Renderer, same as [GraphOptions.renderer](#renderer) | (layer: `'background'` \\| `'main'` \\| `'label'` \\| `'transient'`) => IRenderer | - | |\n| enableMultiLayer | Whether to enable multi-layer. Non-dynamic parameter, effective only during initialization | boolean | - | |\n\n## container\n\n> _string \\|_ _HTMLElement_ _\\|_ Canvas\n\nCanvas container, can be one of the following three assignments:\n\n- ID string of the DOM element, such as `'container'`\n- HTML element object, such as `document.getElementById('container')`\n- Canvas instance, such as `new Canvas(options)`, where `options` is of type [CanvasConfig](#canvasconfig).\n\n## cursor\n\n> string\n\nCursor style, controls the cursor shape when hovering over the canvas. Any valid CSS cursor value can be used.\n\nSupported values include: `'auto'`, `'default'`, `'none'`, `'context-menu'`, `'help'`, `'pointer'`, `'progress'`, `'wait'`, `'cell'`, `'crosshair'`, `'text'`, `'vertical-text'`, `'alias'`, `'copy'`, `'move'`, `'no-drop'`, `'not-allowed'`, `'grab'`, `'grabbing'`, `'all-scroll'`, `'col-resize'`, `'row-resize'`, `'n-resize'`, `'e-resize'`, `'s-resize'`, `'w-resize'`, `'ne-resize'`, `'nw-resize'`, `'se-resize'`, `'sw-resize'`, `'ew-resize'`, `'ns-resize'`, `'nesw-resize'`, `'nwse-resize'`, `'zoom-in'`, `'zoom-out'.\n\nCursor values are referenced from [MDN - cursor](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor).\n\n## devicePixelRatio\n\n> _number_\n\nDevice pixel ratio.\n\nUsed for high-definition screens, the default is [window.devicePixelRatio](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio).\n\n## width\n\n> _number_\n\nCanvas width. If not set, the container width will be automatically obtained.\n\n## height\n\n> _number_\n\nCanvas height. If not set, the container height will be automatically obtained.\n\n## renderer\n\n> _(layer: 'background' \\| 'main' \\| 'label' \\| 'transient') =>_ _IRenderer_\n\nManually specify the renderer\n\nG6 uses a layered rendering approach, divided into four layers: `background`, `main`, `label`, `transient`. Users can set the renderer for each layer of the canvas through this configuration item.\n\n**Example**: Use SVG renderer for rendering\n\n```javascript\nimport { Renderer as SVGRenderer } from '@antv/g-svg';\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n renderer: () => new SVGRenderer(),\n});\n```\n\n## padding\n\n> _number \\| number[]_\n\nCanvas padding\n\nUsually, during adaptation, it will be adapted according to the padding. It can be a single value (same padding on all sides) or an array form (specify the padding for top, right, bottom, left in order).\n\n**Example:**\n\n```javascript\n// Single value\nconst graph1 = new Graph({\n padding: 20, // 20 pixels of padding on all sides\n});\n\n// Array form\nconst graph2 = new Graph({\n padding: [20, 40, 20, 40], // Padding for top, right, bottom, left\n});\n```\n\n## rotation\n\n> _number_ **Default:** `0`\n\nRotation angle (in radians)\n\n## x\n\n> _number_\n\nViewport x coordinate, sets the initial horizontal position of the viewport.\n\n## y\n\n> _number_\n\nViewport y coordinate, sets the initial vertical position of the viewport.\n\n## zoom\n\n> _number_ **Default:** `1`\n\nSets the initial zoom level of the viewport, 1 means 100% (original size).\n\n## zoomRange\n\n> _[number, number]_ **Default:** `[0.01, 10]`\n\nZoom range, limits the minimum and maximum scale that users can zoom.\n\n## animation\n\n> _boolean \\| [AnimationEffectTiming](#animationeffecttiming)_\n\nEnable or disable global animation\n\nWhen configured as an animation option, animation will be enabled, and this animation configuration will be used as the base configuration for global animation.\n\n#### AnimationEffectTiming\n\n| Property | Description | Type | Default | Required |\n| ---------- | ------------------------------ | ------------------------------------------------------------------- | ----------- | -------- |\n| delay | Animation delay time | number | - | |\n| direction | Animation direction | `'alternate'` \\| `'alternate-reverse'` \\| `'normal'` \\| `'reverse'` | `'forward'` | |\n| duration | Animation duration | number | - | |\n| easing | Animation easing function | string | - | |\n| fill | Fill mode after animation ends | `'auto'` \\| `'backwards'` \\| `'both'` \\| `'forwards'` \\| `'none'` | `'none'` | |\n| iterations | Animation iteration count | number | - | |\n\n**Example:**\n\n```javascript\n// Simple enable\nconst graph1 = new Graph({\n animation: true,\n});\n\n// Detailed configuration\nconst graph2 = new Graph({\n animation: {\n duration: 500, // Animation duration (milliseconds)\n easing: 'ease-in-out', // Easing function\n },\n});\n```\n\n## data\n\n> [GraphData](#graphdata)\n\nData.\n\n#### GraphData\n\n| Property | Description | Type | Default | Required |\n| -------- | ----------- | ------------------------- | ------- | -------- |\n| nodes | Node data | [NodeData](#nodedata)[] | - | ✓ |\n| edges | Edge data | [EdgeData](#edgedata)[] | - | ✓ |\n| combos | Combo data | [ComboData](#combodata)[] | - | ✓ |\n\n#### NodeData\n\n| Property | Description | Type | Default | Required |\n| -------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | ------- | -------- |\n| id | Unique identifier for the node, used to distinguish different nodes | string | - | ✓ |\n| type | Node type, built-in node type name or custom node name | string | - | |\n| data | Node data, used to store custom data for the node, such as node name, description, etc. Can be accessed in style mapping through callback functions | object | - | |\n| style | Node style, including visual attributes such as position, size, color, etc. | object | - | |\n| states | Initial state of the node, such as selected, activated, hovered, etc. | string[] | - | |\n| combo | ID of the combo to which it belongs, used to organize the hierarchical relationship of nodes, if none, it is null | string \\| null | - | |\n| children | Collection of child node IDs, used only in tree graph scenarios | string[] | - | |\n\n#### EdgeData\n\n| Property | Description | Type | Default | Required |\n| -------- | -------------------------------------------------------------------------------------------------------------- | -------- | ------- | -------- |\n| source | Starting node ID of the edge | string | - | ✓ |\n| target | Target node ID of the edge | string | - | ✓ |\n| id | Unique identifier for the edge | string | - | |\n| type | Edge type, built-in edge type name or custom edge name | string | - | |\n| data | Edge data, used to store custom data for the edge, can be accessed in style mapping through callback functions | object | - | |\n| style | Edge style, including visual attributes such as line color, width, arrow, etc. | object | - | |\n| states | Initial state of the edge | string[] | - | |\n\n#### ComboData\n\n| Property | Description | Type | Default | Required |\n| -------- | ---------------------------------------------------------------------------------------------------------------- | -------------- | ------- | -------- |\n| id | Unique identifier for the combo | string | - | ✓ |\n| type | Combo type, built-in combo type name or custom combo name | string | - | |\n| data | Combo data, used to store custom data for the combo, can be accessed in style mapping through callback functions | object | - | |\n| style | Combo style | object | - | |\n| states | Initial state of the combo | string[] | - | |\n| combo | Parent combo ID. If there is no parent combo, it is null | string \\| null | - | |\n\n**Example:**\n\n```javascript\nconst graph = new Graph({\n data: {\n nodes: [\n { id: 'node1', style: { x: 100, y: 100 } },\n { id: 'node2', style: { x: 200, y: 200 } },\n ],\n edges: [{ id: 'edge1', source: 'node1', target: 'node2' }],\n combos: [{ id: 'combo1', style: { x: 150, y: 150 } }],\n },\n});\n```\n\n- Read [Data](/en/manual/data) to learn more about graph data, including but not limited to data formats, how to manipulate data, etc.\n\n## node\n\n> [NodeOptions](#nodeoptions)\n\nNode configuration options.\n\n#### NodeOptions\n\n| Property | Description | Type | Default | Required |\n| --------- | -------------------------------------------------------------------------------- | -------------------------------------------------------- | -------- | -------- |\n| type | Node type, built-in node type name or custom node name | [Type](/en/manual/element/node/base-node#type) | `circle` | |\n| style | Node style, including color, size, etc. | [Style](/en/manual/element/node/base-node#style) | - | |\n| state | Define the style of the node in different states | [State](/en/manual/element/node/base-node#state) | - | |\n| palette | Define the color palette of the node, used to map colors based on different data | [Palette](/en/manual/element/node/base-node#palette) | - | |\n| animation | Define the animation effect of the node | [Animation](/en/manual/element/node/base-node#animation) | - | |\n\nSee [Node](/en/manual/element/node/base-node) for details\n\n**Example:**\n\n```javascript\nconst graph = new Graph({\n node: {\n type: 'circle', // Node type\n style: {\n fill: '#e6f7ff', // Fill color\n stroke: '#91d5ff', // Border color\n lineWidth: 1, // Border width\n r: 20, // Radius\n labelText: (d) => d.id, // Label text\n },\n // Node state style\n state: {\n hover: {\n lineWidth: 2,\n stroke: '#69c0ff',\n },\n selected: {\n fill: '#bae7ff',\n stroke: '#1890ff',\n lineWidth: 2,\n },\n },\n },\n});\n```\n\n## edge\n\n> [EdgeOptions](#edgeoptions)\n\nEdge configuration options\n\n#### EdgeOptions\n\n| Property | Description | Type | Default | Required |\n| --------- | -------------------------------------------------------------------------------- | -------------------------------------------------------- | ------- | -------- |\n| type | Edge type, built-in edge type name or custom edge name | [Type](/en/manual/element/edge/base-edge#type) | `line` | |\n| style | Edge style, including color, size, etc. | [Style](/en/manual/element/edge/base-edge#style) | - | |\n| state | Define the style of the edge in different states | [State](/en/manual/element/edge/base-edge#state) | - | |\n| palette | Define the color palette of the edge, used to map colors based on different data | [Palette](/en/manual/element/edge/base-edge#palette) | - | |\n| animation | Define the animation effect of the edge | [Animation](/en/manual/element/edge/base-edge#animation) | - | |\n\nSee [Edge](/en/manual/element/edge/base-edge) for details\n\n**Example:**\n\n```javascript\nconst graph = new Graph({\n edge: {\n type: 'polyline', // Edge type\n style: {\n stroke: '#91d5ff', // Edge color\n lineWidth: 2, // Edge width\n endArrow: true, // Whether there is an arrow\n },\n // Edge state style\n state: {\n selected: {\n stroke: '#1890ff',\n lineWidth: 3,\n },\n },\n },\n});\n```\n\n## combo\n\n> [ComboOptions](#combooptions)\n\nCombo configuration options\n\n| Property | Description | Type | Default | Required |\n| --------- | --------------------------------------------------------------------------------- | ---------------------------------------------------------- | -------- | -------- |\n| type | Combo type, built-in combo type name or custom combo name | [Type](/en/manual/element/combo/base-combo#type) | `circle` | |\n| style | Combo style, including color, size, etc. | [Style](/en/manual/element/combo/base-combo#style) | - | |\n| state | Define the style of the combo in different states | [State](/en/manual/element/combo/base-combo#state) | - | |\n| palette | Define the color palette of the combo, used to map colors based on different data | [Palette](/en/manual/element/combo/base-combo#palette) | - | |\n| animation | Define the animation effect of the combo | [Animation](/en/manual/element/combo/base-combo#animation) | - | |\n\nSee [Combo](/en/manual/element/combo/base-combo) for details\n\n**Example:**\n\n```javascript\nconst graph = new Graph({\n combo: {\n type: 'circle', // Combo type\n style: {\n fill: '#f0f0f0', // Background color\n stroke: '#d9d9d9', // Border color\n lineWidth: 1, // Border width\n },\n // Combo state style\n state: {\n selected: {\n stroke: '#1890ff',\n lineWidth: 2,\n },\n },\n },\n});\n```\n\n## layout\n\n> _CustomLayoutOptions \\| CustomLayoutOptions[]_\n\nLayout configuration options, can be an object (normal layout) or an array (pipeline layout).\n\n**Example**:\n\n```javascript\nconst graph = new Graph({\n container: 'container',\n layout: {\n type: 'force', // Force-directed layout\n preventOverlap: true, // Prevent node overlap\n nodeStrength: -50, // Repulsion between nodes\n edgeStrength: 0.5, // Elastic coefficient of edges\n iterations: 200, // Number of iterations\n animation: true, // Enable layout animation\n },\n});\n```\n\n## theme\n\n> _false \\| 'light' \\| 'dark' \\| string_\n\nSet the theme of the chart, can be the built-in `'light'`, `'dark'` theme, or the name of a custom theme. Set to `false` to use no theme.\n\n## behaviors\n\n> _(string \\| [CustomExtensionOptions](#customextensionoptions) \\| ((this:Graph) =>CustomExtensionOptions))[]_\n\nConfigure the interaction behaviors of the chart, can be a string (using default configuration), an object (custom configuration), or a function (dynamic configuration, the graph instance can be accessed within the function).\n\n**Example:**\n\n```javascript\nconst graph = new Graph({\n behaviors: [\n 'drag-canvas', // Enable canvas dragging with default configuration\n 'zoom-canvas', // Enable canvas zooming with default configuration\n {\n type: 'drag-element', // Custom configuration for dragging elements\n key: 'drag-node-only',\n enable: (event) => event.targetType === 'node', // Only allow dragging nodes\n },\n function () {\n console.log(this); // Output graph instance\n return {\n type: 'hover-activate',\n };\n },\n ],\n});\n```\n\n- View [Interaction Overview](/en/manual/behavior/overview) to learn more about interaction principles\n- Browse [Built-in Interactions](/en/manual/behavior/auto-adapt-label) to get a list of all built-in interactions and their configuration options\n\n## plugins\n\n> _(string \\| [CustomExtensionOptions](#customextensionoptions) \\| ((this:Graph) =>CustomExtensionOptions))[]_\n\nSet the plugins of the chart, can be a string (using default configuration), an object (custom configuration), or a function (dynamic configuration, the graph instance can be accessed within the function).\n\n**Example:**\n\n```javascript\nconst graph = new Graph({\n container: 'container',\n plugins: [\n 'minimap', // Enable minimap with default configuration\n {\n type: 'grid', // Enable grid background\n key: 'grid-plugin',\n line: {\n stroke: '#d9d9d9',\n lineWidth: 1,\n },\n },\n {\n type: 'toolbar', // Enable toolbar\n key: 'graph-toolbar',\n position: 'top-right', // Position\n },\n ],\n});\n```\n\n- View [Plugin Overview](/en/manual/plugin/overview) to learn more about plugin principles\n- Browse [Built-in Plugins](/en/manual/plugin/background) to get a list of all built-in plugins and their configuration options\n\n## transforms\n\n> _(string \\| [CustomExtensionOptions](#customextensionoptions) \\| ((this:Graph) =>CustomExtensionOptions))[]_\n\nConfigure data processing, used to process data before rendering, does not affect the original data. Can be a string (using default configuration), an object (custom configuration), or a function (dynamic configuration, the graph instance can be accessed within the function).\n\n**Example:**\n\n```javascript\nconst graph = new Graph({\n transforms: [\n 'process-parallel-edges', // Process parallel edges with default configuration\n {\n type: 'map-node-size', // Map node size based on node data\n field: 'value', // Use the value of the field\n max: 50, // Maximum radius\n min: 20, // Minimum radius\n },\n ],\n});\n```\n\n- View [Data Processing Overview](/en/manual/transform/overview) to learn more about data processing principles\n- Browse [Built-in Data Processing](/en/manual/transform/map-node-size) to get a list of all built-in data processing and their configuration options\n\n#### CustomExtensionOptions\n\n```typescript\ninterface CustomExtensionOption extends Record
- `'overflow'` 仅当图内容超出视口时进行适配
- `'always'` 总是进行适配 | `'overflow`' \\| `'always'` | `'always'` | |\n| direction | 仅对指定方向进行适配
- `'x'` 仅适配 x 方向
- `'y'` 仅适配 y 方向
- `'both'` 适配 x 和 y 方向 | `'x`' \\| `'y`' \\| `'both'` | `'both'` | |\n\n#### ViewportAnimationEffectTiming\n\n```typescript\ntype ViewportAnimationEffectTiming =\n | boolean // true 启用默认动画，false 禁用动画\n | {\n easing?: string; // 动画缓动函数：'ease-in-out'、'ease-in'、'ease-out'、'linear'\n duration?: number; // 动画持续时间(毫秒)\n };\n```\n\n## autoResize\n\n> _boolean_ **默认值:** `false`\n\n是否自动调整画布大小。\n\n基于 `window.onresize` 事件实现。当浏览器窗口大小变化时，画布将自动调整大小以适应容器。\n\n## background\n\n> _string_\n\n画布背景色。\n\n该颜色作为导出图片时的背景色。可以使用任何有效的 CSS 颜色值，如十六进制、RGB、RGBA 等。\n\n## canvas\n\n> [CanvasConfig](#canvasconfig)\n\n画布配置。GraphOptions 下相关配置项（如 `container`、`width`、`height`、`devicePixelRatio`、`background`、`cursor`）为快捷配置项，会被转换为 canvas 配置项。\n\n#### CanvasConfig\n\n| 属性 | 描述 | 类型 | 默认值 | 必填 |\n| ---------------- | ------------------------------------------------------ | ------------------------------------------------------------------------------ | ------ | ---- |\n| container | 画布容器 | string \\| HTMLElement | - | |\n| devicePixelRatio | 设备像素比 | number | - | |\n| width | 画布宽度 | number | - | |\n| height | 画布高度 | number | - | |\n| cursor | 指针样式，与 [GraphOptions.cursor](#cursor) 配置相同 | string | - | |\n| background | 画布背景色 | string | - | |\n| renderer | 渲染器，与 [GraphOptions.renderer](#renderer) 配置相同 | (layer: `'background'` \\| `'main'` \\| `'label'` \\| `'transient'`) => IRenderer | - | |\n| enableMultiLayer | 是否启用多图层。非动态参数，仅在初始化时生效 | boolean | - | |\n\n## container\n\n> _string \\|_ _HTMLElement_ _\\|_ Canvas\n\n画布容器，可以是以下三种赋值之一：\n\n- DOM 元素的 ID 字符串，如 `'container'`\n- HTML 元素对象，如 `document.getElementById('container')`\n- Canvas 实例，如 `new Canvas(options)`，其中 `options` 为 [CanvasConfig](#canvasconfig) 类型。\n\n## cursor\n\n> string\n\n指针样式，控制鼠标悬停在画布上时的光标形状。可以使用任何有效的 CSS cursor 值。\n\n支持的值有： `'auto'`、`'default'`、`'none'`、`'context-menu'`、`'help'`、`'pointer'`、`'progress'`、`'wait'`、`'cell'`、`'crosshair'`、`'text'`、`'vertical-text'`、`'alias'`、`'copy'`、`'move'`、`'no-drop'`、`'not-allowed'`、`'grab'`、`'grabbing'`、`'all-scroll'`、`'col-resize'`、`'row-resize'`、`'n-resize'`、`'e-resize'`、`'s-resize'`、`'w-resize'`、`'ne-resize'`、`'nw-resize'`、`'se-resize'`、`'sw-resize'`、`'ew-resize'`、`'ns-resize'`、`'nesw-resize'`、`'nwse-resize'`、`'zoom-in'`、`'zoom-out'`。\n\n这里的 Cursor 值参考 [MDN - cursor](https://developer.mozilla.org/zh-CN/docs/Web/CSS/cursor)。\n\n## devicePixelRatio\n\n> _number_\n\n设备像素比。\n\n用于高清屏的设备像素比，默认为 [window.devicePixelRatio](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/devicePixelRatio)。\n\n## width\n\n> _number_\n\n画布宽度。如果未设置，则会自动获取容器宽度。\n\n## height\n\n> _number_\n\n画布高度。如果未设置，则会自动获取容器高度。\n\n## renderer\n\n> _(layer: 'background' \\| 'main' \\| 'label' \\| 'transient') =>_ _IRenderer_\n\n手动指定渲染器\n\nG6 采用了分层渲染的方式，分为 `background`、`main`、`label`、`transient` 四层，用户可以通过该配置项分别设置每层画布的渲染器。\n\n**示例**: 使用 SVG 渲染器进行渲染\n\n```javascript\nimport { Renderer as SVGRenderer } from '@antv/g-svg';\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n renderer: () => new SVGRenderer(),\n});\n```\n\n## padding\n\n> _number \\| number[]_\n\n画布内边距\n\n通常在自适应时，会根据内边距进行适配。可以是单个数值（四边相同）或者数组形式（按顺序指定上、右、下、左的内边距）。\n\n**示例：**\n\n```javascript\n// 单个数值\nconst graph1 = new Graph({\n padding: 20, // 四边均为 20 像素的内边距\n});\n\n// 数组形式\nconst graph2 = new Graph({\n padding: [20, 40, 20, 40], // 上、右、下、左的内边距\n});\n```\n\n## rotation\n\n> _number_ **默认值:** `0`\n\n旋转角度（以弧度为单位）\n\n## x\n\n> _number_\n\n视口 x 坐标，设置视口的初始水平位置。\n\n## y\n\n> _number_\n\n视口 y 坐标，设置视口的初始垂直位置。\n\n## zoom\n\n> _number_ **默认值:** `1`\n\n设置视口的初始缩放级别，1 表示 100%（原始大小）。\n\n## zoomRange\n\n> _[number, number]_ **默认值:** `[0.01, 10]`\n\n缩放范围，限制用户可以缩放的最小和最大比例。\n\n## animation\n\n> _boolean \\| [AnimationEffectTiming](#animationeffecttiming)_\n\n启用或关闭全局动画\n\n为动画配置项时，会启用动画，并将该动画配置作为全局动画的基础配置。\n\n#### AnimationEffectTiming\n\n| 属性 | 描述 | 类型 | 默认值 | 必选 |\n| ---------- | -------------------- | ------------------------------------------------------------------- | ----------- | ---- |\n| delay | 动画延迟时间 | number | - | |\n| direction | 动画方向 | `'alternate'` \\| `'alternate-reverse'` \\| `'normal'` \\| `'reverse'` | `'forward'` | |\n| duration | 动画持续时间 | number | - | |\n| easing | 动画缓动函数 | string | - | |\n| fill | 动画结束后的填充模式 | `'auto'` \\| `'backwards'` \\| `'both'` \\| `'forwards'` \\| `'none'` | `'none'` | |\n| iterations | 动画迭代次数 | number | - | |\n\n**示例：**\n\n```javascript\n// 简单启用\nconst graph1 = new Graph({\n animation: true,\n});\n\n// 详细配置\nconst graph2 = new Graph({\n animation: {\n duration: 500, // 动画持续时间（毫秒）\n easing: 'ease-in-out', // 缓动函数\n },\n});\n```\n\n## data\n\n> [GraphData](#graphdata)\n\n数据。\n\n#### GraphData\n\n| 属性 | 描述 | 类型 | 默认值 | 必选 |\n| ------ | -------- | ------------------------- | ------ | ---- |\n| nodes | 节点数据 | [NodeData](#nodedata)[] | - | ✓ |\n| edges | 边数据 | [EdgeData](#edgedata)[] | - | ✓ |\n| combos | 组合数据 | [ComboData](#combodata)[] | - | ✓ |\n\n#### NodeData\n\n| 属性 | 描述 | 类型 | 默认值 | 必选 |\n| -------- | -------------------------------------------------------------------------------------------- | -------------- | ------ | ---- |\n| id | 节点的唯一标识符，用于区分不同的节点 | string | - | ✓ |\n| type | 节点类型，内置节点类型名称或者自定义节点的名称 | string | - | |\n| data | 节点数据，用于存储节点的自定义数据，例如节点的名称、描述等。可以在样式映射中通过回调函数获取 | object | - | |\n| style | 节点样式，包括位置、大小、颜色等视觉属性 | object | - | |\n| states | 节点初始状态，如选中、激活、悬停等 | string[] | - | |\n| combo | 所属的组合 ID，用于组织节点的层级关系，如果没有则为 null | string \\| null | - | |\n| children | 子节点 ID 集合，仅在树图场景下使用 | string[] | - | |\n\n#### EdgeData\n\n| 属性 | 描述 | 类型 | 默认值 | 必选 |\n| ------ | ---------------------------------------------------------------- | -------- | ------ | ---- |\n| source | 边起始节点 ID | string | - | ✓ |\n| target | 边目标节点 ID | string | - | ✓ |\n| id | 边的唯一标识符 | string | - | |\n| type | 边类型，内置边类型名称或者自定义边的名称 | string | - | |\n| data | 边数据，用于存储边的自定义数据，可以在样式映射中通过回调函数获取 | object | - | |\n| style | 边样式，包括线条颜色、宽度、箭头等视觉属性 | object | - | |\n| states | 边初始状态 | string[] | - | |\n\n#### ComboData\n\n| 属性 | 描述 | 类型 | 默认值 | 必选 |\n| ------ | -------------------------------------------------------------------- | -------------- | ------ | ---- |\n| id | 组合的唯一标识符 | string | - | ✓ |\n| type | 组合类型，内置组合类型名称或者自定义组合名称 | string | - | |\n| data | 组合数据，用于存储组合的自定义数据，可以在样式映射中通过回调函数获取 | object | - | |\n| style | 组合样式 | object | - | |\n| states | 组合初始状态 | string[] | - | |\n| combo | 组合的父组合 ID。如果没有父组合，则为 null | string \\| null | - | |\n\n**示例：**\n\n```javascript\nconst graph = new Graph({\n data: {\n nodes: [\n { id: 'node1', style: { x: 100, y: 100 } },\n { id: 'node2', style: { x: 200, y: 200 } },\n ],\n edges: [{ id: 'edge1', source: 'node1', target: 'node2' }],\n combos: [{ id: 'combo1', style: { x: 150, y: 150 } }],\n },\n});\n```\n\n- 阅读 [数据](/manual/data) 深入了解图数据，包括不限于数据格式、如何操作数据等。\n\n## node\n\n> [NodeOptions](#nodeoptions)\n\n节点配置项。\n\n#### NodeOptions\n\n| 属性 | 描述 | 类型 | 默认值 | 必选 |\n| --------- | -------------------------------------------- | ----------------------------------------------------- | -------- | ---- |\n| type | 节点类型，内置节点类型名称或自定义节点的名称 | [Type](/manual/element/node/base-node#type) | `circle` | |\n| style | 节点样式，包括颜色、大小等 | [Style](/manual/element/node/base-node#style) | - | |\n| state | 定义节点在不同状态下的样式 | [State](/manual/element/node/base-node#state) | - | |\n| palette | 定义节点的色板，用于根据不同数据映射颜色 | [Palette](/manual/element/node/base-node#palette) | - | |\n| animation | 定义节点的动画效果 | [Animation](/manual/element/node/base-node#animation) | - | |\n\n详见 [Node](/manual/element/node/base-node)\n\n**示例：**\n\n```javascript\nconst graph = new Graph({\n node: {\n type: 'circle', // 节点类型\n style: {\n fill: '#e6f7ff', // 填充色\n stroke: '#91d5ff', // 边框色\n lineWidth: 1, // 边框宽度\n r: 20, // 半径\n labelText: (d) => d.id, // 标签文本\n },\n // 节点状态样式\n state: {\n hover: {\n lineWidth: 2,\n stroke: '#69c0ff',\n },\n selected: {\n fill: '#bae7ff',\n stroke: '#1890ff',\n lineWidth: 2,\n },\n },\n },\n});\n```\n\n## edge\n\n> [EdgeOptions](#edgeoptions)\n\n边配置项\n\n#### EdgeOptions\n\n| 属性 | 描述 | 类型 | 默认值 | 必选 |\n| --------- | -------------------------------------- | ----------------------------------------------------- | ------ | ---- |\n| type | 边类型，内置边类型名称或自定义边的名称 | [Type](/manual/element/edge/base-edge#type) | `line` | |\n| style | 边样式，包括颜色、大小等 | [Style](/manual/element/edge/base-edge#style) | - | |\n| state | 定义边在不同状态下的样式 | [State](/manual/element/edge/base-edge#state) | - | |\n| palette | 定义边的色板，用于根据不同数据映射颜色 | [Palette](/manual/element/edge/base-edge#palette) | - | |\n| animation | 定义边的动画效果 | [Animation](/manual/element/edge/base-edge#animation) | - | |\n\n详见 [Edge](/manual/element/edge/base-edge)\n\n**示例：**\n\n```javascript\nconst graph = new Graph({\n edge: {\n type: 'polyline', // 边类型\n style: {\n stroke: '#91d5ff', // 边的颜色\n lineWidth: 2, // 边的宽度\n endArrow: true, // 是否有箭头\n },\n // 边的状态样式\n state: {\n selected: {\n stroke: '#1890ff',\n lineWidth: 3,\n },\n },\n },\n});\n```\n\n## combo\n\n> [ComboOptions](#combooptions)\n\n组合配置项\n\n| 属性 | 描述 | 类型 | 默认值 | 必选 |\n| --------- | -------------------------------------------- | ------------------------------------------------------- | -------- | ---- |\n| type | 组合类型，内置组合类型名称或自定义组合的名称 | [Type](/manual/element/combo/base-combo#type) | `circle` | |\n| style | 组合样式，包括颜色、大小等 | [Style](/manual/element/combo/base-combo#style) | - | |\n| state | 定义组合在不同状态下的样式 | [State](/manual/element/combo/base-combo#state) | - | |\n| palette | 定义组合的色板，用于根据不同数据映射颜色 | [Palette](/manual/element/combo/base-combo#palette) | - | |\n| animation | 定义组合的动画效果 | [Animation](/manual/element/combo/base-combo#animation) | - | |\n\n详见 [Combo](/manual/element/combo/base-combo)\n\n**示例：**\n\n```javascript\nconst graph = new Graph({\n combo: {\n type: 'circle', // 组合类型\n style: {\n fill: '#f0f0f0', // 背景色\n stroke: '#d9d9d9', // 边框色\n lineWidth: 1, // 边框宽度\n },\n // 组合状态样式\n state: {\n selected: {\n stroke: '#1890ff',\n lineWidth: 2,\n },\n },\n },\n});\n```\n\n## layout\n\n> _CustomLayoutOptions \\| CustomLayoutOptions[]_\n\n布局配置项，可以是对象（普通布局）或数组（流水线布局）。\n\n**示例**:\n\n```javascript\nconst graph = new Graph({\n container: 'container',\n layout: {\n type: 'force', // 力导向布局\n preventOverlap: true, // 防止节点重叠\n nodeStrength: -50, // 节点之间的斥力\n edgeStrength: 0.5, // 边的弹性系数\n iterations: 200, // 迭代次数\n animation: true, // 启用布局动画\n },\n});\n```\n\n## theme\n\n> _false \\| 'light' \\| 'dark' \\| string_\n\n设置图表的主题，可以是内置的 `'light'`、`'dark'` 主题，也可以是自定义主题的名称。设为 `false` 则不使用任何主题。\n\n## behaviors\n\n> _(string \\| [CustomExtensionOptions](#customextensionoptions) \\| ((this:Graph) =>CustomExtensionOptions))[]_\n\n配置图表的交互行为，可以是字符串（使用默认配置）、对象（自定义配置）或函数（动态配置、函数内可访问图实例）。\n\n**示例：**\n\n```javascript\nconst graph = new Graph({\n behaviors: [\n 'drag-canvas', // 使用默认配置启用画布拖拽\n 'zoom-canvas', // 使用默认配置启用画布缩放\n {\n type: 'drag-element', // 自定义配置拖拽元素\n key: 'drag-node-only',\n enable: (event) => event.targetType === 'node', // 只允许拖拽节点\n },\n function () {\n console.log(this); // 输出 graph 实例\n return {\n type: 'hover-activate',\n };\n },\n ],\n});\n```\n\n- 查看 [交互总览](/manual/behavior/overview) 深入了解交互原理\n- 浏览 [内置交互](/manual/behavior/auto-adapt-label) 获取所有内置交互列表及其配置选项\n\n## plugins\n\n> _(string \\| [CustomExtensionOptions](#customextensionoptions) \\| ((this:Graph) =>CustomExtensionOptions))[]_\n\n设置图表的插件，可以是字符串（使用默认配置）、对象（自定义配置）或函数（动态配置、函数内可访问图实例）。\n\n**示例：**\n\n```javascript\nconst graph = new Graph({\n container: 'container',\n plugins: [\n 'minimap', // 启用小地图，使用默认配置\n {\n type: 'grid', // 启用网格背景\n key: 'grid-plugin',\n line: {\n stroke: '#d9d9d9',\n lineWidth: 1,\n },\n },\n {\n type: 'toolbar', // 启用工具栏\n key: 'graph-toolbar',\n position: 'top-right', // 位置\n },\n ],\n});\n```\n\n- 查看 [插件总览](/manual/plugin/overview) 深入了解插件原理\n- 浏览 [内置插件](/manual/plugin/background) 获取所有内置插件列表及其配置项\n\n## transforms\n\n> _(string \\| [CustomExtensionOptions](#customextensionoptions) \\| ((this:Graph) =>CustomExtensionOptions))[]_\n\n配置数据处理，用于在渲染前对数据进行处理，不会影响原始数据。可以是字符串（使用默认配置）、对象（自定义配置）或函数（动态配置、函数内可访问图实例）。\n\n**示例：**\n\n```javascript\nconst graph = new Graph({\n transforms: [\n 'process-parallel-edges', // 处理平行边，使用默认配置\n {\n type: 'map-node-size', // 根据节点数据映射节点大小\n field: 'value', // 使用 value 字段的值\n max: 50, // 最大半径\n min: 20, // 最小半径\n },\n ],\n});\n```\n\n- 查看 [数据处理总览](/manual/transform/overview) 深入了解数据处理原理\n- 浏览 [内置数据处理](/manual/transform/map-node-size) 获取所有内置数据处理列表及其配置项\n\n#### CustomExtensionOptions\n\n```typescript\ninterface CustomExtensionOption extends RecordAntV G6
\n\n
\n\nRich Elements
\n\nFlexible Interactions
\n\nHigh-Performance Layout Algorithms
\n\nMulticolor Themes for Various Scenarios
\n\n3D Scenes
\n\nHigh Customizability
\n\nStart Your G6 Journey in Just 3 Minutes
\n\nAntV G6
\n\n
\n\n丰富元素
\n\n灵活交互
\n\n高性能布局算法
\n\n多色主题，适用多种场景
\n\n3D 场景
\n\n高可定制性
\n\n仅需 3 分钟，开启 G6 之旅
\n\n
![\"Dagre](\"https://img.alicdn.com/imgextra/i3/O1CN01OpQHBZ1HcpZuWZLS7_!!6000000000779-0-tps-1274-1234.jpg\")
\n\n| Property | Description | Type | Default | Required |\n| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- | ------- | -------- |\n| type | Layout type | `antv-dagre` | - | ✓ |\n| rankdir | Layout direction, options | `TB` \\| `BT` \\| `LR` \\| `RL` | `TB` | |\n| align | Node alignment, options | `UL` \\| `UR` \\| `DL` \\| `DR` | `UL` | |\n| nodesep | Node spacing (px). For `TB` or `BT`, it's horizontal spacing; for `LR` or `RL`, it's vertical spacing. | number | 50 | |\n| nodesepFunc | Callback for node spacing (px), allows different spacing for different nodes. For `TB` or `BT`, it's horizontal spacing; for `LR` or `RL`, it's vertical spacing. Takes precedence over `nodesep`. | (d?: Node) => number | | |\n| ranksep | Rank spacing (px). For `TB` or `BT`, it's vertical spacing between adjacent ranks; for `LR` or `RL`, it's horizontal spacing. | number | 50 | |\n| ranksepFunc | Callback for rank spacing (px), allows different spacing for different ranks. For `TB` or `BT`, it's vertical spacing; for `LR` or `RL`, it's horizontal spacing. Takes precedence over `ranksep`. | (d?: Node) => number | | |\n| ranker | Algorithm for assigning ranks to nodes: `longest-path`, `tight-tree`, or `network-simplex` | `network-simplex` \\| `tight-tree` \\| `longest-path` | - | |\n| nodeSize | Specify node size for all nodes or each node, used for occupying space and spacing calculation | Size \\| ((nodeData: Node) => Size) | - | |\n| controlPoints | Whether to keep edge control points. Only effective when using built-in polyline edges (`type: 'polyline-edge'`) or any edge that consumes `style.controlPoints` as control points | boolean | false | |\n| begin | Top-left alignment position of the layout | [number, number] \\| [number, number, number] | - | |\n| sortByCombo | Whether to sort nodes in the same rank based on `parentId` in each node's data to avoid Combo overlap | boolean | false | |\n| edgeLabelSpace | Whether to reserve space for edge labels | boolean | true | |\n| nodeOrder | Reference array for node order in the same rank, storing node ids | string[] | - | |\n| radial | Whether to use radial layout based on `dagre` | boolean | - | |\n| focusNode | Focus node, only effective when `radial` is true | ID \\| Node \\| null | - | |\n| preset | Reference node positions for layout calculation, usually used to keep transitions smooth when switching data | NodeData[] | - | |\n\n> Note: In G6, the control points computed by `antv-dagre` are written into `edge.style.controlPoints`.\n\n### align\n\n> _DagreAlign_ **Default:** `UL`\n\nNode alignment: U = upper, D = down, L = left, R = right\n\n- `UL`: align to upper left\n- `UR`: align to upper right\n- `DL`: align to lower left\n- `DR`: align to lower right\n\n### rankdir\n\n> _DagreRankdir_ **Default:** `TB`\n\nLayout direction. T = top, B = bottom, L = left, R = right\n\n- `TB`: top to bottom\n- `BT`: bottom to top\n- `LR`: left to right\n- `RL`: right to left\n\n### ranker\n\n> _`network-simplex` \\| `tight-tree` \\| `longest-path`_\n\nLayout mode\n\n### ranksep\n\n> _number_ **Default:** 50\n\nRank spacing (px)\n\nFor 'TB' or 'BT', it's vertical spacing; for 'LR' or 'RL', it's horizontal spacing. `ranksepFunc` has higher priority.\n\n### ranksepFunc\n\n> _(d?: Node) => number_\n\nCallback for rank spacing (px)\n\nFor 'TB' or 'BT', it's vertical spacing; for 'LR' or 'RL', it's horizontal spacing. Takes precedence over nodesep if set.\n\n### nodesep\n\n> _number_ **Default:** 50\n\nNode spacing (px)\n\nFor 'TB' or 'BT', it's horizontal spacing; for 'LR' or 'RL', it's vertical spacing. `nodesepFunc` has higher priority.\n\n### nodesepFunc\n\n> _(d?: Node) => number_\n\nCallback for node spacing (px), allows different spacing for different nodes\n\nFor 'TB' or 'BT', it's horizontal spacing; for 'LR' or 'RL', it's vertical spacing. Takes precedence over nodesep if set.\n\n### begin\n\n> _[number, number] \\| [number, number, number]_ **Default:** undefined\n\nTop-left alignment position of the layout\n\n### controlPoints\n\n> _boolean_ **Default:** false\n\nWhether to keep edge control points. Only effective when using built-in polyline edges (`type: 'polyline-edge'`) or any edge that uses `style.controlPoints` as control points. Adds `style.controlPoints` to edge data.\n\n### edgeLabelSpace\n\n> _boolean_ **Default:** true\n\nWhether to reserve space for edge labels\n\nThis affects whether a dummy node is added in the middle of the edge.\n\n### focusNode\n\n> _ID \\| Node \\| null_\n\nFocus node, only effective when `radial` is true\n\n- ID: node id\n- Node: node instance\n- null: cancel focus\n\n### nodeOrder\n\n> _string[]_ **Default:** undefined\n\nReference array for node order in the same rank, stores node ids\n\nIf not specified, dagre's default order is used.\n\n### nodeSize\n\n> _Size \\| ((nodeData: Node) => Size)_ **Default:** undefined\n\nSpecify node size for all or each node.\n\nUsed for collision detection to prevent node overlap\n\n### preset\n\n> _OutNode[]_ **Default:** undefined\n\nReference node positions for layout calculation\n\nUsually for smooth transitions when switching data. In G6, if updating data, the existing layout result is used as input.\n\n### radial\n\n> _boolean_\n\nWhether to use radial layout based on dagre\n\n### sortByCombo\n\n> _boolean_ **Default:** false\n\nWhether to sort nodes in the same rank by their parentId to prevent Combo overlap\n\nRecommended to enable when using Combo\n\n## Suitable Scenarios\n\n- **Flowcharts**: Suitable for displaying flowcharts, node direction and spacing are automatically handled\n- **Dependency Graphs**: Display dependencies between packages or modules\n- **Task Scheduling Graphs**: Show dependencies and execution order between tasks\n\n## Related Documentation\n\n> The following documents can help you better understand the Dagre layout\n\n- [Graph Layout Algorithms: In-depth Dagre Layout](https://mp.weixin.qq.com/s/EdyTfFUH7fyMefNSBXI2nA)\n- [In-depth Dagre Layout Algorithm](https://www.yuque.com/antv/g6-blog/xxp5nl)\n","packages/site/docs/manual/layout/AntvDagreLayout.zh.md":"---\ntitle: AntV Dagre 布局 AntvDagre\norder: 2\n---\n\n## 概述\n\nAntvDagre 在原先[dagre](https://github.com/dagrejs/dagre/wiki)布局的基础上增加了更多有用的设置项，比如`nodeOrder`、`edgeLabelSpace`等等。 `dagre`布局本身一种层次化布局，适用于有向无环图（DAG）的布局场景，能够自动处理节点之间的方向和间距，支持水平和垂直布局。参考更多 Dagre 布局[样例](/examples#layout-dagre)或[源码](https://github.com/dagrejs/dagre/blob/master/lib/layout.js)以及[官方文档](https://github.com/dagrejs/dagre/wiki)。\n\n\n\n| 属性 | 描述 | 类型 | 默认值 | 必选 |\n| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- | ------ | ---- |\n| type | 布局类型 | `antv-dagre` | - | ✓ |\n| rankdir | 布局方向，可选值 | `TB` \\| `BT` \\| `LR` \\| `RL` | `TB` | |\n| align | 节点对齐方式，可选值 | `UL` \\| `UR` \\| `DL` \\| `DR` | `UL` | |\n| nodesep | 节点间距（px）。在 rankdir 为 `TB` 或 `BT` 时是节点的水平间距；在 rankdir 为 `LR` 或 `RL` 时代表节点的竖直方向间距 | number | 50 | |\n| nodesepFunc | 节点间距（px）的回调函数，优先级高于 `nodesep` | (d?: Node) => number | - | |\n| ranksep | 层间距（px）。在 rankdir 为 `TB` 或 `BT` 时是竖直方向相邻层间距；在 rankdir 为 `LR` 或 `RL` 时代表水平方向相邻层间距 | number | 50 | |\n| ranksepFunc | 层间距（px）的回调函数，优先级高于 `ranksep` | (d?: Node) => number | - | |\n| ranker | 为每个节点分配等级的算法，共支持三种算法：`longest-path`、`tight-tree`、`network-simplex` | `network-simplex` \\| `tight-tree` \\| `longest-path` | - | |\n| nodeSize | 统一指定或为每个节点指定节点大小，用于占位与间距计算 | Size \\| ((nodeData: Node) => Size) | - | |\n| controlPoints | 是否保留边的控制点，仅在边配置中使用了内置折线（type: 'polyline-edge'）时，或任何将自定义消费了 `style.controlPoints` 字段作为控制点位置的边时生效 | boolean | false | |\n| begin | 布局的左上角对齐位置 | [number, number] \\| [number, number, number] | - | |\n| sortByCombo | 同一层节点是否根据每个节点数据中的 `parentId` 进行排序，以防止 Combo 重叠 | boolean | false | |\n| edgeLabelSpace | 是否为边的 label 预留位置 | boolean | true | |\n| nodeOrder | 同层节点顺序的参考数组，存放节点 id 值 | string[] | - | |\n| radial | 是否基于 `dagre` 进行辐射布局 | boolean | - | |\n| focusNode | 关注的节点，仅在 `radial` 为 true 时生效 | ID \\| Node \\| null | - | |\n| preset | 布局计算时参考的节点位置，一般用于切换数据时保证重新布局的连续性 | NodeData[] | - | |\n\n> 补充：在 G6 中，`antv-dagre` 计算得到的控制点会被写入边的 `style.controlPoints`。\n\n### align\n\n> _DagreAlign_ **Default:** `UL`\n\n节点对齐方式 U：upper（上）；D：down（下）；L：left（左）；R：right（右）\n\n- `UL`:对齐到左上角\n- `UR`:对齐到右上角\n- `DL`:对齐到左下角\n- `DR`:对齐到右下角\n\n### rankdir\n\n> _DagreRankdir_ **Default:** `TB`\n\n布局的方向。T：top（上）；B：bottom（下）；L：left（左）；R：right（右）\n\n- `TB`:从上至下布局\n- `BT`:从下至上布局\n- `LR`:从左至右布局\n- `RL`:从右至左布局\n\n### ranker\n\n> _`network-simplex` \\| `tight-tree` \\| `longest-path`_\n\n布局的模式\n\n### ranksep\n\n> _number_ **Default:** 50\n\n层间距（px）\n\n在 rankdir 为 'TB' 或 'BT' 时是竖直方向相邻层间距；在 rankdir 为 'LR' 或 'RL' 时代表水平方向相邻层间距。ranksepFunc 拥有更高的优先级\n\n### ranksepFunc\n\n> _(d?: Node) => number_\n\n层间距（px）的回调函数\n\n在 rankdir 为 'TB' 或 'BT' 时是竖直方向相邻层间距；在 rankdir 为 'LR' 或 'RL' 时代表水平方向相邻层间距。优先级高于 nodesep，即若设置了 nodesepFunc，则 nodesep 不生效\n\n### nodesep\n\n> _number_ **Default:** 50\n\n节点间距（px）\n\n在 rankdir 为 'TB' 或 'BT' 时是节点的水平间距；在 rankdir 为 'LR' 或 'RL' 时代表节点的竖直方向间距。nodesepFunc 拥有更高的优先级\n\n### nodesepFunc\n\n> _(d?: Node) => number_\n\n节点间距（px）的回调函数，通过该参数可以对不同节点设置不同的节点间距\n\n在 rankdir 为 'TB' 或 'BT' 时是节点的水平间距；在 rankdir 为 'LR' 或 'RL' 时代表节点的竖直方向间距。优先级高于 nodesep，即若设置了 nodesepFunc，则 nodesep 不生效\n\n### begin\n\n> _[number, number] \\| [number, number, number]_ **Default:** undefined\n\n布局的左上角对齐位置\n\n### controlPoints\n\n> _boolean_ **Default:** false\n\n是否保留边的控制点，仅在边配置中使用了内置折线（type: 'polyline-edge'） 时，或任何将自定义消费了 `style.controlPoints` 字段作为控制点位置的边时生效。本质上就是给边数据增加了 `style.controlPoints`\n\n### edgeLabelSpace\n\n> _boolean_ **Default:** true\n\n是否为边的label留位置\n\n这会影响是否在边中间添加dummy node\n\n### focusNode\n\n> _ID \\| Node \\| null_\n\n关注的节点，注意，仅在`radial` 为 true 时生效\n\n- ID: 节点 id\n- Node: 节点实例\n- null: 取消关注\n\n### nodeOrder\n\n> _string[]_ **Default:** undefined\n\n同层节点顺序的参考数组，存放节点 id 值\n\n若未指定，则将按照 dagre 本身机制排列同层节点顺序\n\n### nodeSize\n\n> _Size \\| ((nodeData: Node) => Size)_ **Default:** undefined\n\n统一指定或为每个节点指定节点大小。\n\n用于防止节点重叠时的碰撞检测\n\n### preset\n\n> _OutNode[]_ **Default:** undefined\n\n布局计算时参考的节点位置\n\n一般用于切换数据时保证重新布局的连续性。在 G6 中，若是更新数据，则将自动使用已存在的布局结果数据作为输入\n\n### radial\n\n> _boolean_\n\n是否基于 dagre 进行辐射布局\n\n### sortByCombo\n\n> _boolean_ **Default:** false\n\n同一层节点是否根据每个节点数据中的 parentId 进行排序，以防止 Combo 重叠\n\n建议在有 Combo 的情况下配置\n\n## 布局适用场景\n\n- **流程图**：适合展示流程图，节点之间的方向和间距会自动处理；\n- **依赖关系图**：展示软件包或模块之间的依赖关系；\n- **任务调度图**：展示任务之间的依赖关系和执行顺序。\n\n## 相关文档\n\n> 以下文档可以帮助你更好地理解 Dagre 布局\n\n- [图布局算法｜详解 Dagre 布局](https://mp.weixin.qq.com/s/EdyTfFUH7fyMefNSBXI2nA)\n- [深入解读Dagre布局算法](https://www.yuque.com/antv/g6-blog/xxp5nl)\n","packages/site/docs/manual/layout/BaseLayout.en.md":"---\ntitle: Common Layout Configuration Options\norder: 1\n---\n\nThis article introduces the common attribute configurations for built-in layouts.\n\n## General Configuration\n\n| Property | Description | Type | Default | Required |\n| ---------------------- | --------------------------------------------------------------------------------------- | ----------------------------------------------------- | ---------- | -------- |\n| type | Layout type, name of built-in or custom layout | [Type](#Type) | - | ✓ |\n| isLayoutInvisibleNodes | Whether invisible nodes participate in the layout (takes effect when preLayout is true) | boolean | false | |\n| nodeFilter | Nodes participating in the layout | (node: NodeData) => boolean | () => true | |\n| comboFilter | Combos participating in the layout | (combo: ComboData) => boolean | () => true | |\n| preLayout | Use pre-layout, calculate layout before initializing elements | boolean | false | |\n| enableWorker | Whether to run the layout in a WebWorker | boolean | - | |\n| iterations | Number of iterations for iterative layout | number | - | |\n| animation | Whether to enable layout animation | boolean | false | |\n| width | Width of the layout area, defaults to the current container width | number | - | |\n| height | Height of the layout area, defaults to the current container height | number | - | |\n| center | Layout center point | [number, number] \\| [number, number, number] | - | |\n| node | Node field mapping, used to map business fields to layout fields | (datum) => ({ id?, x?, y?, z?, parentId?, isCombo? }) | - | |\n| edge | Edge field mapping, used to map business fields to layout fields | (datum) => ({ id?, source?, target? }) | - | |\n\nAdditional notes:\n\n- `width` / `height` / `center` are common layout fields uniformly supported by `@antvis/layout`.\n- `node` / `edge` are used to adapt non-standard business fields such as custom `id` / `source` / `target`.\n- `iterations` is the step count used by the G6 runtime to drive iterative layouts, and is not the same as some layouts' internal algorithm parameters.\n\n### Type\n\nSpecifies the layout type, either the name of a built-in layout type or a custom layout.\n\n```js {4}\nconst graph = new Graph({\n // Other configurations...\n layout: {\n type: 'antv-dagre',\n },\n});\n```\n\nOptional values include:\n\n- `antv-dagre`: [Custom layout based on dagre](/en/manual/layout/antv-dagre-layout)\n- `circular`: [Circular layout](/en/manual/layout/circular-layout)\n- `combo-combined`: [Layout suitable for combinations](/en/manual/layout/combo-combined-layout)\n- `concentric`: [Concentric layout](/en/manual/layout/concentric-layout)\n- `d3-force`: [Force-directed layout based on D3](/en/manual/layout/d3-force-layout)\n- `d3-force-3d`: [3D Force-directed layout](/en/manual/layout/d3-force3-d-layout)\n- `dagre`: [Dagre layout](/en/manual/layout/dagre-layout)\n- `fishbone`: [Fishbone layout](/en/manual/layout/fishbone)\n- `force`: [Force-directed layout](/en/manual/layout/force-layout)\n- `force-atlas2`: [ForceAtlas2 layout](/en/manual/layout/force-atlas2-layout)\n- `fruchterman`: [Fruchterman layout](/en/manual/layout/fruchterman-layout)\n- `grid`: [Grid layout](/en/manual/layout/grid-layout)\n- `mds`: [MDS layout for high-dimensional data](/en/manual/layout/mds-layout)\n- `radial`: [Radial layout](/en/manual/layout/radial-layout)\n- `random`: [Random layout](/en/manual/layout/random-layout)\n- `snake`: [Snake layout](/en/manual/layout/snake)\n- `compact-box`: [Compact box tree layout](/en/manual/layout/compact-box-layout)\n- `dendrogram`: [Dendrogram layout](/en/manual/layout/dendrogram-layout)\n- `mindmap`: [Mindmap layout](/en/manual/layout/mindmap-layout)\n- `indented`: [Indented tree layout](/en/manual/layout/indented-layout)\n","packages/site/docs/manual/layout/BaseLayout.zh.md":"---\ntitle: 布局通用配置项\norder: 1\n---\n\n本文介绍内置布局通用属性配置。\n\n## 通用配置\n\n| 属性 | 描述 | 类型 | 默认值 | 必选 |\n| ---------------------- | ----------------------------------------------------- | ----------------------------------------------------- | ---------- | ---- |\n| type | 布局类型，内置布局或自定义布局的名称 | [Type](#Type) | - | ✓ |\n| isLayoutInvisibleNodes | 不可见节点是否参与布局（当 preLayout 为 true 时生效） | boolean | false | |\n| nodeFilter | 参与该布局的节点 | (node: NodeData) => boolean | () => true | |\n| comboFilter | 参与该布局的combo元素 | (combo: ComboData) => boolean | () => true | |\n| preLayout | 使用前布局，在初始化元素前计算布局 | boolean | false | |\n| enableWorker | 是否在 WebWorker 中运行布局 | boolean | - | |\n| iterations | 迭代布局的迭代次数 | number | - | |\n| animation | 是否启用布局动画 | boolean | false | |\n| width | 布局区域宽度，默认使用当前容器宽度 | number | - | |\n| height | 布局区域高度，默认使用当前容器高度 | number | - | |\n| center | 布局中心点 | [number, number] \\| [number, number, number] | - | |\n| node | 节点字段映射，用于把业务字段映射为布局字段 | (datum) => ({ id?, x?, y?, z?, parentId?, isCombo? }) | - | |\n| edge | 边字段映射，用于把业务字段映射为布局字段 | (datum) => ({ id?, source?, target? }) | - | |\n\n补充说明：\n\n- `width` / `height` / `center` 是 `@antvis/layout` 统一支持的通用布局字段。\n- `node` / `edge` 用于适配非标准 `id/source/target` 业务数据。\n- `iterations` 是 G6 运行时用于驱动迭代布局的步数，不等同于某些布局内部自己的算法参数。\n\n### Type\n\n指定布局类型，内置布局类型名称或自定义布局的名称。\n\n```js {4}\nconst graph = new Graph({\n // 其他配置...\n layout: {\n type: 'antv-dagre',\n },\n});\n```\n\n可选值有：\n\n- `antv-dagre`：[基于 dagre 定制的布局](/manual/layout/antv-dagre-layout)\n- `circular`：[环形布局](/manual/layout/circular-layout)\n- `combo-combined`：[适用于存在组合的布局](/manual/layout/combo-combined-layout)\n- `concentric`：[同心圆布局](/manual/layout/concentric-layout)\n- `d3-force`[基于 D3 的力导向布局](/manual/layout/d3-force-layout)\n- `d3-force-3d`：[3D力导向布局](/manual/layout/d3-force3-d-layout)\n- `dagre`：[dagre 布局](/manual/layout/dagre-layout)\n- `fishbone`：[鱼骨布局](/manual/layout/fishbone)\n- `force`：[力导向布局](/manual/layout/force-layout)\n- `force-atlas2`：[ForceAtlas2 布局](/manual/layout/force-atlas2-layout)\n- `fruchterman`：[Fruchterman 布局](/manual/layout/fruchterman-layout)\n- `grid`：[网格布局](/manual/layout/grid-layout)\n- `mds`：[高维数据降维算法布局](/manual/layout/mds-layout)\n- `radial`：[径向布局](/manual/layout/radial-layout)\n- `random`：[随机布局](/manual/layout/random-layout)\n- `snake`：[蛇形布局](/manual/layout/snake)\n- `compact-box`：[紧凑树布局](/manual/layout/compact-box-layout)\n- `dendrogram`：[树状布局](/manual/layout/dendrogram-layout)\n- `mindmap`：[思维导图布局](/manual/layout/mindmap-layout)\n- `indented`：[缩进树布局](/manual/layout/indented-layout)\n","packages/site/docs/manual/layout/CircularLayout.en.md":"---\ntitle: Circular Layout\norder: 3\n---\n\n## Overview\n\nCircular layout arranges nodes evenly or at intervals on a circle, and also supports spiral layouts by configuring different startRadius and endRadius. See more circular layout [examples](en/examples#layout-circular) or [source code](https://github.com/antvis/layout/blob/v5/packages/layout/src/circular.ts).\n\n## Usage Scenarios\n\n**Circular layout**:\n\n- Suitable for networks with equal relationships and no hierarchical structure\n\n**Spiral layout**:\n\n- Suitable for implicit hierarchies or time series graphs (such as organizational charts, propagation networks)\n\n## Basic Usage\n\nOther settings use the default configuration (layout width and height default to the entire canvas container)\n\n```js\nconst graph = new Graph({\n // other configurations\n layout: {\n type: 'circular',\n },\n});\n```\n\n## Options\n\n| Property | Description | Type | Default | Required |\n| ----------- | ----------------------------------------------------------------------------------------------------------------- | --------------------------------------------- | ----------------------------------------- | -------- |\n| type | Layout type | circular | - | ✓ |\n| angleRatio | How many 2\\*PI between the first and last node | number | 1 | |\n| center | Center of the layout | [number, number]\\|[number, number, number] | [`layout width` / 2, `layout height` / 2] | |\n| clockwise | Whether to arrange clockwise | boolean | true | |\n| divisions | Number of segments on the ring (segments will be evenly distributed, effective when endRadius - startRadius != 0) | number | 1 | |\n| nodeSize | Node size (diameter), used for collision detection | Size \\| ((nodeData: Node) => Size) | 10 | |\n| nodeSpacing | Minimum spacing between rings, used to adjust radius | number \\| ((nodeData: Node) => number) | 10 | |\n| ordering | Node ordering on the ring, [see details](#ordering) | `topology` \\| `topology-directed` \\| `degree` | - | |\n| radius | Circle radius, if set, spiral layout configs `startRadius` and `endRadius` are ignored, [see details](#radius) | number | - | |\n| startAngle | Start angle of the layout | number | 0 | |\n| endAngle | End angle of the layout | number | 2 \\* Math.PI | |\n| startRadius | Start radius for spiral layout, [usage](#spiral-layout) | number | - | |\n| endRadius | End radius for spiral layout | number | - | |\n| width | Layout width | number | canvas width | |\n| height | Layout height | number | canvas height | |\n\n### ordering\n\nNode ordering on the ring\n\n- `topology`: topological order\n- `topology-directed`: topological order (directed graph)\n- `degree`: order by degree\n\nIf not set (`null`), the order in the array is used directly\n\n### radius\n\nIf radius, startRadius, and endRadius are not set, the default is `Math.min(layout width, layout height) / 2`, i.e., fills the entire layout area\n\n## Code Examples\n\n### Basic Circular Layout\n\n```javascript\nconst graph = new Graph({\n // other configurations\n layout: {\n type: 'circular',\n },\n});\n```\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nfetch('https://assets.antv.antgroup.com/g6/circular.json')\n .then((res) => res.json())\n .then((data) => {\n const graph = new Graph({\n container: 'container',\n autoFit: 'view',\n data,\n node: {\n style: {\n labelText: (d) => d.id,\n labelFill: '#fff',\n labelPlacement: 'center',\n },\n },\n layout: {\n type: 'circular',\n },\n behaviors: ['drag-canvas', 'drag-element'],\n });\n\n graph.render();\n });\n```\n\n### Spiral Layout\n\n```javascript\nconst graph = new Graph({\n // other configurations\n layout: {\n type: 'circular',\n startRadius: 10,\n endRadius: 300,\n },\n});\n```\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nfetch('https://assets.antv.antgroup.com/g6/circular.json')\n .then((res) => res.json())\n .then((data) => {\n const graph = new Graph({\n container: 'container',\n autoFit: 'center',\n data,\n node: {\n style: {\n labelText: (d) => d.id,\n labelFill: '#fff',\n labelPlacement: 'center',\n },\n },\n layout: {\n type: 'circular',\n startRadius: 10,\n endRadius: 300,\n },\n behaviors: ['drag-canvas', 'drag-element'],\n });\n\n graph.render();\n });\n```\n","packages/site/docs/manual/layout/CircularLayout.zh.md":"---\ntitle: 环形布局 Circular\norder: 3\n---\n\n## 概述\n\n环形布局是一种把节点均匀或者按间隔放置在圆上的布局，也支持通过配置 startRadius 和 endRadius 为不一样的值实现螺旋状布局。参考更多环形布局[样例](/examples#layout-circular)或[源码](https://github.com/antvis/layout/blob/v5/packages/layout/src/circular.ts)。\n\n## 使用场景\n\n**环形布局**:\n\n- 适用于平等关系网络、无层级结构的图\n\n**螺旋状布局**:\n\n- 适用于隐式层级或时间序列图（如组织架构、传播网络）\n\n## 基本用法\n\n其余均使用默认配置（布局宽高默认是整个画布容器）\n\n```js\nconst graph = new Graph({\n // 其他配置\n layout: {\n type: 'circular',\n },\n});\n```\n\n## 配置项\n\n| 属性 | 描述 | 类型 | 默认值 | 必选 |\n| ----------- | ----------------------------------------------------------------------------------- | --------------------------------------------- | -------------------------------- | ---- |\n| type | 布局类型 | circular | - | ✓ |\n| angleRatio | 从第一个节点到最后节点之间相隔多少个 2\\*PI | number | 1 | |\n| center | 布局的中心 | [number, number]\\|[number, number, number] | [`布局宽度` / 2, `布局高度` / 2] | |\n| clockwise | 是否顺时针排列 | boolean | true | |\n| divisions | 节点在环上的分段数（几个段将均匀分布，在 endRadius - startRadius != 0 时生效） | number | 1 | |\n| nodeSize | 节点大小（直径）。用于防止节点重叠时的碰撞检测 | Size \\| ((nodeData: Node) => Size) | 10 | |\n| nodeSpacing | 环与环之间最小间距，用于调整半径 | number \\| ((nodeData: Node) => number) | 10 | |\n| ordering | 节点在环上排序的依据，[说明](#ordering) | `topology` \\| `topology-directed` \\| `degree` | - | |\n| radius | 圆的半径，设置了则螺旋状布局的配置`startRadius`、`endRadius`不生效，[说明](#radius) | number | - | |\n| startAngle | 布局的开始角度 | number | 0 | |\n| endAngle | 布局的结束角度 | number | 2 \\* Math.PI | |\n| startRadius | 螺旋状布局的开始半径，[用法](#螺旋状布局) | number | - | |\n| endRadius | 螺旋状布局的结束半径 | number | - | |\n| width | 布局的宽度 | number | 画布宽度 | |\n| height | 布局的高度 | number | 画布高度 | |\n\n### ordering\n\n节点在环上排序的依据\n\n- `topology`: 按照拓扑排序\n- `topology-directed`: 按照拓扑排序（有向图）\n- `degree`: 按照度数大小排序\n\n不配置（`null`）则直接使用数组中的顺序\n\n### radius\n\n如果radius、startRadius、endRadius都没配置，则默认为最终计算出来的`Math.min(布局宽度, 布局高度) / 2`，即布满整个布局区域\n\n## 代码示例\n\n### 基础环形布局\n\n```javascript\nconst graph = new Graph({\n // 其他配置\n layout: {\n type: 'circular',\n },\n});\n```\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nfetch('https://assets.antv.antgroup.com/g6/circular.json')\n .then((res) => res.json())\n .then((data) => {\n const graph = new Graph({\n container: 'container',\n autoFit: 'view',\n data,\n node: {\n style: {\n labelText: (d) => d.id,\n labelFill: '#fff',\n labelPlacement: 'center',\n },\n },\n layout: {\n type: 'circular',\n },\n behaviors: ['drag-canvas', 'drag-element'],\n });\n\n graph.render();\n });\n```\n\n### 螺旋状布局\n\n```javascript\nconst graph = new Graph({\n // 其他配置\n layout: {\n type: 'circular',\n startRadius: 10,\n endRadius: 300,\n },\n});\n```\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nfetch('https://assets.antv.antgroup.com/g6/circular.json')\n .then((res) => res.json())\n .then((data) => {\n const graph = new Graph({\n container: 'container',\n autoFit: 'center',\n data,\n node: {\n style: {\n labelText: (d) => d.id,\n labelFill: '#fff',\n labelPlacement: 'center',\n },\n },\n layout: {\n type: 'circular',\n startRadius: 10,\n endRadius: 300,\n },\n behaviors: ['drag-canvas', 'drag-element'],\n });\n\n graph.render();\n });\n```\n","packages/site/docs/manual/layout/ComboCombinedLayout.en.md":"---\ntitle: ComboCombined Layout\norder: 4\n---\n\n## Overview\n\nComboCombined composite layout is suitable for graph data with composite group structures. It supports flexible configuration of the layout for elements inside combos as well as the layout between the outermost combos and nodes. By default, the internal elements use the Concentric layout, and the outer layout uses the gForce force-directed layout, balancing layout effect and overall stability. See more ComboCombined layout [examples](/en/examples#layout-combo-layout) and [source code](https://github.com/antvis/layout/blob/v5/packages/layout/src/combo-combined.ts).\n\n## Usage Scenarios\n\n- User profile analysis: Analyze user behavior and product relationships, use user interest circles as combos, display specific products and behavior tags as internal nodes, and help operators identify user consumption paths.\n- Supply chain management graph: Divide suppliers, manufacturers, warehouses, and distributors into combos by role or region, display resources, personnel, or equipment as internal nodes, and clearly show the internal structure of each link in the supply chain.\n\n## Options\n\n| Property | Description | Type | Default | Required |\n| ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ------------ | -------- |\n| type | Layout type | `combo-combined` | - | ✓ |\n| center | Layout center | [`PointTuple`](https://github.com/antvis/layout/blob/v5/packages/layout/src/types.ts#L829) | Graph center | |\n| layout | Layout configuration. Can be fixed, or returned dynamically based on `comboId` | `string` \\| `object` \\| `(comboId?: string) => string \\| object` | - | |\n| nodeSize | Node size (diameter), used for collision detection | `number` \\| `number[]` \\| (d?: [NodeData](/en/manual/data#节点数据nodedata)) => number | - | |\n| nodeSpacing | Spacing between nodes | `number` \\| (d?: [NodeData](/en/manual/data#节点数据nodedata)) => number | - | |\n| comboSpacing | Spacing between combos | `number` \\| (d?: unknown) => number | - | |\n| comboPadding | Padding value inside the combo, used only for force calculation, not for rendering. It is recommended to set the same value as the visual padding. | `((d?: unknown) => number)` \\| `number` \\| `number[]` \\| `undefined` | - | |\n\n### layout\n\n> _`string | object | (comboId?: string) => string | object`_\n\nIn `5.1`, it is recommended to use a single `layout` field to choose layouts for different levels, instead of configuring `innerLayout` and `outerLayout` separately.\n\n**Example**:\n\n```ts\nnew Graph({\n layout: {\n type: 'combo-combined',\n layout: (comboId) => (comboId ? { type: 'grid' } : { type: 'force' }),\n },\n});\n```\n\n## Example Code\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nfetch('https://assets.antv.antgroup.com/g6/combo.json')\n .then((res) => res.json())\n .then((data) => {\n const graph = new Graph({\n container: 'container',\n data,\n layout: {\n type: 'combo-combined',\n comboPadding: 2,\n },\n node: {\n style: {\n size: 20,\n labelText: (d) => d.id,\n },\n palette: {\n type: 'group',\n field: (d) => d.combo,\n },\n },\n edge: {\n style: (model) => {\n const { size, color } = model.data;\n return {\n stroke: color || '#99ADD1',\n lineWidth: size || 1,\n };\n },\n },\n behaviors: ['drag-element', 'drag-canvas', 'zoom-canvas'],\n autoFit: 'view',\n });\n\n graph.render();\n });\n```\n","packages/site/docs/manual/layout/ComboCombinedLayout.zh.md":"---\ntitle: 复合布局 ComboCombined\norder: 4\n---\n\n## 概述\n\nComboCombined 复合布局适用于复合分组结构的图数据展示场景，支持灵活配置 Combo 内部元素的布局以及最外层 Combo 和节点之间的布局。 默认情况内部元素采用 Concentric 同心圆布局，外部布局采用 gForce 力导向布局，兼顾布局效果与整体稳定性。参考更多 ComboCombined 复合布局[样例](/examples#layout-combo-layout)和[源码](https://github.com/antvis/layout/blob/v5/packages/layout/src/combo-combined.ts)\n\n## 使用场景\n\n- 用户画像分析: 分析用户行为与商品关系，将用户兴趣圈层作为 Combo，内部节点展示具体商品和行为标签，帮助运营人员识别用户消费路径。\n- 供应链管理图：供应商、制造商、仓储、分销商按角色或区域划分 Combo，内部节点展示资源、人员或设备，清晰展示供应链各环节内部结构。\n\n## 配置项\n\n| 属性 | 描述 | 类型 | 默认值 | 必选 |\n| ------------ | --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ------ | ---- |\n| type | 布局类型 | `combo-combined` | - | ✓ |\n| center | 布局中心 | [`PointTuple`](https://github.com/antvis/layout/blob/v5/packages/layout/src/types.ts#L829) | 图中心 | |\n| layout | 布局配置。可固定指定，也可根据 `comboId` 动态返回 | `string` \\| `object` \\| `(comboId?: string) => string \\| object` | - | |\n| nodeSize | 节点大小（直径）。用于碰撞检测 | `number` \\| `number[]` \\| (d?: [NodeData](/manual/data#节点数据nodedata)) => number | - | |\n| nodeSpacing | 节点间距 | `number` \\| (d?: [NodeData](/manual/data#节点数据nodedata)) => number | - | |\n| comboSpacing | Combo 之间的间距 | `number` \\| (d?: unknown) => number | - | |\n| comboPadding | Combo 内部的 padding 值，不用于渲染，仅用于计算力。推荐设置为与视图上 Combo 内部 padding 值相同的值 | `((d?: unknown) => number)` \\| `number` \\| `number[]` \\| `undefined` | - | |\n\n### layout\n\n> _`string | object | (comboId?: string) => string | object`_\n\n5.1 中推荐使用单个 `layout` 字段为不同层级选择布局，而不是分别配置 `innerLayout` 和 `outerLayout`。\n\n**示例**:\n\n```ts\nnew Graph({\n layout: {\n type: 'combo-combined',\n layout: (comboId) => (comboId ? { type: 'grid' } : { type: 'force' }),\n },\n});\n```\n\n## 示例代码\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nfetch('https://assets.antv.antgroup.com/g6/combo.json')\n .then((res) => res.json())\n .then((data) => {\n const graph = new Graph({\n container: 'container',\n data,\n layout: {\n type: 'combo-combined',\n comboPadding: 2,\n },\n node: {\n style: {\n size: 20,\n labelText: (d) => d.id,\n },\n palette: {\n type: 'group',\n field: (d) => d.combo,\n },\n },\n edge: {\n style: (model) => {\n const { size, color } = model.data;\n return {\n stroke: color || '#99ADD1',\n lineWidth: size || 1,\n };\n },\n },\n behaviors: ['drag-element', 'drag-canvas', 'zoom-canvas'],\n autoFit: 'view',\n });\n\n graph.render();\n });\n```\n","packages/site/docs/manual/layout/CompactBoxLayout.en.md":"---\ntitle: CompactBox Layout\norder: 5\n---\n\n## Overview\n\nThe CompactBox layout is suitable for visualizing structured tree data. It is evolved from the classic [Reingold–Tilford tidy layout algorithm](http://emr.cs.iit.edu/~reingold/tidier-drawings.pdf), and considers the bounding box of each tree node during layout, effectively maintaining the compactness and hierarchical clarity of the tree structure. See more CompactBox layout [examples](/en/examples#layout-compact-box) and [source code](https://github.com/antvis/hierarchy/blob/master/src/compact-box.js).\n\n
数值越高则该节点被放置得越中心。若为 degree，则会计算节点的度数，度数越高，节点将被放置得越中心 | string | `degree` | |\n| maxLevelDiff | 同一层节点的最大属性差值
若为 undefined，则将会被设置为 maxValue / 4 ，其中 maxValue 为最大的排序依据的属性值。例如，若 sortBy 为 'degree'，则 maxValue 为所有节点中度数最大的节点的度数 | number | undefined | |\n| nodeSize | 节点大小（直径）。用于防止节点重叠时的碰撞检测 | number \\| number[] \\| ((nodeData: Node) => number) | 30 | |\n| nodeSpacing | 环与环之间最小间距，用于调整半径 | number \\| number[] \\| ((node?: Node) => number) | 10 | |\n| preventOverlap | 是否防止重叠
必须配合 nodeSize 属性或节点数据中的 data.size 属性，只有在数据中设置了 data.size 或在该布局中配置了与当前图节点大小相同的 nodeSize 值，才能够进行节点重叠的碰撞检测 | boolean | false | |\n| startAngle | 开始布局节点的弧度 | number | 3 / 2 \\* Math.PI | |\n| sweep | 同一层中第一个节点与最后一个节点之间的弧度差
若为 undefined ，则将会被设置为 2 \\* Math.PI \\* (1 - 1 / \\|level.nodes\\|) ，其中 level.nodes 为该算法计算出的每一层的节点，\\|level.nodes\\| 代表该层节点数量 | number | undefined | |\n\n## 代码示例\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 500,\n height: 250,\n autoFit: 'view',\n data: {\n nodes: [\n { id: 'center', data: { label: '中心', level: 0 } },\n { id: 'level1-0', data: { label: 'L1-0', level: 1 } },\n { id: 'level1-1', data: { label: 'L1-1', level: 1 } },\n { id: 'level1-2', data: { label: 'L1-2', level: 1 } },\n { id: 'level1-3', data: { label: 'L1-3', level: 1 } },\n { id: 'level1-4', data: { label: 'L1-4', level: 1 } },\n { id: 'level1-5', data: { label: 'L1-5', level: 1 } },\n { id: 'level2-0', data: { label: 'L2-0', level: 2 } },\n { id: 'level2-1', data: { label: 'L2-1', level: 2 } },\n { id: 'level2-2', data: { label: 'L2-2', level: 2 } },\n { id: 'level2-3', data: { label: 'L2-3', level: 2 } },\n { id: 'level2-4', data: { label: 'L2-4', level: 2 } },\n { id: 'level2-5', data: { label: 'L2-5', level: 2 } },\n { id: 'level2-6', data: { label: 'L2-6', level: 2 } },\n { id: 'level2-7', data: { label: 'L2-7', level: 2 } },\n { id: 'level2-8', data: { label: 'L2-8', level: 2 } },\n { id: 'level2-9', data: { label: 'L2-9', level: 2 } },\n { id: 'level2-10', data: { label: 'L2-10', level: 2 } },\n { id: 'level2-11', data: { label: 'L2-11', level: 2 } },\n ],\n edges: [\n { id: 'e-center-level1-0', source: 'center', target: 'level1-0' },\n { id: 'e-center-level1-1', source: 'center', target: 'level1-1' },\n { id: 'e-center-level1-2', source: 'center', target: 'level1-2' },\n { id: 'e-center-level1-3', source: 'center', target: 'level1-3' },\n { id: 'e-center-level1-4', source: 'center', target: 'level1-4' },\n { id: 'e-center-level1-5', source: 'center', target: 'level1-5' },\n\n { id: 'e-level1-0-level2-0', source: 'level1-0', target: 'level2-0' },\n { id: 'e-level1-0-level2-1', source: 'level1-0', target: 'level2-1' },\n { id: 'e-level1-1-level2-2', source: 'level1-1', target: 'level2-2' },\n { id: 'e-level1-1-level2-3', source: 'level1-1', target: 'level2-3' },\n { id: 'e-level1-2-level2-4', source: 'level1-2', target: 'level2-4' },\n { id: 'e-level1-2-level2-5', source: 'level1-2', target: 'level2-5' },\n { id: 'e-level1-3-level2-6', source: 'level1-3', target: 'level2-6' },\n { id: 'e-level1-3-level2-7', source: 'level1-3', target: 'level2-7' },\n { id: 'e-level1-4-level2-8', source: 'level1-4', target: 'level2-8' },\n { id: 'e-level1-4-level2-9', source: 'level1-4', target: 'level2-9' },\n { id: 'e-level1-5-level2-10', source: 'level1-5', target: 'level2-10' },\n { id: 'e-level1-5-level2-11', source: 'level1-5', target: 'level2-11' },\n ],\n },\n layout: {\n type: 'concentric',\n nodeSize: 32,\n sortBy: 'degree',\n preventOverlap: true,\n },\n behaviors: ['zoom-canvas', 'drag-canvas', 'drag-element'],\n animation: false,\n});\n\ngraph.render();\n```\n\n展开查看完整代码
\n\n```javascript\nimport { Graph } from '@antv/g6';\nconst graph = new Graph({\n container: 'container',\n autoFit: 'view',\n data: {\n nodes: [\n { id: 'center', data: { label: '中心', level: 0 } },\n\n { id: 'level1-0', data: { label: 'L1-0', level: 1 } },\n { id: 'level1-1', data: { label: 'L1-1', level: 1 } },\n { id: 'level1-2', data: { label: 'L1-2', level: 1 } },\n { id: 'level1-3', data: { label: 'L1-3', level: 1 } },\n { id: 'level1-4', data: { label: 'L1-4', level: 1 } },\n { id: 'level1-5', data: { label: 'L1-5', level: 1 } },\n\n { id: 'level2-0', data: { label: 'L2-0', level: 2 } },\n { id: 'level2-1', data: { label: 'L2-1', level: 2 } },\n { id: 'level2-2', data: { label: 'L2-2', level: 2 } },\n { id: 'level2-3', data: { label: 'L2-3', level: 2 } },\n { id: 'level2-4', data: { label: 'L2-4', level: 2 } },\n { id: 'level2-5', data: { label: 'L2-5', level: 2 } },\n { id: 'level2-6', data: { label: 'L2-6', level: 2 } },\n { id: 'level2-7', data: { label: 'L2-7', level: 2 } },\n { id: 'level2-8', data: { label: 'L2-8', level: 2 } },\n { id: 'level2-9', data: { label: 'L2-9', level: 2 } },\n { id: 'level2-10', data: { label: 'L2-10', level: 2 } },\n { id: 'level2-11', data: { label: 'L2-11', level: 2 } },\n ],\n edges: [\n { id: 'e-center-level1-0', source: 'center', target: 'level1-0' },\n { id: 'e-center-level1-1', source: 'center', target: 'level1-1' },\n { id: 'e-center-level1-2', source: 'center', target: 'level1-2' },\n { id: 'e-center-level1-3', source: 'center', target: 'level1-3' },\n { id: 'e-center-level1-4', source: 'center', target: 'level1-4' },\n { id: 'e-center-level1-5', source: 'center', target: 'level1-5' },\n\n { id: 'e-level1-0-level2-0', source: 'level1-0', target: 'level2-0' },\n { id: 'e-level1-0-level2-1', source: 'level1-0', target: 'level2-1' },\n { id: 'e-level1-1-level2-2', source: 'level1-1', target: 'level2-2' },\n { id: 'e-level1-1-level2-3', source: 'level1-1', target: 'level2-3' },\n { id: 'e-level1-2-level2-4', source: 'level1-2', target: 'level2-4' },\n { id: 'e-level1-2-level2-5', source: 'level1-2', target: 'level2-5' },\n { id: 'e-level1-3-level2-6', source: 'level1-3', target: 'level2-6' },\n { id: 'e-level1-3-level2-7', source: 'level1-3', target: 'level2-7' },\n { id: 'e-level1-4-level2-8', source: 'level1-4', target: 'level2-8' },\n { id: 'e-level1-4-level2-9', source: 'level1-4', target: 'level2-9' },\n { id: 'e-level1-5-level2-10', source: 'level1-5', target: 'level2-10' },\n { id: 'e-level1-5-level2-11', source: 'level1-5', target: 'level2-11' },\n ],\n },\n layout: {\n type: 'concentric',\n nodeSize: 32,\n sortBy: 'degree',\n preventOverlap: true,\n },\n behaviors: ['zoom-canvas', 'drag-canvas', 'drag-element'],\n animation: false,\n});\n\ngraph.render();\n```\n\n![\"3D](\"https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*4mbSTJLOXkgAAAAAAAAAAAAADmJ7AQ/original\")
![\"D3Force](\"https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*-_sFS5IRGGcAAAAAAAAAAAAADmJ7AQ/original\")
![\"force\"](\"https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*p5L2S6gtZ2AAAAAAAAAAAAAAemJ7AQ/original\")
Show full code
\n\n```javascript\nimport { Graph } from '@antv/g6';\n\n// Create mock data with nodes from different teams\nconst data = {\n nodes: [\n // Team A\n { id: 'A1', team: 'A', label: 'A1', size: 30 },\n { id: 'A2', team: 'A', label: 'A2', size: 20 },\n { id: 'A3', team: 'A', label: 'A3', size: 20 },\n { id: 'A4', team: 'A', label: 'A4', size: 20 },\n // Team B\n { id: 'B1', team: 'B', label: 'B1', size: 30 },\n { id: 'B2', team: 'B', label: 'B2', size: 20 },\n { id: 'B3', team: 'B', label: 'B3', size: 20 },\n { id: 'B4', team: 'B', label: 'B4', size: 20 },\n // Team C\n { id: 'C1', team: 'C', label: 'C1', size: 30 },\n { id: 'C2', team: 'C', label: 'C2', size: 20 },\n { id: 'C3', team: 'C', label: 'C3', size: 20 },\n { id: 'C4', team: 'C', label: 'C4', size: 20 },\n ],\n edges: [\n // Team A internal connections\n { source: 'A1', target: 'A2' },\n { source: 'A1', target: 'A3' },\n { source: 'A1', target: 'A4' },\n // Team B internal connections\n { source: 'B1', target: 'B2' },\n { source: 'B1', target: 'B3' },\n { source: 'B1', target: 'B4' },\n // Team C internal connections\n { source: 'C1', target: 'C2' },\n { source: 'C1', target: 'C3' },\n { source: 'C1', target: 'C4' },\n // Few connections between teams\n { source: 'A1', target: 'B1' },\n { source: 'B1', target: 'C1' },\n ],\n};\n\nconst graph = new Graph({\n container: 'container',\n data,\n node: {\n style: {\n size: (d) => d.size,\n fill: (d) => {\n // Different colors for different teams\n const colors = {\n A: '#FF6B6B',\n B: '#4ECDC4',\n C: '#45B7D1',\n };\n return colors[d.team];\n },\n labelText: (d) => d.label,\n labelPlacement: 'center',\n labelFill: '#fff',\n },\n },\n edge: {\n style: {\n stroke: '#aaa',\n },\n },\n layout: {\n type: 'd3-force',\n // Configure link force - nodes within the same team are closer\n link: {\n distance: (d) => {\n // Shorter distance within the same team\n if (d.source.team === d.target.team) return 50;\n // Longer distance between teams\n return 200;\n },\n strength: (d) => {\n // Stronger connection within the same team\n if (d.source.team === d.target.team) return 0.7;\n // Weaker connection between teams\n return 0.1;\n },\n },\n // Configure many-body force - control repulsion between nodes\n manyBody: {\n strength: (d) => {\n // Team leader nodes (ending with 1) have stronger repulsion\n if (d.label.endsWith('1')) return -100;\n return -30;\n },\n },\n // Configure collision force - prevent node overlap\n collide: {\n radius: 35,\n strength: 0.8,\n },\n // Configure center force - keep the graph centered\n center: {\n strength: 0.05,\n },\n },\n behaviors: ['drag-element-force'],\n});\n\ngraph.render();\n```\n\n展开查看完整代码
\n\n```javascript\nimport { Graph } from '@antv/g6';\n\n// 创建模拟数据，包含不同团队的节点\nconst data = {\n nodes: [\n // 团队 A\n { id: 'A1', team: 'A', label: 'A1', size: 30 },\n { id: 'A2', team: 'A', label: 'A2', size: 20 },\n { id: 'A3', team: 'A', label: 'A3', size: 20 },\n { id: 'A4', team: 'A', label: 'A4', size: 20 },\n // 团队 B\n { id: 'B1', team: 'B', label: 'B1', size: 30 },\n { id: 'B2', team: 'B', label: 'B2', size: 20 },\n { id: 'B3', team: 'B', label: 'B3', size: 20 },\n { id: 'B4', team: 'B', label: 'B4', size: 20 },\n // 团队 C\n { id: 'C1', team: 'C', label: 'C1', size: 30 },\n { id: 'C2', team: 'C', label: 'C2', size: 20 },\n { id: 'C3', team: 'C', label: 'C3', size: 20 },\n { id: 'C4', team: 'C', label: 'C4', size: 20 },\n ],\n edges: [\n // 团队 A 内部连接\n { source: 'A1', target: 'A2' },\n { source: 'A1', target: 'A3' },\n { source: 'A1', target: 'A4' },\n // 团队 B 内部连接\n { source: 'B1', target: 'B2' },\n { source: 'B1', target: 'B3' },\n { source: 'B1', target: 'B4' },\n // 团队 C 内部连接\n { source: 'C1', target: 'C2' },\n { source: 'C1', target: 'C3' },\n { source: 'C1', target: 'C4' },\n // 团队间的少量连接\n { source: 'A1', target: 'B1' },\n { source: 'B1', target: 'C1' },\n ],\n};\n\nconst graph = new Graph({\n container: 'container',\n data,\n node: {\n style: {\n size: (d) => d.size,\n fill: (d) => {\n // 不同团队使用不同颜色\n const colors = {\n A: '#FF6B6B',\n B: '#4ECDC4',\n C: '#45B7D1',\n };\n return colors[d.team];\n },\n labelText: (d) => d.label,\n labelPlacement: 'center',\n labelFill: '#fff',\n },\n },\n edge: {\n style: {\n stroke: '#aaa',\n },\n },\n layout: {\n type: 'd3-force',\n // 配置链接力 - 团队内部节点更靠近\n link: {\n distance: (d) => {\n // 同一团队内的连接距离更短\n if (d.source.team === d.target.team) return 50;\n // 不同团队间的连接距离更长\n return 200;\n },\n strength: (d) => {\n // 同一团队内的连接强度更大\n if (d.source.team === d.target.team) return 0.7;\n // 不同团队间的连接强度更小\n return 0.1;\n },\n },\n // 配置多体力 - 控制节点间的排斥力\n manyBody: {\n strength: (d) => {\n // 团队领导节点（编号1）的排斥力更强\n if (d.label.endsWith('1')) return -100;\n return -30;\n },\n },\n // 配置碰撞力 - 防止节点重叠\n collide: {\n radius: 35,\n strength: 0.8,\n },\n // 配置中心力 - 保持图形在画布中心\n center: {\n strength: 0.05,\n },\n },\n behaviors: ['drag-element-force'],\n});\n\ngraph.render();\n```\n\n\n\n| Property | Description | Type | Default | Required |\n| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------- | ----------------- | -------- |\n| type | Layout type | `dagre` | - | ✓ |\n| rankdir | Layout direction, options | `TB` \\| `BT` \\| `LR` \\| `RL` | `TB` | |\n| align | Node alignment, options | `UL` \\| `UR` \\| `DL` \\| `DR` | `UL` | |\n| nodesep | Node spacing (px). For `TB` or `BT`, it is the horizontal spacing; for `LR` or `RL`, it is the vertical spacing | number | 50 | |\n| ranksep | Rank spacing (px). For `TB` or `BT`, it is the vertical spacing between adjacent ranks; for `LR` or `RL`, it is the horizontal spacing | number | 100 | |\n| ranker | Algorithm for assigning ranks to nodes: `longest-path`, `tight-tree`, or `network-simplex` | `network-simplex` \\| `tight-tree` \\| `longest-path` | `network-simplex` | |\n| directed | Whether to treat the graph as directed | boolean | true | |\n| compound | Whether to support nested structures | boolean | true | |\n| multigraph | Whether to allow multi-edges | boolean | true | |\n| nodeSize | G6 custom property, specify node size for all or each node. If a single number, width and height are the same; if array: `[width, height]` | number \\| number[] \\| () => (number \\| number[]) | [0, 0] | |\n| edgeMinLen | Minimum number of ranks crossed by an edge | number \\| (edge) => number | 1 | |\n| edgeWeight | Edge weight, used to affect optimization priority | number \\| (edge) => number | | |\n| edgeLabelSize | Edge label size, used to reserve layout space | number[] \\| (edge) => number[] | | |\n| edgeLabelPos | Edge label position | string \\| (edge) => string | | |\n| edgeLabelOffset | Offset between the label and the edge | number \\| (edge) => number | | |\n\n> Note: `dagre` does not require configuring `controlPoints` separately. G6 automatically converts the polyline points returned by the layout into `style.controlPoints` on the edge.\n\n### rankdir\n\n> `TB` | `BT` | `LR` | `RL`, **Default**: `TB`\n\nLayout direction\n\n- `TB`: Top to Bottom;\n\n
\n\n- `BT`: Bottom to Top;\n\n
\n\n- `LR`: Left to Right;\n\n
\n\n- `RL`: Right to Left.\n\n
\n\n### align\n\n> `UL` | `UR` | `DL` | `DR`, **Default**: `UL`\n\nNode alignment\n\n- `UL`: Upper Left\n- `UR`: Upper Right\n- `DL`: Down Left\n- `DR`: Down Right\n\n### nodesep\n\n> number, **Default**: 50\n\nNode spacing (px). For `TB` or `BT`, it's the horizontal spacing; for `LR` or `RL`, it's the vertical spacing\n\n### ranksep\n\n> number, **Default**: 50\n\nRank spacing (px). For `TB` or `BT`, it's the vertical spacing between ranks; for `LR` or `RL`, it's the horizontal spacing between ranks\n\n### ranker\n\n> `network-simplex` | `tight-tree` | `longest-path`, **Default**: `network-simplex`\n\nAlgorithm for assigning ranks to nodes, supports three algorithms:\n\n- `longest-path`: Uses DFS to recursively find the longest path for each node. Simple and fast, but may result in many long edges.\n- `tight-tree`: An optimization algorithm to reduce the number of long edges. It first uses `longest-path` to compute initial ranks, then adjusts slack edges to build a feasible tree.\n- `network-simplex`: Based on [A Technique for Drawing Directed Graphs](https://www.graphviz.org/documentation/TSE93.pdf), iteratively modifies node ranks to minimize slack edges.\n\n### nodeSize\n\n> number \\| number[] \\| () => (number \\| number[])\n\nG6 custom property, specify node size for all or each node. If a single number, width and height are the same; if array: `[width, height]`\n\n```js\n(d) => {\n // d is a node\n if (d.id === 'testId') return 20;\n return [10, 20];\n};\n```\n\n## Applicable Scenarios\n\n- **Flowcharts**: Suitable for displaying flowcharts, automatically handling direction and spacing between nodes.\n- **Dependency Graphs**: Display dependencies between packages or modules.\n- **Task Scheduling Graphs**: Show dependencies and execution order between tasks.\n\n## Related Documentation\n\n> The following documents can help you better understand Dagre layout\n\n- [Graph Layout Algorithms｜Detailed Dagre Layout](https://mp.weixin.qq.com/s/EdyTfFUH7fyMefNSBXI2nA)\n- [In-depth Interpretation of Dagre Layout Algorithm](https://www.yuque.com/antv/g6-blog/xxp5nl)\n","packages/site/docs/manual/layout/DagreLayout.zh.md":"---\ntitle: Dagre 布局\norder: 9\n---\n\n## 概述\n\nDagre 是一种层次化布局，适用于有向无环图（DAG）的布局场景，能够自动处理节点之间的方向和间距，支持水平和垂直布局。参考更多 Dagre 布局[样例](/examples#layout-dagre)或[源码](https://github.com/dagrejs/dagre/blob/master/lib/layout.js)以及[官方文档](https://github.com/dagrejs/dagre/wiki)。\n\n\n\n| 属性 | 描述 | 类型 | 默认值 | 必选 |\n| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- | ----------------- | ---- |\n| type | 布局类型 | `dagre` | - | ✓ |\n| rankdir | 布局方向，可选值 | `TB` \\| `BT` \\| `LR` \\| `RL` | `TB` | |\n| align | 节点对齐方式，可选值 | `UL` \\| `UR` \\| `DL` \\| `DR` | `UL` | |\n| nodesep | 节点间距（px）。在 rankdir 为 `TB` 或 `BT` 时是节点的水平间距；在 rankdir 为 `LR` 或 `RL` 时代表节点的竖直方向间距 | number | 50 | |\n| ranksep | 层间距（px）。在 rankdir 为 `TB` 或 `BT` 时是竖直方向相邻层间距；在 rankdir 为 `LR` 或 `RL` 时代表水平方向相邻层间距 | number | 100 | |\n| ranker | 为每个节点分配等级的算法，共支持三种算法，分别是：`longest-path`、`tight-tree`、`network-simplex` | `network-simplex` \\| `tight-tree` \\| `longest-path` | `network-simplex` | |\n| directed | 是否按有向图处理 | boolean | true | |\n| compound | 是否支持嵌套结构 | boolean | true | |\n| multigraph | 是否允许多重边 | boolean | true | |\n| nodeSize | G6 自定义属性，统一指定或为每个节点指定节点大小。如果仅返回单个 number，则表示节点的宽度和高度相同；如果返回一个数组，则形如：`[width, height]` | number \\| number[] \\| () => (number \\| number[]) | [0, 0] | |\n| edgeMinLen | 边跨越的最小层数 | number \\| (edge) => number | 1 | |\n| edgeWeight | 边权重，用于影响优化优先级 | number \\| (edge) => number | | |\n| edgeLabelSize | 边标签尺寸，用于预留空间 | number[] \\| (edge) => number[] | | |\n| edgeLabelPos | 边标签位置 | string \\| (edge) => string | | |\n| edgeLabelOffset | 标签与边的偏移 | number \\| (edge) => number | | |\n\n> 补充：`dagre` 不需要单独配置 `controlPoints`，G6 会把布局输出的折线点自动转换为边的 `style.controlPoints`。\n\n### rankdir\n\n> `TB` | `BT` | `LR` | `RL`， **Default**: `TB`\n\n布局方向\n\n- `TB`：从上到下；\n\n\n\n- `BT`：从下到上；\n\n\n\n- `LR`：从左到右；\n\n\n\n- `RL`：从右到左。\n\n\n\n### align\n\n> `UL` | `UR` | `DL` | `DR`， **Default**: `UL`\n\n节点对齐方式\n\n- `UL`：左上对齐\n- `UR`：右上对齐\n- `DL`：左下对齐\n- `DR`：右下对齐\n\n### nodesep\n\n> number， **Default**: 50\n\n节点间距（px）。在rankdir 为 `TB` 或 `BT` 时是节点的水平间距；在rankdir 为 `LR` 或 `RL` 时代表节点的竖直方向间距\n\n### ranksep\n\n> number， **Default**: 50\n\n层间距（px）。在rankdir 为 `TB` 或 `BT` 时是竖直方向相邻层间距；在rankdir 为 `LR` 或 `RL` 时代表水平方向相邻层间距\n\n### ranker\n\n> `network-simplex` | `tight-tree` | `longest-path`， **Default**: `network-simplex`\n\n为每个节点分配层级的算法，共支持三种算法，分别是：\n\n- `longest-path`： 最长路径算法，使用DFS深度优先搜索，递归查找每个节点的最长路径。优点是计算简单速度快，但会导致长边过多；\n- `tight-tree`： 紧凑树算法，一种优化算法，目的是减少长边的数量。先用最长路径算法`longest-path`计算出初始层级，然后调整松弛边的长度，从而构建可行树。\n- `network-simplex`： 网络单形法，参考算法[A Technique for Drawing Directed Graphs](https://www.graphviz.org/documentation/TSE93.pdf)，核心思想是迭代修改节点的层级，缩小松弛边。\n\n### nodeSize\n\n> number \\| number[] \\| () => (number \\| number[])\n\nG6自定义属性，统一指定或为每个节点指定节点大小。如果仅返回单个number，则表示节点的宽度和高度相同；如果返回一个数组，则形如：`[width, height]`\n\n```js\n(d) => {\n // d 是一个节点\n if (d.id === 'testId') return 20;\n return [10, 20];\n};\n```\n\n### controlPoints\n\n> boolean， **Default**: false\n\n是否保留边的控制点。\n\n## 布局适用场景\n\n- **流程图**：适合展示流程图，节点之间的方向和间距会自动处理；\n- **依赖关系图**：展示软件包或模块之间的依赖关系；\n- **任务调度图**：展示任务之间的依赖关系和执行顺序。\n\n## 相关文档\n\n> 以下文档可以帮助你更好地理解Dagre 布局\n\n- [图布局算法｜详解 Dagre 布局](https://mp.weixin.qq.com/s/EdyTfFUH7fyMefNSBXI2nA)\n- [深入解读Dagre布局算法](https://www.yuque.com/antv/g6-blog/xxp5nl)\n","packages/site/docs/manual/layout/DendrogramLayout.en.md":"---\ntitle: Dendrogram Layout\norder: 10\n---\n\n## Overview\n\nThe dendrogram layout is suitable for visualizing hierarchical clustering data. Its feature is that all child nodes are laid out on the same level, node size is not considered, and each node is treated as 1px.\n\n
![\"Dendrogram](\"https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*tTShQLD_dGoAAAAAAAAAAAAAemJ7AQ/original\")
Show full code
\n\n```javascript\nimport { Graph } from '@antv/g6';\n\nconst data = {\n nodes: [\n { id: '0' },\n { id: '1' },\n { id: '2' },\n { id: '3' },\n { id: '4' },\n { id: '5' },\n { id: '6' },\n { id: '7' },\n { id: '8' },\n { id: '9' },\n { id: '10' },\n ],\n edges: [\n { source: '0', target: '1' },\n { source: '0', target: '2' },\n { source: '0', target: '3' },\n { source: '0', target: '4' },\n { source: '0', target: '7' },\n { source: '0', target: '8' },\n { source: '0', target: '9' },\n { source: '0', target: '10' },\n { source: '2', target: '3' },\n { source: '4', target: '5' },\n { source: '4', target: '6' },\n { source: '5', target: '6' },\n { source: '9', target: '10' },\n ],\n};\n\nconst graph = new Graph({\n container: 'container',\n data,\n node: {\n style: {\n labelFill: '#fff',\n labelPlacement: 'center',\n labelText: (d) => d.id,\n },\n },\n layout: {\n type: 'fruchterman',\n gravity: 5,\n speed: 5,\n },\n behaviors: ['drag-canvas', 'drag-element'],\n});\n\ngraph.render();\n```\n\nShow full code
\n\n```javascript\nimport { Graph } from '@antv/g6';\n\nconst data = {\n nodes: [\n { id: '0', data: { cluster: 'a' } },\n { id: '1', data: { cluster: 'a' } },\n { id: '2', data: { cluster: 'a' } },\n { id: '3', data: { cluster: 'a' } },\n { id: '4', data: { cluster: 'a' } },\n { id: '5', data: { cluster: 'b' } },\n { id: '6', data: { cluster: 'b' } },\n { id: '7', data: { cluster: 'b' } },\n { id: '8', data: { cluster: 'c' } },\n { id: '9', data: { cluster: 'c' } },\n { id: '10', data: { cluster: 'c' } },\n ],\n edges: [\n { source: '0', target: '1' },\n { source: '0', target: '2' },\n { source: '0', target: '4' },\n { source: '0', target: '6' },\n { source: '2', target: '3' },\n { source: '2', target: '4' },\n { source: '3', target: '4' },\n { source: '5', target: '6' },\n { source: '6', target: '7' },\n { source: '7', target: '8' },\n { source: '8', target: '9' },\n { source: '8', target: '10' },\n ],\n};\n\nconst graph = new Graph({\n container: 'container',\n data,\n node: {\n style: {\n labelFill: '#fff',\n labelPlacement: 'center',\n labelText: (d) => `${d.data.cluster}-${d.id}`,\n },\n palette: {\n type: 'group',\n field: 'cluster',\n },\n },\n edge: {\n style: {\n endArrow: true,\n },\n },\n layout: {\n type: 'fruchterman',\n gravity: 6,\n speed: 5,\n\n // Cluster layout parameters\n clustering: true,\n nodeClusterBy: 'cluster',\n clusterGravity: 3,\n },\n behaviors: ['drag-canvas', 'drag-element'],\n});\n\ngraph.render();\n```\n\n展开查看完整代码
\n\n```javascript\nimport { Graph } from '@antv/g6';\n\nconst data = {\n nodes: [\n { id: '0' },\n { id: '1' },\n { id: '2' },\n { id: '3' },\n { id: '4' },\n { id: '5' },\n { id: '6' },\n { id: '7' },\n { id: '8' },\n { id: '9' },\n { id: '10' },\n ],\n edges: [\n { source: '0', target: '1' },\n { source: '0', target: '2' },\n { source: '0', target: '3' },\n { source: '0', target: '4' },\n { source: '0', target: '7' },\n { source: '0', target: '8' },\n { source: '0', target: '9' },\n { source: '0', target: '10' },\n { source: '2', target: '3' },\n { source: '4', target: '5' },\n { source: '4', target: '6' },\n { source: '5', target: '6' },\n { source: '9', target: '10' },\n ],\n};\n\nconst graph = new Graph({\n container: 'container',\n data,\n node: {\n style: {\n labelFill: '#fff',\n labelPlacement: 'center',\n labelText: (d) => d.id,\n },\n },\n layout: {\n type: 'fruchterman',\n gravity: 5,\n speed: 5,\n },\n behaviors: ['drag-canvas', 'drag-element'],\n});\n\ngraph.render();\n```\n\n展开查看完整代码
\n\n```javascript\nimport { Graph } from '@antv/g6';\n\nconst data = {\n nodes: [\n { id: '0', data: { cluster: 'a' } },\n { id: '1', data: { cluster: 'a' } },\n { id: '2', data: { cluster: 'a' } },\n { id: '3', data: { cluster: 'a' } },\n { id: '4', data: { cluster: 'a' } },\n { id: '5', data: { cluster: 'b' } },\n { id: '6', data: { cluster: 'b' } },\n { id: '7', data: { cluster: 'b' } },\n { id: '8', data: { cluster: 'c' } },\n { id: '9', data: { cluster: 'c' } },\n { id: '10', data: { cluster: 'c' } },\n ],\n edges: [\n { source: '0', target: '1' },\n { source: '0', target: '2' },\n { source: '0', target: '4' },\n { source: '0', target: '6' },\n { source: '2', target: '3' },\n { source: '2', target: '4' },\n { source: '3', target: '4' },\n { source: '5', target: '6' },\n { source: '6', target: '7' },\n { source: '7', target: '8' },\n { source: '8', target: '9' },\n { source: '8', target: '10' },\n ],\n};\n\nconst graph = new Graph({\n container: 'container',\n data,\n node: {\n style: {\n labelFill: '#fff',\n labelPlacement: 'center',\n labelText: (d) => `${d.data.cluster}-${d.id}`,\n },\n palette: {\n type: 'group',\n field: 'cluster',\n },\n },\n edge: {\n style: {\n endArrow: true,\n },\n },\n layout: {\n type: 'fruchterman',\n gravity: 6,\n speed: 5,\n\n // 聚类布局参数\n clustering: true,\n nodeClusterBy: 'cluster',\n clusterGravity: 3,\n },\n behaviors: ['drag-canvas', 'drag-element'],\n});\n\ngraph.render();\n```\n\n
![](\"https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Kc63QoxgLNYAAAAAAAAAAAAADmJ7AQ/original\")
![](\"https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*3PioQ4TAMx8AAAAAAAAAAAAADmJ7AQ/original\")
![](\"https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*o6uzQ5nmXJkAAAAAAAAAAAAADmJ7AQ/original\")
![](\"https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*bC-pRrO7srwAAAAAAAAAAAAADmJ7AQ/original\")
![\"Mindmap](\"https://img.alicdn.com/imgextra/i4/O1CN014J5e691gxm5GSrwD2_!!6000000004209-0-tps-1163-832.jpg\")
\n\n| Property | Description | Type | Default | Required |\n| --------- | ------------------------------------------------------------------------------------------------------- | ----------------------------------- | ------- | -------- |\n| type | Layout type | `mindmap` | - | ✓ |\n| direction | Layout direction, [options](#direction) | `H` \\| `LR` \\| `RL` \\| `TB` \\| `BT` | `LR` | |\n| getHeight | Function to calculate the height of each node | (d?: Node) => number | | ✓ |\n| getWidth | Function to calculate the width of each node | (d?: Node) => number | | ✓ |\n| getVGap | Vertical gap for each node. Note: the actual vertical gap between two nodes is twice the vgap | (d?: Node) => number | | |\n| getHGap | Horizontal gap for each node. Note: the actual horizontal gap between two nodes is twice the hgap | (d?: Node) => number | | |\n| getSide | Set whether the node is placed on the left or right of the root. Only effective when `direction` is `H` | (d?: Node) => string | | |\n\n### direction\n\n> `H` \\| `LR` \\| `RL` \\| `TB` \\| `BT` **Default:** `'LR'`\n\nTree layout direction\n\n- `'H'`: horizontal — The children of the root node are divided into two parts and placed on the left and right sides of the root node. You can pass the `getSide` method to specify the left/right distribution logic for each node. If not provided, the first half will be placed on the right, and the second half on the left by default.\n\n
\n\n- `'RL'`: Children are placed on the left side of the root node.\n\n
\n\n- `BT`: Children are placed on the right side of the root node, then the entire graph is rotated 180° along the X axis.\n\n
\n\n### getWidth\n\n> _(d?: Node) => number_\n\nWidth of each node\n\nExample:\n\n```javascript\n(d) => {\n // d is a node\n if (d.id === 'testId') return 50;\n return 100;\n};\n```\n\n### getHeight\n\n> _(d?: Node) => number_\n\nHeight of each node\n\nExample:\n\n```javascript\n(d) => {\n // d is a node\n if (d.id === 'testId') return 50;\n return 100;\n};\n```\n\n### getHGap\n\n> _(d?: Node) => number_\n\nHorizontal gap for each node\n\nExample:\n\n```javascript\n(d) => {\n // d is a node\n if (d.id === 'testId') return 50;\n return 100;\n};\n```\n\n### getVGap\n\n> _(d?: Node) => number_\n\nVertical gap for each node\n\nExample:\n\n```javascript\n(d) => {\n // d is a node\n if (d.id === 'testId') return 50;\n return 100;\n};\n```\n\n### getSide\n\n> _(d?: Node) => string_\n\nSet whether the node is placed on the left or right of the root. Note: only effective when `direction` is `H`. If not set, the first half of the children will be placed on the right, and the second half on the left by default. See [getSide auto calculation logic](https://github.com/antvis/hierarchy/blob/d786901874f59d96c47e2a5dfe17b373eefd72e3/src/layout/separate-root.js#L11).\n\nExample:\n\n```javascript\n(d) => {\n // d is a node\n if (d.id === 'test-child-id') return 'right';\n return 'left';\n};\n```\n\n### Suitable Scenarios\n\n- Data lineage graph: `direction='H'` is suitable for rendering upstream and downstream lineage of a specified node, with upstream on the left and downstream on the right of the central node.\n- Mind map: Build custom mind map components.\n","packages/site/docs/manual/layout/MindmapLayout.zh.md":"---\ntitle: 脑图树 Mindmap\norder: 18\n---\n\n## 概述\n\n脑图树布局适用于树状结构的层次化布局，支持左右两侧展开，深度相同的节点将会被放置在同一层。需要注意：布局**会**考虑节点的大小。参考更多脑图布局[样例](/examples#layout-mindmap)或[源码](https://github.com/antvis/hierarchy/blob/master/src/mindmap.js)。\n\n\n\n| 属性 | 描述 | 类型 | 默认值 | 必选 |\n| --------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------- | ------ | ---- |\n| type | 布局类型 | `mindmap` | - | ✓ |\n| direction | 布局方向，[可选值](#direction) | `H` \\| `LR` \\| `RL` \\| `TB` \\| `BT` | `LR` | |\n| getHeight | 计算每个节点的高度 | (d?: Node) => number | | ✓ |\n| getWidth | 计算每个节点的宽度 | (d?: Node) => number | | ✓ |\n| getVGap | 每个节点的垂直间隙，注意实际两个节点间的垂直间隙是2倍的vgap | (d?: Node) => number | | |\n| getHGap | 每个节点的水平间隙，注意实际两个节点间的水平间隙是2倍的hgap | (d?: Node) => number | | |\n| getSide | 设置节点排布在根节点的左侧/右侧，如未设置，则算法自动分配左侧/右侧。注意：该参数仅在`H`布局方向上生效 | (d?: Node) => string | | |\n\n### direction\n\n> `H` \\| `LR` \\| `RL` \\| `TB` \\| `BT` **Default:** `'LR'`\n\n树布局的方向\n\n- `'H'`：horizontal（水平）—— 根节点的子节点分成两部分横向放置在根节点左右两侧。可传入`getSide`方法指定每个节点的左右分布逻辑，不传则默认将前半部分放置在右侧，后半部分放置在左侧。\n\n\n\n- `'RL'`：将子节点排布在根节点的左侧；\n\n\n\n- `BT`：将子节点排布在根节点右侧，然后将整个图沿X轴旋转180°；\n\n\n\n### getWidth\n\n> _(d?: Node) => number_\n\n每个节点的宽度\n\n示例：\n\n```javascript\n(d) => {\n // d 是一个节点\n if (d.id === 'testId') return 50;\n return 100;\n};\n```\n\n### getHeight\n\n> _(d?: Node) => number_\n\n每个节点的高度\n\n示例：\n\n```javascript\n(d) => {\n // d 是一个节点\n if (d.id === 'testId') return 50;\n return 100;\n};\n```\n\n### getHGap\n\n> _(d?: Node) => number_\n\n每个节点的水平间隙\n\n示例：\n\n```javascript\n(d) => {\n // d 是一个节点\n if (d.id === 'testId') return 50;\n return 100;\n};\n```\n\n### getVGap\n\n> _(d?: Node) => number_\n\n每个节点的垂直间隙\n\n示例：\n\n```javascript\n(d) => {\n // d 是一个节点\n if (d.id === 'testId') return 50;\n return 100;\n};\n```\n\n### getSide\n\n> _(d?: Node) => string_\n\n设置节点排布在根节点的左侧/右侧。注意：该参数仅在`direction`为`H`时生效。如未设置，会默认将子节点前半部分放置在右侧，后半部分放置在左侧，参考[getSide自动计算逻辑](https://github.com/antvis/hierarchy/blob/d786901874f59d96c47e2a5dfe17b373eefd72e3/src/layout/separate-root.js#L11)。\n\n示例：\n\n```javascript\n(d) => {\n // d 是一个节点\n if (d.id === 'test-child-id') return 'right';\n return 'left';\n};\n```\n\n### 布局适用场景\n\n- 数据血缘图：`direction='H'`很适合渲染血缘图中查看指定节点的上下游血缘的场景，上游分布在中心节点的左侧，下游分布在右侧；\n- 思维导图：构建自定义的思维导图组件。\n","packages/site/docs/manual/layout/RadialLayout.en.md":"---\ntitle: Radial Layout\norder: 19\n---\n\n## Overview\n\nRadial layout is a graph layout algorithm that arranges nodes in concentric circles by layers. It is commonly used to display hierarchical relationships, community structures, and more. This layout supports advanced features such as node overlap prevention and group sorting, making it suitable for visualizing various network structures.\n\n## Use Cases\n\n- Displaying hierarchical structures (e.g., organizational charts, family trees)\n- Community structure analysis\n- Scenarios that need to highlight the central node and its radiating relationships\n- Complex networks requiring node grouping and sorting\n\n## Online Demo\n\n\n\n## Configuration\n\n```js\nconst graph = new Graph({\n layout: {\n type: 'radial',\n nodeSize: 32,\n unitRadius: 100,\n linkDistance: 200,\n },\n // other configurations...\n});\n```\n\n## Options\n\n| Property | Description | Type | Default | Required |\n| -------------------------- | --------------------------------------------------------------- | ------------------------------------------------ | -------- | -------- |\n| type | Layout type | string | `radial` | ✓ |\n| center | Center coordinates | [number, number] | - | |\n| focusNode | Radiating center node | string \\| Node \\| null | null | |\n| height | Canvas height | number | - | |\n| width | Canvas width | number | - | |\n| nodeSize | Node size (diameter) | number \\| number[] \\| ((nodeData: Node) => Size) | - | |\n| nodeSpacing | Minimum node spacing (effective when preventing overlap) | number \\| (nodeData: Node) => number | 10 | |\n| linkDistance | Edge length | number | 50 | |\n| unitRadius | Radius per circle; when null, automatically computed from space | number \\| null | 100 | |\n| maxIteration | Maximum number of iterations | number | 1000 | |\n| maxPreventOverlapIteration | Max iterations for overlap prevention | number | 200 | |\n| preventOverlap | Whether to prevent node overlap | boolean | false | |\n| sortBy | Field or sorting function for nodes in the same layer | string \\| ((nodeData: Node) => number \\| string) | - | |\n| sortStrength | Sorting strength for nodes in the same layer | number | 10 | |\n| strictRadial | Strictly place nodes in the same layer on the same ring | boolean | true | |\n\n## Code Example\n\n### Basic Usage\n\n```js\nimport { Graph } from '@antv/g6';\n\nfetch('https://assets.antv.antgroup.com/g6/radial.json')\n .then((res) => res.json())\n .then((data) => {\n const graph = new Graph({\n container: 'container',\n data,\n autoFit: 'center',\n layout: {\n type: 'radial',\n nodeSize: 32,\n unitRadius: 100,\n linkDistance: 200,\n },\n node: {\n style: {\n labelFill: '#fff',\n labelPlacement: 'center',\n labelText: (d) => d.id,\n },\n },\n behaviors: ['drag-canvas', 'drag-element'],\n });\n graph.render();\n });\n```\n\nResult:\n\n![\"Basic](\"https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*d3P-RK4YCDYAAAAAAAAAAAAADmJ7AQ/original\")
![\"Lower](\"https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*_0iOSZnijrMAAAAAAAAAAAAAemJ7AQ/original\")
![\"Higher](\"https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*WNHMT4L4AfkAAAAAAAAAAAAAemJ7AQ/original\")
![\"Lower](\"https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*wlHVSb2515gAAAAAAAAAAAAAemJ7AQ/original\")
![\"Higher](\"https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*4DAMQLvtrk4AAAAAAAAAAAAAemJ7AQ/original\")
- `pointermove`: The lens always follows the mouse movement
- `click`: Move the lens to the click position when clicking on the canvas
- `drag`: Move the lens by dragging | `pointermove` \\| `click` \\| `drag` | `pointermove` | |\n| r | Radius of the lens | number | 60 | |\n| maxR | Maximum radius of the lens | number | Half of the smaller dimension of the canvas | |\n| minR | Minimum radius of the lens | number | 0 | |\n| scaleRBy | Method to scale the lens radius: `wheel`: Scale the lens radius by the wheel | `wheel` | - | |\n| nodeType | Edge display condition:
- `both`: The edge is displayed only when both the source and target nodes are in the lens
- `source`: The edge is displayed only when the source node is in the lens
- `target`: The edge is displayed only when the target node is in the lens
- `either`: The edge is displayed as long as either the source or target node is in the lens | `both` \\| `source` \\| `target` \\| `either` | `both` | |\n| filter | Filter out elements that are never displayed in the lens | (id: string, elementType: `node` \\| `edge` \\| `combo`) => boolean | () => true | |\n| style | Style of the lens, [configuration options](#style) | object | | |\n| nodeStyle | Style of nodes in the lens | [NodeStyle](/en/manual/element/node/base-node#style) \\| ((datum: [NodeData](/en/manual/data#节点数据nodedata)) => [NodeStyle](/en/manual/element/node/base-node#style)) | `{ label: false }` | |\n| edgeStyle | Style of edges in the lens | [EdgeStyle](/en/manual/element/edge/base-edge#style) \\| ((datum: [EdgeData](/en/manual/data#边数据edgedata)) => [EdgeStyle](/en/manual/element/edge/base-edge#style)) | `{ label: true }` | |\n| preventDefault | Whether to prevent default events | boolean | true | |\n\n### style\n\nStyle properties of the circular lens.\n\n| Property | Description | Type | Default Value |\n| ------------- | ------------------ | ----------------------------- | ------------- |\n| fill | Fill color | string \\| Pattern \\| null | `#fff` |\n| stroke | Stroke color | string \\| Pattern \\| null | `#000` |\n| opacity | Overall opacity | number \\| string | 1 |\n| fillOpacity | Fill opacity | number \\| string | 0.8 |\n| strokeOpacity | Stroke opacity | number \\| string | - |\n| lineWidth | Line width | number \\| string | 2 |\n| lineCap | Line cap style | `butt` \\| `round` \\| `square` | - |\n| lineJoin | Line join style | `miter` \\| `round` \\| `bevel` | - |\n| shadowColor | Shadow color | string | - |\n| shadowBlur | Shadow blur degree | number | - |\n| shadowOffsetX | Shadow X offset | number | - |\n| shadowOffsetY | Shadow Y offset | number | - |\n\nFor complete style properties, refer to [Element - Node - Built-in Node - General Style Properties - style](/en/manual/element/node/base-node#style)\n\n## Code Examples\n\n### Basic Usage\n\nThe simplest configuration method:\n\n```js\nconst graph = new Graph({\n plugins: ['edge-filter-lens'],\n});\n```\n\nThe effect is as follows:\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 400,\n height: 300,\n data: {\n nodes: [\n // Upper evacuation area\n { id: 'node1', style: { x: 150, y: 60, label: 'Node 1' } },\n { id: 'node2', style: { x: 100, y: 40, label: 'Node 2' } },\n { id: 'node3', style: { x: 200, y: 35, label: 'Node 3' } },\n { id: 'node4', style: { x: 150, y: 30, label: 'Node 4' } },\n\n // Middle area\n { id: 'node5', style: { x: 220, y: 140, label: 'Node 5' } },\n { id: 'node6', style: { x: 280, y: 160, label: 'Node 6' } },\n { id: 'node7', style: { x: 220, y: 120, label: 'Node 7' } },\n { id: 'node8', style: { x: 260, y: 100, label: 'Node 8' } },\n { id: 'node9', style: { x: 240, y: 130, label: 'Node 9' } },\n { id: 'node10', style: { x: 300, y: 110, label: 'Node 10' } },\n\n // Lower area\n { id: 'node11', style: { x: 240, y: 200, label: 'Node 11' } },\n { id: 'node12', style: { x: 280, y: 220, label: 'Node 12' } },\n { id: 'node13', style: { x: 300, y: 190, label: 'Node 13' } },\n { id: 'node14', style: { x: 320, y: 210, label: 'Node 14' } },\n ],\n edges: [\n // Upper connections\n { id: 'edge1', source: 'node1', target: 'node2' },\n { id: 'edge2', source: 'node2', target: 'node3' },\n { id: 'edge3', source: 'node3', target: 'node4' },\n\n // Middle connections\n { id: 'edge4', source: 'node5', target: 'node6' },\n { id: 'edge5', source: 'node6', target: 'node7' },\n { id: 'edge6', source: 'node7', target: 'node8' },\n { id: 'edge7', source: 'node8', target: 'node9' },\n { id: 'edge8', source: 'node9', target: 'node10' },\n\n // Lower connections\n { id: 'edge9', source: 'node11', target: 'node12' },\n { id: 'edge10', source: 'node12', target: 'node13' },\n { id: 'edge11', source: 'node13', target: 'node14' },\n\n // Cross-region connections\n { id: 'edge12', source: 'node4', target: 'node8' },\n { id: 'edge13', source: 'node7', target: 'node11' },\n { id: 'edge14', source: 'node10', target: 'node13' },\n ],\n },\n node: {\n style: {\n size: 20,\n },\n },\n plugins: ['edge-filter-lens'],\n});\n\ngraph.render();\n```\n\n### Custom Styles\n\nYou can customize the appearance and behavior of the lens:\n\n```js\nconst graph = new Graph({\n plugins: [\n {\n type: 'edge-filter-lens',\n r: 80,\n style: {\n fill: '#f0f5ff', // Fill color of the lens area\n fillOpacity: 0.6, // Opacity of the fill area\n stroke: '#7e3feb', // Change lens border to purple\n strokeOpacity: 0.8, // Opacity of the border\n lineWidth: 1.5, // Line width of the border\n },\n nodeStyle: {\n size: 24, // Enlarge nodes\n fill: '#7e3feb', // Purple fill\n stroke: '#5719c9', // Dark purple stroke\n lineWidth: 1, // Thin border\n label: true, // Show label\n labelFill: '#ffffff', // White text\n labelFontSize: 14, // Enlarge text\n labelFontWeight: 'bold', // Bold text\n },\n edgeStyle: {\n stroke: '#8b9baf', // Gray edge\n lineWidth: 2, // Thicken edge line\n label: true, // Show label\n labelFill: '#5719c9', // Dark purple text\n opacity: 0.8, // Appropriate opacity\n },\n },\n ],\n});\n```\n\nThe effect is as follows:\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 400,\n height: 300,\n data: {\n nodes: [\n // Upper evacuation area\n { id: 'node1', style: { x: 150, y: 60, label: 'Node 1' } },\n { id: 'node2', style: { x: 100, y: 40, label: 'Node 2' } },\n { id: 'node3', style: { x: 200, y: 35, label: 'Node 3' } },\n { id: 'node4', style: { x: 150, y: 30, label: 'Node 4' } },\n\n // Middle area\n { id: 'node5', style: { x: 220, y: 140, label: 'Node 5' } },\n { id: 'node6', style: { x: 280, y: 160, label: 'Node 6' } },\n { id: 'node7', style: { x: 220, y: 120, label: 'Node 7' } },\n { id: 'node8', style: { x: 260, y: 100, label: 'Node 8' } },\n { id: 'node9', style: { x: 240, y: 130, label: 'Node 9' } },\n { id: 'node10', style: { x: 300, y: 110, label: 'Node 10' } },\n\n // Lower area\n { id: 'node11', style: { x: 240, y: 200, label: 'Node 11' } },\n { id: 'node12', style: { x: 280, y: 220, label: 'Node 12' } },\n { id: 'node13', style: { x: 300, y: 190, label: 'Node 13' } },\n { id: 'node14', style: { x: 320, y: 210, label: 'Node 14' } },\n ],\n edges: [\n // Upper connections\n { id: 'edge1', source: 'node1', target: 'node2' },\n { id: 'edge2', source: 'node2', target: 'node3' },\n { id: 'edge3', source: 'node3', target: 'node4' },\n\n // Middle connections\n { id: 'edge4', source: 'node5', target: 'node6' },\n { id: 'edge5', source: 'node6', target: 'node7' },\n { id: 'edge6', source: 'node7', target: 'node8' },\n { id: 'edge7', source: 'node8', target: 'node9' },\n { id: 'edge8', source: 'node9', target: 'node10' },\n\n // Lower connections\n { id: 'edge9', source: 'node11', target: 'node12' },\n { id: 'edge10', source: 'node12', target: 'node13' },\n { id: 'edge11', source: 'node13', target: 'node14' },\n\n // Cross-region connections\n { id: 'edge12', source: 'node4', target: 'node8' },\n { id: 'edge13', source: 'node7', target: 'node11' },\n { id: 'edge14', source: 'node10', target: 'node13' },\n ],\n },\n node: {\n style: {\n size: 20,\n },\n },\n edge: {\n style: {\n stroke: '#91d5ff',\n lineWidth: 1,\n },\n },\n plugins: [\n {\n type: 'edge-filter-lens',\n r: 80,\n style: {\n fill: '#f0f5ff', // Fill color of the lens area\n fillOpacity: 0.6, // Opacity of the fill area\n stroke: '#7e3feb', // Change lens border to purple\n strokeOpacity: 0.8, // Opacity of the border\n lineWidth: 1.5, // Line width of the border\n },\n nodeStyle: {\n size: 24, // Enlarge nodes\n fill: '#7e3feb', // Purple fill\n stroke: '#5719c9', // Dark purple stroke\n lineWidth: 1, // Thin border\n label: true, // Show label\n labelFill: '#ffffff', // White text\n labelFontSize: 14, // Enlarge text\n labelFontWeight: 'bold', // Bold text\n },\n edgeStyle: {\n stroke: '#8b9baf', // Gray edge\n lineWidth: 2, // Thicken edge line\n label: true, // Show label\n labelFill: '#5719c9', // Dark purple text\n opacity: 0.8, // Appropriate opacity\n },\n },\n ],\n});\n\ngraph.render();\n```\n\n## Practical Examples\n\n- [Edge Filter Lens](/en/examples/plugin/edge-filter-lens/#basic)\n","packages/site/docs/manual/plugin/EdgeFilterLens.zh.md":"---\ntitle: 边过滤镜 EdgeFilterLens\norder: 5\n---\n\n## 概述\n\n边过滤镜插件可以将关注的边保留在过滤镜范围内，其他边将在该范围内不显示。这是一个重要的可视化探索工具，可以帮助用户聚焦于特定区域的边关系。\n\n## 使用场景\n\n- 需要聚焦查看局部区域的边关系\n- 在复杂网络中突出显示特定节点之间的连接\n\n## 基本用法\n\n以下是一个简单的 EdgeFilterLens 插件初始化示例：\n\n```js\nconst graph = new Graph({\n plugins: [\n {\n type: 'edge-filter-lens',\n trigger: 'pointermove', // 跟随鼠标移动\n r: 60, // 设置透镜半径\n nodeType: 'both', // 边的显示条件\n },\n ],\n});\n```\n\n## 在线体验\n\n\n\n## 配置项\n\n| 属性 | 描述 | 类型 | 默认值 | 必选 |\n| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | ---- |\n| type | 插件类型 | string | `edge-filter-lens` | ✓ |\n| key | 插件的唯一标识，可用于获取插件实例或更新插件选项 | string | - | |\n| trigger | 移动透镜的方式：
- `pointermove`：透镜始终跟随鼠标移动
- `click`：点击画布时移动透镜到点击位置
- `drag`：通过拖拽方式移动透镜 | `pointermove` \\| `click` \\| `drag` | `pointermove` | |\n| r | 透镜的半径 | number | 60 | |\n| maxR | 透镜的最大半径 | number | 画布宽高最小值的一半 | |\n| minR | 透镜的最小半径 | number | 0 | |\n| scaleRBy | 缩放透镜半径的方式：`wheel`：通过滚轮缩放透镜的半径 | `wheel` | - | |\n| nodeType | 边显示的条件：
- `both`：只有起始节点和目标节点都在透镜中时，边才会显示
- `source`：只有起始节点在透镜中时，边才会显示
- `target`：只有目标节点在透镜中时，边才会显示
- `either`：只要起始节点或目标节点有一个在透镜中时，边就会显示 | `both` \\| `source` \\| `target` \\| `either` | `both` | |\n| filter | 过滤出始终不在透镜中显示的元素 | (id: string, elementType: `node` \\| `edge` \\| `combo`) => boolean | () => true | |\n| style | 透镜的样式，[配置项](#style) | object | | |\n| nodeStyle | 在透镜中节点的样式 | [NodeStyle](/manual/element/node/base-node#style) \\| ((datum: [NodeData](/manual/data#节点数据nodedata)) => [NodeStyle](/manual/element/node/base-node#style)) | `{ label: false }` | |\n| edgeStyle | 在透镜中边的样式 | [EdgeStyle](/manual/element/edge/base-edge#style) \\| ((datum: [EdgeData](/manual/data#边数据edgedata)) => [EdgeStyle](/manual/element/edge/base-edge#style)) | `{ label: true }` | |\n| preventDefault | 是否阻止默认事件 | boolean | true | |\n\n### style\n\n圆形透镜的样式属性。\n\n| 属性 | 描述 | 类型 | 默认值 |\n| ------------- | --------------- | ----------------------------- | ------ |\n| fill | 填充颜色 | string \\| Pattern \\| null | `#fff` |\n| stroke | 描边颜色 | string \\| Pattern \\| null | `#000` |\n| opacity | 整体透明度 | number \\| string | 1 |\n| fillOpacity | 填充透明度 | number \\| string | 0.8 |\n| strokeOpacity | 描边透明度 | number \\| string | - |\n| lineWidth | 线宽度 | number \\| string | 2 |\n| lineCap | 线段端点样式 | `butt` \\| `round` \\| `square` | - |\n| lineJoin | 线段连接处样式 | `miter` \\| `round` \\| `bevel` | - |\n| shadowColor | 阴影颜色 | string | - |\n| shadowBlur | 阴影模糊程度 | number | - |\n| shadowOffsetX | 阴影 X 方向偏移 | number | - |\n| shadowOffsetY | 阴影 Y 方向偏移 | number | - |\n\n完整样式属性参考 [元素 -节点 - 内置节点 - 通用样式属性 - style](/manual/element/node/base-node#style)\n\n## 代码示例\n\n### 基础用法\n\n最简单的配置方式：\n\n```js\nconst graph = new Graph({\n plugins: ['edge-filter-lens'],\n});\n```\n\n效果如下：\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 400,\n height: 300,\n data: {\n nodes: [\n // 上部疏散区域\n { id: 'node1', style: { x: 150, y: 60, label: 'Node 1' } },\n { id: 'node2', style: { x: 100, y: 40, label: 'Node 2' } },\n { id: 'node3', style: { x: 200, y: 35, label: 'Node 3' } },\n { id: 'node4', style: { x: 150, y: 30, label: 'Node 4' } },\n\n // 中部区域\n { id: 'node5', style: { x: 220, y: 140, label: 'Node 5' } },\n { id: 'node6', style: { x: 280, y: 160, label: 'Node 6' } },\n { id: 'node7', style: { x: 220, y: 120, label: 'Node 7' } },\n { id: 'node8', style: { x: 260, y: 100, label: 'Node 8' } },\n { id: 'node9', style: { x: 240, y: 130, label: 'Node 9' } },\n { id: 'node10', style: { x: 300, y: 110, label: 'Node 10' } },\n\n // 下部区域\n { id: 'node11', style: { x: 240, y: 200, label: 'Node 11' } },\n { id: 'node12', style: { x: 280, y: 220, label: 'Node 12' } },\n { id: 'node13', style: { x: 300, y: 190, label: 'Node 13' } },\n { id: 'node14', style: { x: 320, y: 210, label: 'Node 14' } },\n ],\n edges: [\n // 上部连接\n { id: 'edge1', source: 'node1', target: 'node2' },\n { id: 'edge2', source: 'node2', target: 'node3' },\n { id: 'edge3', source: 'node3', target: 'node4' },\n\n // 中部连接\n { id: 'edge4', source: 'node5', target: 'node6' },\n { id: 'edge5', source: 'node6', target: 'node7' },\n { id: 'edge6', source: 'node7', target: 'node8' },\n { id: 'edge7', source: 'node8', target: 'node9' },\n { id: 'edge8', source: 'node9', target: 'node10' },\n\n // 下部连接\n { id: 'edge9', source: 'node11', target: 'node12' },\n { id: 'edge10', source: 'node12', target: 'node13' },\n { id: 'edge11', source: 'node13', target: 'node14' },\n\n // 跨区域连接\n { id: 'edge12', source: 'node4', target: 'node8' },\n { id: 'edge13', source: 'node7', target: 'node11' },\n { id: 'edge14', source: 'node10', target: 'node13' },\n ],\n },\n node: {\n style: {\n size: 20,\n },\n },\n plugins: ['edge-filter-lens'],\n});\n\ngraph.render();\n```\n\n### 自定义样式\n\n可以自定义透镜的外观和行为：\n\n```js\nconst graph = new Graph({\n plugins: [\n {\n type: 'edge-filter-lens',\n r: 80,\n style: {\n fill: '#f0f5ff', // 透镜区域的填充颜色\n fillOpacity: 0.6, // 填充区域的透明度\n stroke: '#7e3feb', // 透镜边框改为紫色\n strokeOpacity: 0.8, // 边框的透明度\n lineWidth: 1.5, // 边框的线宽\n },\n nodeStyle: {\n size: 24, // 放大节点\n fill: '#7e3feb', // 紫色填充\n stroke: '#5719c9', // 深紫色描边\n lineWidth: 1, // 细边框\n label: true, // 显示标签\n labelFill: '#ffffff', // 白色文字\n labelFontSize: 14, // 放大文字\n labelFontWeight: 'bold', // 文字加粗\n },\n edgeStyle: {\n stroke: '#8b9baf', // 灰色边\n lineWidth: 2, // 加粗边线\n label: true, // 显示标签\n labelFill: '#5719c9', // 深紫色文字\n opacity: 0.8, // 适当的透明度\n },\n },\n ],\n});\n```\n\n效果如下：\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 400,\n height: 300,\n data: {\n nodes: [\n // 上部疏散区域\n { id: 'node1', style: { x: 150, y: 60, label: 'Node 1' } },\n { id: 'node2', style: { x: 100, y: 40, label: 'Node 2' } },\n { id: 'node3', style: { x: 200, y: 35, label: 'Node 3' } },\n { id: 'node4', style: { x: 150, y: 30, label: 'Node 4' } },\n\n // 中部区域\n { id: 'node5', style: { x: 220, y: 140, label: 'Node 5' } },\n { id: 'node6', style: { x: 280, y: 160, label: 'Node 6' } },\n { id: 'node7', style: { x: 220, y: 120, label: 'Node 7' } },\n { id: 'node8', style: { x: 260, y: 100, label: 'Node 8' } },\n { id: 'node9', style: { x: 240, y: 130, label: 'Node 9' } },\n { id: 'node10', style: { x: 300, y: 110, label: 'Node 10' } },\n\n // 下部区域\n { id: 'node11', style: { x: 240, y: 200, label: 'Node 11' } },\n { id: 'node12', style: { x: 280, y: 220, label: 'Node 12' } },\n { id: 'node13', style: { x: 300, y: 190, label: 'Node 13' } },\n { id: 'node14', style: { x: 320, y: 210, label: 'Node 14' } },\n ],\n edges: [\n // 上部连接\n { id: 'edge1', source: 'node1', target: 'node2' },\n { id: 'edge2', source: 'node2', target: 'node3' },\n { id: 'edge3', source: 'node3', target: 'node4' },\n\n // 中部连接\n { id: 'edge4', source: 'node5', target: 'node6' },\n { id: 'edge5', source: 'node6', target: 'node7' },\n { id: 'edge6', source: 'node7', target: 'node8' },\n { id: 'edge7', source: 'node8', target: 'node9' },\n { id: 'edge8', source: 'node9', target: 'node10' },\n\n // 下部连接\n { id: 'edge9', source: 'node11', target: 'node12' },\n { id: 'edge10', source: 'node12', target: 'node13' },\n { id: 'edge11', source: 'node13', target: 'node14' },\n\n // 跨区域连接\n { id: 'edge12', source: 'node4', target: 'node8' },\n { id: 'edge13', source: 'node7', target: 'node11' },\n { id: 'edge14', source: 'node10', target: 'node13' },\n ],\n },\n node: {\n style: {\n size: 20,\n },\n },\n edge: {\n style: {\n stroke: '#91d5ff',\n lineWidth: 1,\n },\n },\n plugins: [\n {\n type: 'edge-filter-lens',\n r: 80,\n style: {\n fill: '#f0f5ff', // 透镜区域的填充颜色\n fillOpacity: 0.6, // 填充区域的透明度\n stroke: '#7e3feb', // 透镜边框改为紫色\n strokeOpacity: 0.8, // 边框的透明度\n lineWidth: 1.5, // 边框的线宽\n },\n nodeStyle: {\n size: 24, // 放大节点\n fill: '#7e3feb', // 紫色填充\n stroke: '#5719c9', // 深紫色描边\n lineWidth: 1, // 细边框\n label: true, // 显示标签\n labelFill: '#ffffff', // 白色文字\n labelFontSize: 14, // 放大文字\n labelFontWeight: 'bold', // 文字加粗\n },\n edgeStyle: {\n stroke: '#8b9baf', // 灰色边\n lineWidth: 2, // 加粗边线\n label: true, // 显示标签\n labelFill: '#5719c9', // 深紫色文字\n opacity: 0.8, // 适当的透明度\n },\n },\n ],\n});\n\ngraph.render();\n```\n\n## 实际案例\n\n- [边过滤镜](/examples/plugin/edge-filter-lens/#basic)\n","packages/site/docs/manual/plugin/Fisheye.en.md":"---\ntitle: Fisheye\norder: 6\n---\n\n## Overview\n\nThe Fisheye plugin is designed for focus+context exploration scenarios. It can magnify the area of interest while ensuring that the context and the relationship between the context and the focus center are not lost. It is an important visualization exploration tool.\n\n## Use Cases\n\n- Highlight certain areas during presentations\n- Magnify details locally without losing the overall view\n\n## Basic Usage\n\nBelow is a simple example of initializing the Fisheye plugin:\n\n```js\nconst graph = new Graph({\n plugins: [\n {\n type: 'fisheye',\n trigger: 'drag', // Move fisheye by dragging\n d: 1.5, // Set distortion factor\n r: 120, // Set fisheye radius\n showDPercent: true, // Show distortion degree\n },\n ],\n});\n```\n\n## Online Experience\n\n\n\n## Configuration Options\n\n| Property | Description | Type | Default Value | Required |\n| -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- | -------- |\n| type | Plugin type | string | `fisheye` | ✓ |\n| key | Unique identifier for the plugin, can be used to get the plugin instance or update plugin options | string | - | |\n| trigger | Method to move the fisheye:
- `pointermove`: The fisheye always follows the mouse movement
- `click`: Move the fisheye to the click position when clicking on the canvas
- `drag`: Move the fisheye by dragging | `pointermove` \\| `drag` \\| `click` | `pointermove` | |\n| r | Radius of the fisheye | number | 120 | |\n| maxR | Maximum adjustable radius of the fisheye | number | Half of the smaller dimension of the canvas | |\n| minR | Minimum adjustable radius of the fisheye | number | 0 | |\n| d | Distortion factor | number | 1.5 | |\n| maxD | Maximum adjustable distortion factor of the fisheye | number | 5 | |\n| minD | Minimum adjustable distortion factor of the fisheye | number | 0 | |\n| scaleRBy | Method to adjust the fisheye radius:
- `'wheel'`: Adjust by wheel
- `'drag'`: Adjust by dragging | `wheel` \\| `drag` | - | |\n| scaleDBy | Method to adjust the fisheye distortion factor:
- `'wheel'`: Adjust by wheel
- `'drag'`: Adjust by dragging | `wheel` \\| `drag` | - | |\n| showDPercent | Whether to show the distortion factor value in the fisheye | boolean | true | |\n| style | Style of the fisheye, [configuration options](#style) | object | - | |\n| nodeStyle | Style of nodes in the fisheye | [NodeStyle](/en/manual/element/node/base-node#style) \\| ((datum: [NodeData](/en/manual/data#节点数据nodedata)) => [NodeStyle](/en/manual/element/node/base-node#style)) | `{ label: true }` | |\n| preventDefault | Whether to prevent default events | boolean | true | |\n\n### style\n\nCircular style properties for configuring the appearance of the fisheye.\n\n| Property | Description | Type | Default Value |\n| ------------- | ------------------ | ----------------------------- | ------------- |\n| fill | Fill color | string \\| Pattern \\| null | `#ccc` |\n| stroke | Stroke color | string \\| Pattern \\| null | `#000` |\n| opacity | Overall opacity | number \\| string | - |\n| fillOpacity | Fill opacity | number \\| string | 0.1 |\n| strokeOpacity | Stroke opacity | number \\| string | - |\n| lineWidth | Line width | number \\| string | 2 |\n| lineCap | Line cap style | `butt` \\| `round` \\| `square` | - |\n| lineJoin | Line join style | `miter` \\| `round` \\| `bevel` | - |\n| shadowColor | Shadow color | string | - |\n| shadowBlur | Shadow blur degree | number | - |\n| shadowOffsetX | Shadow X offset | number | - |\n| shadowOffsetY | Shadow Y offset | number | - |\n\nFor complete style properties, refer to [Element - Node - Built-in Node - General Style Properties - style](/en/manual/element/node/base-node#style)\n\n### Zoom Control\n\n`scaleRBy` and `scaleDBy` can be used to control the adjustment method of the fisheye's radius and distortion factor respectively:\n\n```js\nconst graph = new Graph({\n plugins: [\n {\n type: 'fisheye',\n // Adjust radius by wheel\n scaleRBy: 'wheel',\n // Adjust distortion factor by dragging\n scaleDBy: 'drag',\n // Set range for radius and distortion factor\n minR: 50,\n maxR: 200,\n minD: 1,\n maxD: 3,\n },\n ],\n});\n```\n\nNote: When `trigger`, `scaleRBy`, and `scaleDBy` are all set to `'drag'`, the priority order is `trigger` > `scaleRBy` > `scaleDBy`, and only the highest priority configuration item will bind the drag event. Similarly, if `scaleRBy` and `scaleDBy` are both set to `'wheel'`, only `scaleRBy` will bind the wheel event.\n\n## Code Examples\n\n### Basic Usage\n\nThe simplest configuration method:\n\n```js\nconst graph = new Graph({\n plugins: ['fisheye'],\n});\n```\n\n### Custom Styles\n\nYou can customize the appearance and behavior of the fisheye:\n\n```js\nconst graph = new Graph({\n plugins: [\n {\n type: 'fisheye',\n r: 150,\n d: 2,\n style: {\n fill: '#2f54eb', // Fill color of the fisheye area\n fillOpacity: 0.2, // Opacity of the fill area\n stroke: '#1d39c4', // Color of the fisheye border\n strokeOpacity: 0.8, // Opacity of the border\n lineWidth: 1.5, // Line width of the border\n shadowColor: '#1d39c4', // Shadow color\n shadowBlur: 10, // Shadow blur radius\n shadowOffsetX: 0, // Horizontal shadow offset\n shadowOffsetY: 0, // Vertical shadow offset\n cursor: 'pointer', // Cursor style when hovering\n },\n nodeStyle: {\n // Basic node style\n size: 40, // Node size\n fill: '#d6e4ff', // Node fill color\n stroke: '#2f54eb', // Node border color\n lineWidth: 2, // Node border width\n shadowColor: '#2f54eb', // Node shadow color\n shadowBlur: 5, // Node shadow blur radius\n cursor: 'pointer', // Cursor style when hovering\n\n // Label style\n label: true, // Show label\n labelFontSize: 14, // Label font size\n labelFontWeight: 'bold', // Label font weight\n labelFill: '#1d39c4', // Label text color\n labelBackground: true, // Show label background\n labelBackgroundFill: '#fff', // Label background fill color\n labelBackgroundStroke: '#1d39c4', // Label background border color\n labelBackgroundOpacity: 0.8, // Label background opacity\n labelBackgroundPadding: [4, 8, 4, 8], // Label background padding [top, right, bottom, left]\n\n // Icon style\n icon: true, // Show icon\n iconFontFamily: 'iconfont', // Icon font\n iconText: '\\ue6f6', // Icon Unicode\n iconFill: '#1d39c4', // Icon color\n iconSize: 16, // Icon size\n iconFontWeight: 'normal', // Icon font weight\n },\n },\n ],\n});\n```\n\nThe effect is as follows:\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 400,\n height: 300,\n data: {\n nodes: [\n { id: 'node-1', style: { x: 150, y: 100 } },\n { id: 'node-2', style: { x: 250, y: 100 } },\n { id: 'node-3', style: { x: 200, y: 180 } },\n { id: 'node-4', style: { x: 120, y: 180 } },\n { id: 'node-5', style: { x: 280, y: 180 } },\n ],\n edges: [\n { id: 'edge-1', source: 'node-1', target: 'node-2' },\n { id: 'edge-2', source: 'node-1', target: 'node-3' },\n { id: 'edge-3', source: 'node-2', target: 'node-3' },\n { id: 'edge-4', source: 'node-3', target: 'node-4' },\n { id: 'edge-5', source: 'node-3', target: 'node-5' },\n ],\n },\n node: {\n style: {\n size: 30,\n fill: '#e6f7ff',\n stroke: '#1890ff',\n lineWidth: 1,\n label: false,\n icon: false,\n },\n },\n edge: {\n style: {\n stroke: '#91d5ff',\n lineWidth: 1,\n },\n },\n plugins: [\n {\n type: 'fisheye',\n key: 'fisheye',\n r: 100,\n d: 2,\n style: {\n fill: '#2f54eb', // Fill color of the fisheye area\n fillOpacity: 0.2, // Opacity of the fill area\n stroke: '#1d39c4', // Color of the fisheye border\n strokeOpacity: 0.8, // Opacity of the border\n lineWidth: 1.5, // Line width of the border\n shadowColor: '#1d39c4', // Shadow color\n shadowBlur: 10, // Shadow blur radius\n shadowOffsetX: 0, // Horizontal shadow offset\n shadowOffsetY: 0, // Vertical shadow offset\n cursor: 'pointer', // Cursor style when hovering\n },\n nodeStyle: {\n // Basic node style\n size: 40, // Node size\n fill: '#d6e4ff', // Node fill color\n stroke: '#2f54eb', // Node border color\n lineWidth: 2, // Node border width\n shadowColor: '#2f54eb', // Node shadow color\n shadowBlur: 5, // Node shadow blur radius\n cursor: 'pointer', // Cursor style when hovering\n\n // Label style\n label: true, // Show label\n labelFontSize: 14, // Label font size\n labelFontWeight: 'bold', // Label font weight\n labelFill: '#1d39c4', // Label text color\n labelBackground: true, // Show label background\n labelBackgroundFill: '#fff', // Label background fill color\n labelBackgroundStroke: '#1d39c4', // Label background border color\n labelBackgroundOpacity: 0.8, // Label background opacity\n labelBackgroundPadding: [4, 8, 4, 8], // Label background padding [top, right, bottom, left]\n\n // Icon style\n icon: true, // Show icon\n iconFontFamily: 'iconfont', // Icon font\n iconText: '\\ue6f6', // Icon Unicode\n iconFill: '#1d39c4', // Icon color\n iconSize: 16, // Icon size\n iconFontWeight: 'normal', // Icon font weight\n },\n },\n ],\n});\n\ngraph.render();\n```\n\n## Practical Examples\n\n```js | ob { inject: true }\nimport { Graph, iconfont } from '@antv/g6';\n\nconst style = document.createElement('style');\nstyle.innerHTML = `@import url('${iconfont.css}');`;\ndocument.head.appendChild(style);\n\nfetch('https://assets.antv.antgroup.com/g6/relations.json')\n .then((res) => res.json())\n .then((data) => {\n const graph = new Graph({\n container: 'container',\n autoFit: 'view',\n data,\n node: {\n style: {\n size: (datum) => datum.id.length * 2 + 10,\n label: false,\n labelText: (datum) => datum.id,\n labelBackground: true,\n icon: false,\n iconFontFamily: 'iconfont',\n iconText: '\\ue6f6',\n iconFill: '#fff',\n },\n palette: {\n type: 'group',\n field: (datum) => datum.id,\n color: ['#1783FF', '#00C9C9', '#F08F56', '#D580FF'],\n },\n },\n edge: {\n style: {\n stroke: '#e2e2e2',\n },\n },\n plugins: [{ key: 'fisheye', type: 'fisheye', nodeStyle: { label: true, icon: true } }],\n });\n graph.render();\n });\n```\n","packages/site/docs/manual/plugin/Fisheye.zh.md":"---\ntitle: 鱼眼放大镜 Fisheye\norder: 6\n---\n\n## 概述\n\n鱼眼放大镜插件是为 focus+context 的探索场景设计的，它能够在放大关注区域的同时，保证上下文以及上下文与关注中心的关系不丢失，是一个重要的可视化探索工具。\n\n## 使用场景\n\n- 在演示过程中需要突出展示某些区域内容\n- 需要局部放大查看细节时，同时又不想失去整体视图\n\n## 基本用法\n\n以下是一个简单的 Fisheye 插件初始化示例：\n\n```js\nconst graph = new Graph({\n plugins: [\n {\n type: 'fisheye',\n trigger: 'drag', // 通过拖拽移动鱼眼\n d: 1.5, // 设置畸变因子\n r: 120, // 设置鱼眼半径\n showDPercent: true, // 显示畸变程度\n },\n ],\n});\n```\n\n## 在线体验\n\n\n\n## 配置项\n\n| 属性 | 描述 | 类型 | 默认值 | 必选 |\n| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | ---- |\n| type | 插件类型 | string | `fisheye` | ✓ |\n| key | 插件的唯一标识，可用于获取插件实例或更新插件选项 | string | - | |\n| trigger | 用于控制鱼眼放大镜的移动方式，支持以下三种配置：
- `pointermove`：鱼眼放大镜始终跟随鼠标移动
- `click`：点击画布时移动鱼眼放大镜到点击位置
- `drag`：通过拖拽方式移动鱼眼放大镜 | `pointermove` \\| `drag` \\| `click` | `pointermove` | |\n| r | 鱼眼放大镜半径 | number | 120 | |\n| maxR | 鱼眼放大镜可调整的最大半径 | number | 画布宽高的最小值的一半 | |\n| minR | 鱼眼放大镜可调整的最小半径 | number | 0 | |\n| d | 畸变因子 | number | 1.5 | |\n| maxD | 鱼眼放大镜可调整的最大畸变因子 | number | 5 | |\n| minD | 鱼眼放大镜可调整的最小畸变因子 | number | 0 | |\n| scaleRBy | 调整鱼眼放大镜范围半径的方式：
- `'wheel'`：滚轮调整
- `'drag'`：拖拽调整 | `wheel` \\| `drag` | - | |\n| scaleDBy | 调整鱼眼放大镜畸变因子的方式：
- `'wheel'`：滚轮调整
- `'drag'`：拖拽调整 | `wheel` \\| `drag` | - | |\n| showDPercent | 是否在鱼眼放大镜中显示畸变因子数值 | boolean | true | |\n| style | 鱼眼放大镜样式，[配置项](#style) | object | - | |\n| nodeStyle | 在鱼眼放大镜中的节点样式 | [NodeStyle](/manual/element/node/base-node#style) \\| ((datum: [NodeData](/manual/data#节点数据nodedata)) => [NodeStyle](/manual/element/node/base-node#style)) | `{ label: true }` | |\n| preventDefault | 是否阻止默认事件 | boolean | true | |\n\n### style\n\n圆形样式属性，用于配置鱼眼放大镜的外观。\n\n| 属性 | 描述 | 类型 | 默认值 |\n| ------------- | --------------- | ----------------------------- | ------ |\n| fill | 填充颜色 | string \\| Pattern \\| null | `#ccc` |\n| stroke | 描边颜色 | string \\| Pattern \\| null | `#000` |\n| opacity | 整体透明度 | number \\| string | - |\n| fillOpacity | 填充透明度 | number \\| string | 0.1 |\n| strokeOpacity | 描边透明度 | number \\| string | - |\n| lineWidth | 线宽度 | number \\| string | 2 |\n| lineCap | 线段端点样式 | `butt` \\| `round` \\| `square` | - |\n| lineJoin | 线段连接处样式 | `miter` \\| `round` \\| `bevel` | - |\n| shadowColor | 阴影颜色 | string | - |\n| shadowBlur | 阴影模糊程度 | number | - |\n| shadowOffsetX | 阴影 X 方向偏移 | number | - |\n| shadowOffsetY | 阴影 Y 方向偏移 | number | - |\n\n完整样式属性参考 [元素 -节点 - 内置节点 - 通用样式属性 - style](/manual/element/node/base-node#style)\n\n### 缩放控制\n\n通过 `scaleRBy` 和 `scaleDBy` 可以分别控制鱼眼放大镜的半径和畸变因子的调整方式：\n\n```js\nconst graph = new Graph({\n plugins: [\n {\n type: 'fisheye',\n // 通过滚轮调整半径\n scaleRBy: 'wheel',\n // 通过拖拽调整畸变因子\n scaleDBy: 'drag',\n // 设置半径和畸变因子的范围\n minR: 50,\n maxR: 200,\n minD: 1,\n maxD: 3,\n },\n ],\n});\n```\n\n注意：当 `trigger`、`scaleRBy` 和 `scaleDBy` 同时设置为 `'drag'` 时，优先级顺序为 `trigger` > `scaleRBy` > `scaleDBy`，只会为优先级最高的配置项绑定拖拽事件。同理，如果 `scaleRBy` 和 `scaleDBy` 同时设置为 `'wheel'`，只会为 `scaleRBy` 绑定滚轮事件。\n\n## 代码示例\n\n### 基础用法\n\n最简单的配置方式：\n\n```js\nconst graph = new Graph({\n plugins: ['fisheye'],\n});\n```\n\n### 自定义样式\n\n可以自定义鱼眼放大镜的外观和行为：\n\n```js\nconst graph = new Graph({\n plugins: [\n {\n type: 'fisheye',\n r: 150,\n d: 2,\n style: {\n fill: '#2f54eb', // 鱼眼区域的填充颜色\n fillOpacity: 0.2, // 填充区域的透明度\n stroke: '#1d39c4', // 鱼眼边框的颜色\n strokeOpacity: 0.8, // 边框的透明度\n lineWidth: 1.5, // 边框的线宽\n shadowColor: '#1d39c4', // 阴影颜色\n shadowBlur: 10, // 阴影的模糊半径\n shadowOffsetX: 0, // 阴影的水平偏移\n shadowOffsetY: 0, // 阴影的垂直偏移\n cursor: 'pointer', // 鼠标悬停时的指针样式\n },\n nodeStyle: {\n // 节点基础样式\n size: 40, // 节点大小\n fill: '#d6e4ff', // 节点填充颜色\n stroke: '#2f54eb', // 节点边框颜色\n lineWidth: 2, // 节点边框宽度\n shadowColor: '#2f54eb', // 节点阴影颜色\n shadowBlur: 5, // 节点阴影模糊半径\n cursor: 'pointer', // 鼠标悬停时的指针样式\n\n // 标签样式\n label: true, // 是否显示标签\n labelFontSize: 14, // 标签字体大小\n labelFontWeight: 'bold', // 标签字体粗细\n labelFill: '#1d39c4', // 标签文字颜色\n labelBackground: true, // 是否显示标签背景\n labelBackgroundFill: '#fff', // 标签背景填充颜色\n labelBackgroundStroke: '#1d39c4', // 标签背景边框颜色\n labelBackgroundOpacity: 0.8, // 标签背景透明度\n labelBackgroundPadding: [4, 8, 4, 8], // 标签背景内边距 [上,右,下,左]\n\n // 图标样式\n icon: true, // 是否显示图标\n iconFontFamily: 'iconfont', // 图标字体\n iconText: '\\ue6f6', // 图标的 Unicode 编码\n iconFill: '#1d39c4', // 图标颜色\n iconSize: 16, // 图标大小\n iconFontWeight: 'normal', // 图标字体粗细\n },\n },\n ],\n});\n```\n\n效果如下：\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 400,\n height: 300,\n data: {\n nodes: [\n { id: 'node-1', style: { x: 150, y: 100 } },\n { id: 'node-2', style: { x: 250, y: 100 } },\n { id: 'node-3', style: { x: 200, y: 180 } },\n { id: 'node-4', style: { x: 120, y: 180 } },\n { id: 'node-5', style: { x: 280, y: 180 } },\n ],\n edges: [\n { id: 'edge-1', source: 'node-1', target: 'node-2' },\n { id: 'edge-2', source: 'node-1', target: 'node-3' },\n { id: 'edge-3', source: 'node-2', target: 'node-3' },\n { id: 'edge-4', source: 'node-3', target: 'node-4' },\n { id: 'edge-5', source: 'node-3', target: 'node-5' },\n ],\n },\n node: {\n style: {\n size: 30,\n fill: '#e6f7ff',\n stroke: '#1890ff',\n lineWidth: 1,\n label: false,\n icon: false,\n },\n },\n edge: {\n style: {\n stroke: '#91d5ff',\n lineWidth: 1,\n },\n },\n plugins: [\n {\n type: 'fisheye',\n key: 'fisheye',\n r: 100,\n d: 2,\n style: {\n fill: '#2f54eb', // 鱼眼区域的填充颜色\n fillOpacity: 0.2, // 填充区域的透明度\n stroke: '#1d39c4', // 鱼眼边框的颜色\n strokeOpacity: 0.8, // 边框的透明度\n lineWidth: 1.5, // 边框的线宽\n shadowColor: '#1d39c4', // 阴影颜色\n shadowBlur: 10, // 阴影的模糊半径\n shadowOffsetX: 0, // 阴影的水平偏移\n shadowOffsetY: 0, // 阴影的垂直偏移\n cursor: 'pointer', // 鼠标悬停时的指针样式\n },\n nodeStyle: {\n // 节点基础样式\n size: 40, // 节点大小\n fill: '#d6e4ff', // 节点填充颜色\n stroke: '#2f54eb', // 节点边框颜色\n lineWidth: 2, // 节点边框宽度\n shadowColor: '#2f54eb', // 节点阴影颜色\n shadowBlur: 5, // 节点阴影模糊半径\n cursor: 'pointer', // 鼠标悬停时的指针样式\n\n // 标签样式\n label: true, // 是否显示标签\n labelFontSize: 14, // 标签字体大小\n labelFontWeight: 'bold', // 标签字体粗细\n labelFill: '#1d39c4', // 标签文字颜色\n labelBackground: true, // 是否显示标签背景\n labelBackgroundFill: '#fff', // 标签背景填充颜色\n labelBackgroundStroke: '#1d39c4', // 标签背景边框颜色\n labelBackgroundOpacity: 0.8, // 标签背景透明度\n labelBackgroundPadding: [4, 8, 4, 8], // 标签背景内边距 [上,右,下,左]\n\n // 图标样式\n icon: true, // 是否显示图标\n iconFontFamily: 'iconfont', // 图标字体\n iconText: '\\ue6f6', // 图标的 Unicode 编码\n iconFill: '#1d39c4', // 图标颜色\n iconSize: 16, // 图标大小\n iconFontWeight: 'normal', // 图标字体粗细\n },\n },\n ],\n});\n\ngraph.render();\n```\n\n## 实际案例\n\n```js | ob { inject: true }\nimport { Graph, iconfont } from '@antv/g6';\n\nconst style = document.createElement('style');\nstyle.innerHTML = `@import url('${iconfont.css}');`;\ndocument.head.appendChild(style);\n\nfetch('https://assets.antv.antgroup.com/g6/relations.json')\n .then((res) => res.json())\n .then((data) => {\n const graph = new Graph({\n container: 'container',\n autoFit: 'view',\n data,\n node: {\n style: {\n size: (datum) => datum.id.length * 2 + 10,\n label: false,\n labelText: (datum) => datum.id,\n labelBackground: true,\n icon: false,\n iconFontFamily: 'iconfont',\n iconText: '\\ue6f6',\n iconFill: '#fff',\n },\n palette: {\n type: 'group',\n field: (datum) => datum.id,\n color: ['#1783FF', '#00C9C9', '#F08F56', '#D580FF'],\n },\n },\n edge: {\n style: {\n stroke: '#e2e2e2',\n },\n },\n plugins: [{ key: 'fisheye', type: 'fisheye', nodeStyle: { label: true, icon: true } }],\n });\n graph.render();\n });\n```\n","packages/site/docs/manual/plugin/Fullscreen.en.md":"---\ntitle: Fullscreen\norder: 7\n---\n\n## Overview\n\nThe Fullscreen plugin allows users to expand the graph visualization content to the entire screen, providing a broader view and a better immersive experience.\n\n## Use Cases\n\nThe Fullscreen plugin is mainly suitable for the following scenarios:\n\n- Provide a broader view for viewing complex graph data\n- Enhance immersive experience, focusing on graph visualization content\n- Display graph data in presentations or reports\n\n## Basic Usage\n\nBelow is a simple example of initializing the Fullscreen plugin:\n\n```js\nconst graph = new Graph({\n plugins: [\n {\n type: 'fullscreen',\n autoFit: true,\n trigger: {\n request: 'F', // Use shortcut key F to enter fullscreen\n exit: 'Esc', // Use shortcut key Esc to exit fullscreen\n },\n onEnter: () => {\n console.log('Entered fullscreen mode');\n },\n onExit: () => {\n console.log('Exited fullscreen mode');\n },\n },\n ],\n});\n```\n\n## Configuration Options\n\n| Property | Description | Type | Default Value | Required |\n| -------- | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------- | -------- |\n| type | Plugin type | string | `fullscreen` | ✓ |\n| key | Unique identifier for the plugin, can be used to get the plugin instance or update plugin options | string | - | |\n| autoFit | Whether to auto-fit the canvas size, the canvas size will automatically adapt to the screen size when fullscreen | boolean | true | |\n| trigger | Method to trigger fullscreen, [example](#trigger) | { request?: string; exit?: string; } | - | |\n| onEnter | Callback after entering fullscreen | () => void | - | |\n| onExit | Callback after exiting fullscreen | () => void | - | |\n\n### trigger\n\nThe trigger property is used to control the method of triggering fullscreen. It supports two configuration methods:\n\n#### Shortcut Key Configuration\n\nUse keyboard shortcuts to trigger fullscreen and exit fullscreen.\n\n```js\nconst graph = new Graph({\n plugins: [\n {\n type: 'fullscreen',\n trigger: {\n request: 'F', // Use shortcut key F to enter fullscreen\n exit: 'Esc', // Use shortcut key Esc to exit fullscreen\n },\n },\n ],\n});\n```\n\n#### Custom Trigger\n\nControl fullscreen by calling the request and exit methods.\n\n```js\nconst graph = new Graph({\n plugins: [\n {\n type: 'fullscreen',\n key: 'my-fullscreen',\n },\n ],\n});\n\n// Enter fullscreen\ngraph.getPluginInstance('my-fullscreen').request();\n\n// Exit fullscreen\ngraph.getPluginInstance('my-fullscreen').exit();\n```\n\n### autoFit\n\nWhether to auto-fit the canvas size, the canvas size will automatically adapt to the screen size when fullscreen.\n\n- When set to true, the canvas will automatically resize to fit the entire screen.\n- When set to false, the canvas size remains unchanged.\n\n```js\nconst graph = new Graph({\n plugins: [\n {\n type: 'fullscreen',\n autoFit: true,\n },\n ],\n});\n```\n\n## API\n\n### Fullscreen.request()\n\nThis method is used to enter fullscreen mode programmatically. It can be called on the plugin instance to expand the graph visualization to the entire screen.\n\n```js\nconst graph = new Graph({\n plugins: [\n {\n type: 'fullscreen',\n key: 'my-fullscreen',\n },\n ],\n});\n\n// Enter fullscreen\ngraph.getPluginInstance('my-fullscreen').request();\n```\n\n### Fullscreen.exit()\n\nThis method is used to exit fullscreen mode programmatically. It can be called on the plugin instance to revert the graph visualization back to its original size.\n\n```js\nconst graph = new Graph({\n plugins: [\n {\n type: 'fullscreen',\n key: 'my-fullscreen',\n },\n ],\n});\n\n// Exit fullscreen\ngraph.getPluginInstance('my-fullscreen').exit();\n```\n\n## Practical Examples\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n data: { nodes: Array.from({ length: 20 }).map((_, i) => ({ id: `node${i}` })) },\n autoFit: 'center',\n background: '#fff',\n plugins: [\n {\n type: 'fullscreen',\n key: 'fullscreen',\n },\n function () {\n const graph = this;\n return {\n type: 'toolbar',\n key: 'toolbar',\n position: 'top-left',\n onClick: (item) => {\n const fullscreenPlugin = graph.getPluginInstance('fullscreen');\n if (item === 'request-fullscreen') {\n fullscreenPlugin.request();\n }\n if (item === 'exit-fullscreen') {\n fullscreenPlugin.exit();\n }\n },\n getItems: () => {\n return [\n { id: 'request-fullscreen', value: 'request-fullscreen' },\n { id: 'exit-fullscreen', value: 'exit-fullscreen' },\n ];\n },\n };\n },\n ],\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/plugin/Fullscreen.zh.md":"---\ntitle: 全屏展示 Fullscreen\norder: 7\n---\n\n## 概述\n\n全屏展示插件允许用户将图可视化内容扩展到整个屏幕，提供更广阔的视图和更好的沉浸式体验。\n\n## 使用场景\n\n全屏展示插件主要适用于以下场景：\n\n- 提供更广阔的视图，便于查看复杂图数据\n- 增强沉浸式体验，专注于图可视化内容\n- 在演示或报告中展示图数据\n\n## 基本用法\n\n以下是一个简单的 Fullscreen 插件初始化示例：\n\n```js\nconst graph = new Graph({\n plugins: [\n {\n type: 'fullscreen',\n autoFit: true,\n trigger: {\n request: 'F', // 使用快捷键 F 进入全屏\n exit: 'Esc', // 使用快捷键 Esc 退出全屏\n },\n onEnter: () => {\n console.log('进入全屏模式');\n },\n onExit: () => {\n console.log('退出全屏模式');\n },\n },\n ],\n});\n```\n\n## 配置项\n\n| 属性 | 描述 | 类型 | 默认值 | 必选 |\n| ------- | ---------------------------------------------------- | ------------------------------------ | ------------ | ---- |\n| type | 插件类型 | string | `fullscreen` | ✓ |\n| key | 插件的唯一标识，可用于获取插件实例或更新插件选项 | string | - | |\n| autoFit | 是否自适应画布尺寸，全屏后画布尺寸会自动适应屏幕尺寸 | boolean | true | |\n| trigger | 触发全屏的方式，[示例](#trigger) | { request?: string; exit?: string; } | - | |\n| onEnter | 进入全屏后的回调 | () => void | - | |\n| onExit | 退出全屏后的回调 | () => void | - | |\n\n### trigger\n\ntrigger 属性用于控制触发全屏的方式。它支持两种配置方式：\n\n#### 快捷键配置\n\n使用键盘快捷键来触发全屏和退出全屏。\n\n```js\nconst graph = new Graph({\n plugins: [\n {\n type: 'fullscreen',\n trigger: {\n request: 'F', // 使用快捷键 F 进入全屏\n exit: 'Esc', // 使用快捷键 Esc 退出全屏\n },\n },\n ],\n});\n```\n\n#### 自定义触发\n\n通过调用 request 和 exit 方法来控制全屏。\n\n```js\nconst graph = new Graph({\n plugins: [\n {\n type: 'fullscreen',\n key: 'my-fullscreen',\n },\n ],\n});\n\n// 进入全屏\ngraph.getPluginInstance('my-fullscreen').request();\n\n// 退出全屏\ngraph.getPluginInstance('my-fullscreen').exit();\n```\n\n### autoFit\n\n是否自适应画布尺寸，全屏后画布尺寸会自动适应屏幕尺寸。\n\n- 设置为 true 时，画布会自动调整大小以适应整个屏幕。\n- 设置为 false 时，画布大小保持不变。\n\n```js\nconst graph = new Graph({\n plugins: [\n {\n type: 'fullscreen',\n autoFit: true,\n },\n ],\n});\n```\n\n## API\n\n### Fullscreen.request()\n\n这个方法可以让你通过代码进入全屏模式。调用插件实例上的这个方法，就能把图形内容扩展到整个屏幕。\n\n```js\nconst graph = new Graph({\n plugins: [\n {\n type: 'fullscreen',\n key: 'my-fullscreen',\n },\n ],\n});\n\n// 进入全屏\ngraph.getPluginInstance('my-fullscreen').request();\n```\n\n### Fullscreen.exit()\n\n这个方法可以让你通过代码退出全屏模式。调用插件实例上的这个方法，就能把图形内容恢复到原来的大小。\n\n```js\nconst graph = new Graph({\n plugins: [\n {\n type: 'fullscreen',\n key: 'my-fullscreen',\n },\n ],\n});\n\n// 退出全屏\ngraph.getPluginInstance('my-fullscreen').exit();\n```\n\n## 实际案例\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n data: { nodes: Array.from({ length: 20 }).map((_, i) => ({ id: `node${i}` })) },\n autoFit: 'center',\n background: '#fff',\n plugins: [\n {\n type: 'fullscreen',\n key: 'fullscreen',\n },\n function () {\n const graph = this;\n return {\n type: 'toolbar',\n key: 'toolbar',\n position: 'top-left',\n onClick: (item) => {\n const fullscreenPlugin = graph.getPluginInstance('fullscreen');\n if (item === 'request-fullscreen') {\n fullscreenPlugin.request();\n }\n if (item === 'exit-fullscreen') {\n fullscreenPlugin.exit();\n }\n },\n getItems: () => {\n return [\n { id: 'request-fullscreen', value: 'request-fullscreen' },\n { id: 'exit-fullscreen', value: 'exit-fullscreen' },\n ];\n },\n };\n },\n ],\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/plugin/GridLine.en.md":"---\ntitle: GridLine\norder: 8\n---\n\n## Overview\n\nThe GridLine plugin provides visual auxiliary lines for the canvas, helping users precisely position and align graphic elements. It is an indispensable tool in graphic drawing.\n\n## Use Cases\n\nThe GridLine plugin is mainly suitable for the following scenarios:\n\n- Assisting users in precise drawing and element alignment\n- Providing visual references to enhance spatial awareness\n- Building a structured reference system when designing and editing graphics\n\n## Basic Usage\n\nBelow is a simple example of initializing the GridLine plugin:\n\n```js\nconst graph = new Graph({\n plugins: [\n {\n type: 'grid-line',\n key: 'my-grid-line', // Specify a unique identifier for dynamic updates\n size: 20,\n stroke: '#0001',\n follow: true,\n },\n ],\n});\n```\n\n## Online Experience\n\n\n\n## Configuration Options\n\n| Property | Description | Type | Default | Required |\n| --------------- | --------------------------------------------------------------------------------------------------- | ------------------------------------------------- | ----------- | -------- |\n| type | Plugin type | string | `grid-line` | ✓ |\n| key | Unique identifier for the plugin, used to get the plugin instance or update plugin options | string | - | |\n| border | Whether to display the border | boolean | true | |\n| borderLineWidth | Border line width | number | 1 | |\n| borderStroke | Border color, see [CSS border-color](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color) | string | `#eee` | |\n| borderStyle | Border style, see [CSS border-style](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style) | string | `solid` | |\n| follow | Whether to follow canvas movements | boolean \\| {translate ?: boolean, zoom?: boolean} | false | |\n| lineWidth | Grid line width | number \\| string | 1 | |\n| size | Grid unit size in pixels | number | 20 | |\n| stroke | Grid line color | string | `#eee` | |\n\n### follow\n\nThe `follow` property controls whether the grid lines follow the canvas transformations. It supports two configuration methods:\n\n1. **Boolean Configuration**: When set to `true`, the grid lines follow both canvas translation and zoom; when set to `false`, they remain static.\n\n```js\n// Enable both translation and zoom following\nconst graph = new Graph({\n plugins: [\n {\n type: 'grid-line',\n follow: true,\n },\n ],\n});\n```\n\n2. **Object Configuration**: Allows more precise control over the grid line following behavior.\n\n```js\n// Follow translation only, not zoom\nconst graph = new Graph({\n plugins: [\n {\n type: 'grid-line',\n follow: {\n translate: true, // Follow translation\n zoom: false, // Do not follow zoom\n },\n },\n ],\n});\n\n// Follow zoom only, not translation\nconst graph = new Graph({\n plugins: [\n {\n type: 'grid-line',\n follow: {\n translate: false, // Do not follow translation\n zoom: true, // Follow zoom\n },\n },\n ],\n});\n```\n\nWhen grid lines follow zoom, they maintain a relative position to the canvas content, making alignment references more precise. Following translation allows the grid to move with the canvas content, enhancing the visual experience of spatial continuity.\n\n## Code Examples\n\n### Basic Grid Line\n\nThe simplest way is to use the preset configuration directly:\n\n```js\nconst graph = new Graph({\n // Other configurations...\n plugins: ['grid-line'],\n});\n```\n\nThe effect is as follows:\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 300,\n height: 150,\n data: { nodes: [{ id: 'node-1', style: { x: 150, y: 75 } }] },\n behaviors: ['drag-canvas'],\n plugins: ['grid-line'],\n});\n\ngraph.render();\n```\n\n### Custom Style\n\nYou can customize the grid line style as needed:\n\n```js\nconst graph = new Graph({\n // Other configurations...\n plugins: [\n {\n type: 'grid-line',\n stroke: '#1890ff33', // Blue semi-transparent grid line\n lineWidth: 2,\n size: 40, // Larger grid unit\n borderStroke: '#1890ff', // Blue border\n borderLineWidth: 2,\n },\n ],\n});\n```\n\nThe effect is as follows:\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 300,\n height: 150,\n data: { nodes: [{ id: 'node-1', style: { x: 150, y: 75 } }] },\n behaviors: ['drag-canvas'],\n plugins: [\n {\n type: 'grid-line',\n stroke: '#1890ff33', // Blue semi-transparent grid line\n lineWidth: 2,\n size: 40, // Larger grid\n borderStroke: '#1890ff', // Blue border\n borderLineWidth: 2,\n },\n ],\n});\n\ngraph.render();\n```\n\n### Follow Movement\n\nEnabling the follow option allows the grid to move with the canvas, enhancing user experience:\n\n```js\nconst graph = new Graph({\n // Other configurations...\n behaviors: ['drag-canvas', 'zoom-canvas'],\n plugins: [\n {\n type: 'grid-line',\n follow: true, // Grid follows canvas movement\n },\n ],\n});\n```\n\nTry dragging/zooming the canvas to observe the grid following effect:\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 300,\n height: 150,\n data: { nodes: [{ id: 'node-1', style: { x: 150, y: 75 } }] },\n behaviors: ['drag-canvas', 'zoom-canvas'],\n plugins: [\n {\n type: 'grid-line',\n follow: true, // Grid follows canvas movement\n },\n ],\n});\n\ngraph.render();\n```\n\n### Dynamic Grid Update\n\nUse the key identifier to dynamically update grid properties at runtime:\n\n```js\n// Initial configuration\nconst graph = new Graph({\n // Other configurations...\n plugins: [\n {\n type: 'grid-line',\n key: 'my-grid',\n size: 20,\n },\n ],\n});\n\n// Subsequent dynamic updates\ngraph.updatePlugin({\n key: 'my-grid',\n size: 40, // Update grid size\n stroke: '#ff4d4f', // Update grid color\n});\n```\n\n## Cases\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst data = {\n nodes: [{ id: 'node-0' }, { id: 'node-1' }, { id: 'node-2' }, { id: 'node-3' }, { id: 'node-4' }, { id: 'node-5' }],\n edges: [\n { source: 'node-0', target: 'node-1' },\n { source: 'node-0', target: 'node-2' },\n { source: 'node-0', target: 'node-3' },\n { source: 'node-0', target: 'node-4' },\n { source: 'node-1', target: 'node-0' },\n { source: 'node-2', target: 'node-0' },\n { source: 'node-3', target: 'node-0' },\n { source: 'node-4', target: 'node-0' },\n { source: 'node-5', target: 'node-0' },\n ],\n};\n\nconst graph = new Graph({\n container: 'container',\n data,\n layout: { type: 'grid' },\n behaviors: ['drag-canvas'],\n plugins: [{ key: 'grid-line', type: 'grid-line', follow: false }],\n});\n\ngraph.render();\n\nwindow.addPanel((gui) => {\n gui\n .add({ follow: false }, 'follow')\n .name('Follow')\n .onChange((value) => {\n graph.updatePlugin({\n key: 'grid-line',\n follow: value,\n });\n });\n});\n```\n","packages/site/docs/manual/plugin/GridLine.zh.md":"---\ntitle: 网格线 GridLine\norder: 8\n---\n\n## 概述\n\n网格线插件为画布提供可视化辅助线，帮助用户精确定位和对齐图形元素，是图形绘制中不可或缺的辅助工具。\n\n## 使用场景\n\n网格线插件主要适用于以下场景：\n\n- 辅助用户精确绘图和元素对齐\n- 提供视觉参考，增强空间感知\n- 在设计和编辑图形时构建结构化的参考系统\n\n## 基本用法\n\n以下是一个简单的 GridLine 插件初始化示例：\n\n```js\nconst graph = new Graph({\n plugins: [\n {\n type: 'grid-line',\n key: 'my-grid-line', // 指定唯一标识符，便于后续动态更新\n size: 20,\n stroke: '#0001',\n follow: true,\n },\n ],\n});\n```\n\n## 在线体验\n\n\n\n## 配置项\n\n| 属性 | 描述 | 类型 | 默认值 | 必选 |\n| --------------- | -------------------------------------------------------------------------------------------------------- | -------------------------------------------------- | ----------- | ---- |\n| type | 插件类型 | string | `grid-line` | ✓ |\n| key | 插件的唯一标识，可用于获取插件实例或更新插件选项 | string | - | |\n| border | 是否显示边框 | boolean | true | |\n| borderLineWidth | 边框线宽 | number | 1 | |\n| borderStroke | 边框颜色，详细属性参考 [CSS border-color](https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-color) | string | `#eee` | |\n| borderStyle | 边框样式，详细属性参考 [CSS border-style](https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-style) | string | `solid` | |\n| follow | 是否跟随画布移动 | boolean \\｜ {translate ?: boolean, zoom?: boolean} | false | |\n| lineWidth | 网格线宽度 | number \\| string | 1 | |\n| size | 网格单元大小，单位为像素 | number | 20 | |\n| stroke | 网格线颜色 | string | `#eee` | |\n\n### follow\n\n`follow` 属性用于控制网格线是否跟随画布的变换操作。它支持两种配置方式：\n\n1. **布尔值配置**：当设置为 `true` 时，网格线会同时跟随画布的平移和缩放；设置为 `false` 时则保持静态。\n\n```js\n// 同时启用跟随平移和缩放\nconst graph = new Graph({\n plugins: [\n {\n type: 'grid-line',\n follow: true,\n },\n ],\n});\n```\n\n2. **对象配置**：可以更精细地控制网格线的跟随行为。\n\n```js\n// 仅跟随平移，不跟随缩放\nconst graph = new Graph({\n plugins: [\n {\n type: 'grid-line',\n follow: {\n translate: true, // 跟随平移\n zoom: false, // 不跟随缩放\n },\n },\n ],\n});\n\n// 仅跟随缩放，不跟随平移\nconst graph = new Graph({\n plugins: [\n {\n type: 'grid-line',\n follow: {\n translate: false, // 不跟随平移\n zoom: true, // 跟随缩放\n },\n },\n ],\n});\n```\n\n当网格线跟随缩放时，它会保持与画布内容的相对位置关系，使得对齐参考更加精准。跟随平移则让网格随着画布内容一起移动，增强空间连续性的视觉体验。\n\n## 代码示例\n\n### 基础网格线\n\n最简单的方式是直接使用预设配置：\n\n```js\nconst graph = new Graph({\n // 其他配置...\n plugins: ['grid-line'],\n});\n```\n\n效果如下：\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 300,\n height: 150,\n data: { nodes: [{ id: 'node-1', style: { x: 150, y: 75 } }] },\n behaviors: ['drag-canvas'],\n plugins: ['grid-line'],\n});\n\ngraph.render();\n```\n\n### 自定义样式\n\n您可以根据需要自定义网格线的样式：\n\n```js\nconst graph = new Graph({\n // 其他配置...\n plugins: [\n {\n type: 'grid-line',\n stroke: '#1890ff33', // 蓝色半透明网格线\n lineWidth: 2,\n size: 40, // 更大的网格单元\n borderStroke: '#1890ff', // 蓝色边框\n borderLineWidth: 2,\n },\n ],\n});\n```\n\n效果如下：\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 300,\n height: 150,\n data: { nodes: [{ id: 'node-1', style: { x: 150, y: 75 } }] },\n behaviors: ['drag-canvas'],\n plugins: [\n {\n type: 'grid-line',\n stroke: '#1890ff33', // 蓝色半透明网格线\n lineWidth: 2,\n size: 40, // 更大的网格\n borderStroke: '#1890ff', // 蓝色边框\n borderLineWidth: 2,\n },\n ],\n});\n\ngraph.render();\n```\n\n### 跟随移动\n\n启用 follow 选项可以让网格跟随画布移动，增强用户体验：\n\n```js\nconst graph = new Graph({\n // 其他配置...\n behaviors: ['drag-canvas', 'zoom-canvas'],\n plugins: [\n {\n type: 'grid-line',\n follow: true, // 网格跟随画布移动\n },\n ],\n});\n```\n\n试着拖拽/缩放画布，观察网格的跟随效果：\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 300,\n height: 150,\n data: { nodes: [{ id: 'node-1', style: { x: 150, y: 75 } }] },\n behaviors: ['drag-canvas', 'zoom-canvas'],\n plugins: [\n {\n type: 'grid-line',\n follow: true, // 网格跟随画布移动\n },\n ],\n});\n\ngraph.render();\n```\n\n### 动态更新网格\n\n使用 key 标识符可以在运行时动态更新网格属性：\n\n```js\n// 初始化配置\nconst graph = new Graph({\n // 其他配置...\n plugins: [\n {\n type: 'grid-line',\n key: 'my-grid',\n size: 20,\n },\n ],\n});\n\n// 后续动态更新\ngraph.updatePlugin({\n key: 'my-grid',\n size: 40, // 更新网格大小\n stroke: '#ff4d4f', // 更新网格颜色\n});\n```\n\n## 实际案例\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst data = {\n nodes: [{ id: 'node-0' }, { id: 'node-1' }, { id: 'node-2' }, { id: 'node-3' }, { id: 'node-4' }, { id: 'node-5' }],\n edges: [\n { source: 'node-0', target: 'node-1' },\n { source: 'node-0', target: 'node-2' },\n { source: 'node-0', target: 'node-3' },\n { source: 'node-0', target: 'node-4' },\n { source: 'node-1', target: 'node-0' },\n { source: 'node-2', target: 'node-0' },\n { source: 'node-3', target: 'node-0' },\n { source: 'node-4', target: 'node-0' },\n { source: 'node-5', target: 'node-0' },\n ],\n};\n\nconst graph = new Graph({\n container: 'container',\n data,\n layout: { type: 'grid' },\n behaviors: ['drag-canvas'],\n plugins: [{ key: 'grid-line', type: 'grid-line', follow: false }],\n});\n\ngraph.render();\n\nwindow.addPanel((gui) => {\n gui\n .add({ follow: false }, 'follow')\n .name('Follow')\n .onChange((value) => {\n graph.updatePlugin({\n key: 'grid-line',\n follow: value,\n });\n });\n});\n```\n","packages/site/docs/manual/plugin/History.en.md":"---\ntitle: History\norder: 9\n---\n\n## Overview\n\nThis plugin is used to implement the **Undo** and **Redo** functions in graph editing. By recording the historical state stack of user operations, it supports backtracking or restoring operations during graph interactions. The plugin provides users with comprehensive configuration options and APIs.\n\n## Usage Scenarios\n\nThe history plugin is suitable for all scenarios involving graph editing.\n\n## Online Experience\n\n\n\n## Basic Usage\n\nAdd this plugin in the graph configuration:\n\n**1. Quick Configuration (Static)**\n\nDeclare directly using a string. This method is simple but only supports default configurations and cannot be dynamically modified after configuration:\n\n```javascript\nconst graph = new Graph({\n // Other configurations...\n plugins: ['history'],\n});\n```\n\n**2. Object Configuration (Recommended)**\n\nConfigure using an object form, supporting custom parameters, and allowing dynamic updates at runtime:\n\n```javascript\nconst graph = new Graph({\n // Other configurations...\n plugins: [\n {\n type: 'history',\n key: 'history-1',\n stackSize: 10,\n },\n ],\n});\n```\n\n## Configuration Options\n\n| Property | Description | Type | Default Value | Required |\n| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- | ------------- | -------- |\n| afterAddCommand | Called after a command is added to the `Undo/Redo` queue. `revert` is `true` for undo operations and `false` for redo operations | (cmd: [Command](#command), revert: boolean) => void | - | |\n| beforeAddCommand | Called before a command is added to the `Undo/Redo` queue. If this method returns `false`, the command will not be added to the queue. `revert` is `true` for undo operations and `false` for redo operations | (cmd: [Command](#command), revert: boolean) => boolean \\| void | - | |\n| executeCommand | Callback function when executing a command | (cmd: [Command](#command)) => void | - | |\n| stackSize | Maximum length of history records to be recorded | number | 0 (unlimited) | |\n\n### Parameter Type Description\n\n#### `Command`\n\n```typescript\n// Single history command\ninterface Command {\n current: CommandData; // Current data\n original: CommandData; // Original data\n animation: boolean; // Whether to enable animation\n}\n// Single history command data\ninterface CommandData {\n add: GraphData; // Added data\n update: GraphData; // Updated data\n remove: GraphData; // Removed data\n}\n// Graph data\ninterface GraphData {\n nodes?: NodeData[]; // Node data\n edges?: EdgeData[]; // Edge data\n combos?: ComboData[]; // Combo data\n}\n```\n\n## API\n\nThe history plugin provides the following APIs for users to use as needed. For how to call plugin methods, please refer to the [Plugin Overview Document](/en/manual/plugin/overview#calling-plugin-methods)\n\n### History.canRedo()\n\nDetermines whether a **redo** operation can be performed. If there are records in the redo stack, it returns `true`; otherwise, it returns `false`.\n\n```typescript\ncanRedo(): boolean;\n```\n\n**Example:**\n\n```typescript\nconst canRedo = historyInstance.canRedo();\nif (canRedo) {\n console.log('Redo operation can be performed');\n} else {\n console.log('Redo stack is empty, cannot redo');\n}\n```\n\n### History.canUndo()\n\nDetermines whether an **undo** operation can be performed. If there are records in the undo stack, it returns `true`; otherwise, it returns `false`.\n\n```typescript\ncanUndo(): boolean;\n```\n\n**Example:**\n\n```typescript\nconst canUndo = historyInstance.canUndo();\nif (canUndo) {\n console.log('Undo operation can be performed');\n} else {\n console.log('Undo stack is empty, cannot undo');\n}\n```\n\n### History.clear()\n\nClears the history records, including the undo and redo stacks.\n\n```typescript\nclear(): void;\n```\n\n**Example:**\n\n```typescript\nhistoryInstance.clear();\nconsole.log('History records cleared');\n```\n\n### History.on()\n\nListens to history events, allowing users to execute custom logic when specific events occur.\n\n```typescript\non(event: Loosen
- `hover`: Triggered when the mouse enters the legend item
- `click`: Triggered when the mouse clicks the legend item | `hover` \\| `click` | `hover` | |\n| position | Relative position of the legend on the canvas, [optional values](#cardinalplacement) | [CardinalPlacement](#cardinalplacement) | `bottom` | |\n| container | Container to which the legend is mounted, if not provided, it is mounted to the container where the Graph is located | HTMLElement \\| string | - | |\n| className | Legend canvas class name, not effective when an external container is passed | string | - | |\n| containerStyle | Style of the legend container, not effective when an external container is passed | [CSSStyleDeclaration](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration) | - | |\n| nodeField | Node classification identifier | string \\| (item: ElementDatum) => string | - | |\n| edgeField | Edge classification identifier | string \\| (item: ElementDatum) => string | - | |\n| comboField | Combo classification identifier | string \\| (item: ElementDatum) => string | - | |\n| orientation | Layout direction of legend items:
- `horizontal`: Horizontal direction
- `vertical`: Vertical direction | `horizontal` \\| `vertical` | 'horizontal' | |\n| layout | Layout method:
- `flex`: Flexible layout
- `grid`: Grid layout | `flex` \\| `grid` | `flex` | |\n| showTitle | Whether to display the title | boolean | false |\n| titleText | Title content | string | \"\" |\n| x | Relative horizontal position of the legend on the canvas, higher priority than position | number | - | |\n| y | Relative vertical position of the legend on the canvas, higher priority than position | number | - | |\n| width | Width of the legend | number | 240 | |\n| height | Height of the legend | number | 160 | |\n| itemSpacing | Spacing between the text of the legend item and the corresponding marker | number | 4 | |\n| rowPadding | Spacing between each row in the legend | number | 10 | |\n| colPadding | Spacing between each column in the legend | number | 10 | |\n| itemMarkerSize | Size of the legend item marker | number | 16 | |\n| itemLabelFontSize | Font size of the legend item text | number | 16 | |\n| gridCol | Maximum number of columns allowed for legend items when width permits | number | - | |\n| gridRow | Maximum number of rows allowed for legend items when height permits | number | - | |\n\n### CardinalPlacement\n\nThe `position` property supports the following values:\n\n- `'top-left'`: Top left corner\n- `'top-right'`: Top right corner\n- `'bottom-left'`: Bottom left corner\n- `'bottom-right'`: Bottom right corner\n- `'left-top'`: Left side near the top\n- `'left-bottom'`: Left side near the bottom\n- `'right-top'`: Right side near the top\n- `'right-bottom'`: Right side near the bottom\n\n## Code Examples\n\n### Basic Legend\n\n```js\nconst data = {\n nodes: [\n { id: 'node-1', type: 'circle', data: { cluster: 'node-type1' } },\n { id: 'node-2', type: 'rect', data: { cluster: 'node-type2' } },\n ],\n edges: [{ source: 'node-1', target: 'node-2', data: { cluster: 'edge-type1' } }],\n};\n\nconst graph = new Graph({\n // Other configurations...\n plugins: [\n {\n type: 'legend', // Plugin type is legend\n nodeField: 'cluster', // Array field name for node grouping\n edgeField: 'cluster', // Array field name for edge grouping\n },\n ],\n});\n```\n\n### Custom Legend Position\n\n```js\nconst data = {\n nodes: [\n { id: 'node-1', type: 'circle', data: { cluster: 'node-type1' } },\n { id: 'node-2', type: 'rect', data: { cluster: 'node-type2' } },\n ],\n edges: [{ source: 'node-1', target: 'node-2', data: { cluster: 'edge-type1' } }],\n};\n\nconst graph = new Graph({\n data,\n // Other configurations...\n plugins: [\n {\n type: 'legend',\n nodeField: 'cluster',\n edgeField: 'cluster',\n // You can quickly specify the position through position\n // position: \"top-left\",\n // Or you can more flexibly control the position of the legend through x, y\n x: 20,\n y: 20,\n },\n ],\n});\n```\n\n### Custom Legend Item Layout\n\n```js\nconst data = {\n nodes: [\n { id: 'node-1', type: 'circle', data: { cluster: 'node-type1' } },\n { id: 'node-2', type: 'rect', data: { cluster: 'node-type2' } },\n ],\n edges: [{ source: 'node-1', target: 'node-2', data: { cluster: 'edge-type1' } }],\n};\n\nconst graph = new Graph({\n data,\n // Other configurations...\n plugins: [\n {\n type: 'legend',\n nodeField: 'cluster',\n edgeField: 'cluster',\n layout: 'flex',\n // Control to display only one row\n gridRow: 1,\n // Control to display 10 columns in one row, a page button will be displayed when the column width is insufficient\n gridCol: 10,\n },\n ],\n});\n```\n\n## Common Issues\n\n### 1. Setting orientation is ineffective?\n\n`orientation` mainly controls the direction of the layout, and the specific display of **multiple columns in one row** or **multiple rows in one column** is mainly controlled by `gridRow` and `gridCol`. For example, if you want it to look like a vertical legend item, you can configure it like this:\n\n```js\n plugins: [\n {\n type: 'legend',\n nodeField: 'cluster',\n edgeField: 'cluster',\n layout: \"flex\",\n // Control to display 1 column in one row\n gridCol:1,\n // Control to display up to 20 rows\n gridRow: 20,\n },\n ],\n```\n\nThis way, it becomes a legend with only one column, conforming to the visual vertical arrangement.\n\n### 2. How to dynamically update the toolbar?\n\nYou can use the `updatePlugin` method to dynamically update the toolbar:\n\n```js\nconst graph = new Graph({\n data,\n // Other configurations...\n plugins: [\n {\n type: 'legend',\n key: 'my-legend',\n nodeField: 'cluster',\n edgeField: 'cluster',\n },\n ],\n});\n\n// Update legend position\ngraph.updatePlugin({\n key: 'my-legend',\n position: 'bottom-right',\n});\n```\n\n## Practical Cases\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst data = {\n nodes: [\n { id: 'node-1', type: 'circle', data: { cluster: 'node-type1' } },\n { id: 'node-2', type: 'rect', data: { cluster: 'node-type2' } },\n { id: 'node-3', type: 'triangle', data: { cluster: 'node-type3' } },\n { id: 'node-4', type: 'diamond', data: { cluster: 'node-type4' } },\n ],\n edges: [\n { source: 'node-1', target: 'node-2', data: { cluster: 'edge-type1' } },\n { source: 'node-1', target: 'node-4', data: { cluster: 'edge-type2' } },\n { source: 'node-3', target: 'node-4' },\n { source: 'node-2', target: 'node-4', data: { cluster: 'edge-type3' } },\n ],\n};\n\nconst graph = new Graph({\n container: 'container',\n data,\n node: {\n style: { size: 32 },\n palette: {\n field: 'cluster',\n },\n },\n layout: {\n type: 'force',\n },\n plugins: [\n {\n type: 'legend',\n nodeField: 'cluster',\n edgeField: 'cluster',\n },\n ],\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/plugin/Legend.zh.md":"---\ntitle: 图例 Legend\norder: 11\n---\n\n## 概述\n\n图例（Legend）插件用于展示图中元素的分类信息，支持节点、边、组合的分类信息展示。通过图例，用户可以快速感知到图中相关元素的分类信息，也可以通过点击对应图例项来快速定位到元素，提高用户的浏览效率。\n\n## 使用场景\n\n这一插件主要用于：\n\n- 通过图例快速对元素进行分类\n- 通过图例快速高亮定位到对应元素\n\n## 基本用法\n\n```js\nconst data = {\n nodes: [\n { id: 'node-1', type: 'circle', data: { cluster: 'node-type1' } },\n { id: 'node-2', type: 'rect', data: { cluster: 'node-type2' } },\n ],\n edges: [{ source: 'node-1', target: 'node-2', data: { cluster: 'edge-type1' } }],\n};\n\nconst graph = new Graph({\n data,\n // 其他配置...\n plugins: [\n {\n type: 'legend', // 插件类型为 legend\n nodeField: 'cluster', // 用于节点分组的数组字段名称\n edgeField: 'cluster', // 用于边分组的数组字段名称\n },\n ],\n});\n```\n\n## 配置项\n\n| 属性 | 描述 | 类型 | 默认值 | 必选 |\n| ----------------- | ----------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ------------ | ---- |\n| type | 插件类型 | string | `legend` | ✓ |\n| key | 插件唯一标识符，用于后续更新 | string | - | |\n| trigger | 图例项触发对应项高亮的方式：
- `hover`：鼠标移入图例项时触发
- `click`：鼠标点击图例项时触发 | `hover` \\| `click` | `hover` | |\n| position | 图例在画布中的相对位置，[可选值](#cardinalplacement) | [CardinalPlacement](#cardinalplacement) | `bottom` | |\n| container | 图例挂载的容器，无则挂载到 Graph 所在容器 | HTMLElement \\| string | - | |\n| className | 图例画布类名，传入外置容器时不生效 | string | - | |\n| containerStyle | 图例的容器样式，传入外置容器时不生效 | [CSSStyleDeclaration](https://developer.mozilla.org/zh-CN/docs/Web/API/CSSStyleDeclaration) | - | |\n| nodeField | 节点分类标识 | string \\| (item: ElementDatum) => string | - | |\n| edgeField | 边分类标识 | string \\| (item: ElementDatum) => string | - | |\n| comboField | 组合分类标识 | string \\| (item: ElementDatum) => string | - | |\n| orientation | 图例项的布局方向：
- `horizontal`：水平方向
- `vertical`：垂直方向 | `horizontal` \\| `vertical` | 'horizontal' | |\n| layout | 布局方式：
- `flex`：弹性布局
- `grid`：网格布局 | `flex` \\| `grid` | `flex` | |\n| showTitle | 是否显示标题 | boolean | false |\n| titleText | 标题内容 | string | \"\" |\n| x | 图例在画布中的相对的横向位置，优先级高于position | number | - | |\n| y | 图例在画布中的相对的纵向位置，优先级高于position | number | - | |\n| width | 图例的宽度 | number | 240 | |\n| height | 图例的高度 | number | 160 | |\n| itemSpacing | 图例项的文本和对应标记之间的间距 | number | 4 | |\n| rowPadding | 图例中每行之间的间距 | number | 10 | |\n| colPadding | 图例中每列之间的间距 | number | 10 | |\n| itemMarkerSize | 图例项标记的大小 | number | 16 | |\n| itemLabelFontSize | 图例项文本的字体大小 | number | 16 | |\n| gridCol | 图例项在宽度允许情况下的最大列数 | number | - | |\n| gridRow | 图例项在高度允许情况下的最大行数 | number | - | |\n\n### CardinalPlacement\n\n`position` 属性支持以下值：\n\n- `'top-left'`：左上角\n- `'top-right'`：右上角\n- `'bottom-left'`：左下角\n- `'bottom-right'`：右下角\n- `'left-top'`：左侧靠上\n- `'left-bottom'`：左侧靠下\n- `'right-top'`：右侧靠上\n- `'right-bottom'`：右侧靠下\n\n## 代码示例\n\n### 基础图例\n\n```js\nconst data = {\n nodes: [\n { id: 'node-1', type: 'circle', data: { cluster: 'node-type1' } },\n { id: 'node-2', type: 'rect', data: { cluster: 'node-type2' } },\n ],\n edges: [{ source: 'node-1', target: 'node-2', data: { cluster: 'edge-type1' } }],\n};\n\nconst graph = new Graph({\n // 其他配置...\n plugins: [\n {\n type: 'legend', // 插件类型为 legend\n nodeField: 'cluster', // 用于节点分组的数组字段名称\n edgeField: 'cluster', // 用于边分组的数组字段名称\n },\n ],\n});\n```\n\n### 自定义图例位置\n\n```js\nconst data = {\n nodes: [\n { id: 'node-1', type: 'circle', data: { cluster: 'node-type1' } },\n { id: 'node-2', type: 'rect', data: { cluster: 'node-type2' } },\n ],\n edges: [{ source: 'node-1', target: 'node-2', data: { cluster: 'edge-type1' } }],\n};\n\nconst graph = new Graph({\n data,\n // 其他配置...\n plugins: [\n {\n type: 'legend',\n nodeField: 'cluster',\n edgeField: 'cluster',\n // 可以通过 position 快捷的来指定位置\n // position: \"top-left\",\n // 也可以通过x,y来更加灵活的控制图例的位置\n x: 20,\n y: 20,\n },\n ],\n});\n```\n\n### 自定义图例项布局\n\n```js\nconst data = {\n nodes: [\n { id: 'node-1', type: 'circle', data: { cluster: 'node-type1' } },\n { id: 'node-2', type: 'rect', data: { cluster: 'node-type2' } },\n ],\n edges: [{ source: 'node-1', target: 'node-2', data: { cluster: 'edge-type1' } }],\n};\n\nconst graph = new Graph({\n data,\n // 其他配置...\n plugins: [\n {\n type: 'legend',\n nodeField: 'cluster',\n edgeField: 'cluster',\n layout: 'flex',\n // 控制只显示一行\n gridRow: 1,\n // 控制一行显示10列，当列宽不足时会显示翻页按钮\n gridCol: 10,\n },\n ],\n});\n```\n\n## 常见问题\n\n### 1. 设置了 orientation 无效？\n\n`orientation`主要控制布局的方向，具体展示**一行多列**还是**一列多行**，主要通过 `gridRow` 以及`gridCol`来控制，例如想要看起来像是竖向的图例项，则可以通过这样配置:\n\n```js\n plugins: [\n {\n type: 'legend',\n nodeField: 'cluster',\n edgeField: 'cluster',\n layout: \"flex\",\n // 控制一行显示1列\n gridCol:1,\n // 控制显示最多20行\n gridRow: 20,\n },\n ],\n```\n\n这样就变成了只有一列的图例，符合视觉上的竖向排列。\n\n### 2. 如何动态更新工具栏？\n\n可以使用 `updatePlugin` 方法动态更新工具栏：\n\n```js\nconst graph = new Graph({\n data,\n // 其他配置...\n plugins: [\n {\n type: 'legend',\n key: 'my-legend',\n nodeField: 'cluster',\n edgeField: 'cluster',\n },\n ],\n});\n\n// 更新图例位置\ngraph.updatePlugin({\n key: 'my-legend',\n position: 'bottom-right',\n});\n```\n\n## 实际案例\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst data = {\n nodes: [\n { id: 'node-1', type: 'circle', data: { cluster: 'node-type1' } },\n { id: 'node-2', type: 'rect', data: { cluster: 'node-type2' } },\n { id: 'node-3', type: 'triangle', data: { cluster: 'node-type3' } },\n { id: 'node-4', type: 'diamond', data: { cluster: 'node-type4' } },\n ],\n edges: [\n { source: 'node-1', target: 'node-2', data: { cluster: 'edge-type1' } },\n { source: 'node-1', target: 'node-4', data: { cluster: 'edge-type2' } },\n { source: 'node-3', target: 'node-4' },\n { source: 'node-2', target: 'node-4', data: { cluster: 'edge-type3' } },\n ],\n};\n\nconst graph = new Graph({\n container: 'container',\n data,\n node: {\n style: { size: 32 },\n palette: {\n field: 'cluster',\n },\n },\n layout: {\n type: 'force',\n },\n plugins: [\n {\n type: 'legend',\n nodeField: 'cluster',\n edgeField: 'cluster',\n },\n ],\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/plugin/Minimap.en.md":"---\ntitle: Minimap\norder: 12\n---\n\n## Overview\n\nThe main function of the Minimap is to provide users with an overall layout of the current graph content in the form of a thumbnail, allowing quick positioning of graph operation locations.\n\n**⚠️ Note**, The Minimap plugin is currently incompatible with React Node rendering mechanism. When using Minimap functionality, it is recommended to implement node rendering through [built-in nodes](/en/manual/element/node/overview) or [custom nodes](/en/manual/element/node/custom-node).\n\n## Usage Scenarios\n\nThe Minimap plugin is mainly applicable to the following scenarios:\n\n- Providing a global view for quick area positioning\n- Navigation and interaction assistance, allowing quick positioning to the target location through the minimap\n\n## Basic Usage\n\nBelow is a simple example of initializing the Minimap plugin:\n\n```js\nconst graph = new Graph({\n plugins: [\n {\n key: 'minimap',\n type: 'minimap',\n size: [240, 160],\n },\n ],\n});\n```\n\n## Online Experience\n\n\n\n## Configuration Options\n\n| Property | Description | Type | Default Value | Required |\n| -------------- | ----------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------- | -------- |\n| type | Plugin type | string | `minimap` | ✓ |\n| key | Unique identifier for the plugin, used for subsequent updates | string | - | |\n| className | Class name of the thumbnail canvas, not effective when an external container is passed | string | | |\n| container | Container to which the thumbnail is mounted, if not provided, it is mounted to the container where the Graph is located | HTMLElement \\| string | | |\n| containerStyle | Style of the thumbnail container, not effective when an external container is passed | Partial\\
- `'key'`: uses the key shape of the element as the reference shape
- `Function`: receives the element and returns a shape | string \\| ((node: Node) => DisplayObject) | `'key'` | |\n| verticalLineStyle | Vertical snapline style | BaseStyleProps | `{ stroke: '#1783FF' }` | |\n| horizontalLineStyle | Horizontal snapline style | BaseStyleProps | `{ stroke: '#1783FF' }` | |\n| filter | Filter nodes that do not need to participate in alignment | (node: Node) => boolean | `() => true` | |\n\n### shape\n\nThe `shape` property specifies the reference shape for elements and supports the following configurations:\n\n```js\n// Use the key shape as reference\n{\n type: 'snapline',\n shape: 'key'\n}\n\n// Use custom function to return reference shape\n{\n type: 'snapline',\n shape: (node) => {\n return node.getShape('custom-shape');\n }\n}\n```\n\n### Snapline Style Configuration\n\n| Property | Description | Type | Default |\n| -------------- | ----------------------- | ---------------------------------------- | ----------- |\n| stroke | Line color | string \\| Pattern \\| null | `'#1783FF'` |\n| opacity | Overall opacity | number \\| string | 1 |\n| strokeOpacity | Stroke opacity | number \\| string | 1 |\n| lineWidth | Line width | number \\| string | 1 |\n| lineCap | Line end style | `'butt'` \\| `'round'` \\| `'square'` | `'butt'` |\n| lineJoin | Line join style | `'miter'` \\| `'round'` \\| `'bevel'` | `'miter'` |\n| lineDash | Dash line configuration | number \\| string \\| (string \\| number)[] | - |\n| lineDashOffset | Dash line offset | number | 0 |\n| shadowBlur | Shadow blur | number | 0 |\n| shadowColor | Shadow color | string | - |\n| shadowOffsetX | Shadow X offset | number | 0 |\n| shadowOffsetY | Shadow Y offset | number | 0 |\n| cursor | Mouse cursor style | string | `'default'` |\n| zIndex | Rendering level | number | 0 |\n\nExample configuration:\n\n```js\n{\n type: 'snapline',\n horizontalLineStyle: {\n stroke: '#F08F56',\n strokeOpacity: 0.8,\n lineWidth: 2,\n lineDash: [4, 4],\n lineDashOffset: 0,\n opacity: 1,\n cursor: 'move',\n },\n verticalLineStyle: {\n stroke: '#17C76F',\n strokeOpacity: 0.8,\n lineWidth: 2,\n lineDash: [4, 4],\n lineDashOffset: 0,\n opacity: 1,\n cursor: 'move',\n },\n}\n```\n\n## Code Examples\n\n### Basic Snapline\n\nThe simplest usage:\n\n```js\nconst graph = new Graph({\n plugins: ['snapline'],\n});\n```\n\n### Custom Configuration\n\nYou can customize the snapline behavior according to your needs:\n\n```js\nconst graph = new Graph({\n plugins: [\n {\n type: 'snapline',\n tolerance: 8, // Larger snap range\n offset: 30, // Longer extension lines\n horizontalLineStyle: {\n stroke: '#1890ff',\n lineWidth: 2,\n },\n filter: (node) => node.id !== 'node-0', // Filter nodes by id, exclude from alignment\n },\n ],\n});\n```\n\n## Live Example\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst data = {\n nodes: [{ id: 'node-0' }, { id: 'node-1' }, { id: 'node-2' }, { id: 'node-3' }, { id: 'node-4' }, { id: 'node-5' }],\n edges: [\n { source: 'node-0', target: 'node-1' },\n { source: 'node-0', target: 'node-2' },\n { source: 'node-0', target: 'node-3' },\n { source: 'node-0', target: 'node-4' },\n { source: 'node-1', target: 'node-0' },\n { source: 'node-2', target: 'node-0' },\n { source: 'node-3', target: 'node-0' },\n { source: 'node-4', target: 'node-0' },\n { source: 'node-5', target: 'node-0' },\n ],\n};\n\nconst graph = new Graph({\n container: 'container',\n data,\n layout: { type: 'grid' },\n behaviors: ['drag-canvas', 'drag-element'],\n plugins: [\n {\n type: 'snapline',\n key: 'snapline',\n verticalLineStyle: { stroke: '#F08F56', lineWidth: 2 },\n horizontalLineStyle: { stroke: '#17C76F', lineWidth: 2 },\n autoSnap: false,\n },\n ],\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/plugin/Snapline.zh.md":"---\ntitle: 对齐线 Snapline\norder: 13\n---\n\n## 概述\n\n对齐线插件为画布提供智能对齐参考线，在移动节点时自动显示辅助线并支持自动吸附，帮助用户实现精确对齐，是图形编辑中提升效率和精确度的重要工具。\n\n## 使用场景\n\n对齐线插件主要适用于以下场景：\n\n- 手动调整节点位置时,需要与其他节点精确对齐\n- 拖拽移动多个节点时,保持它们之间的对齐关系\n- 制作规范的图形布局时,确保节点间距和位置的一致性\n- 通过自动吸附功能提高节点排版效率\n\n## 基本用法\n\n以下是一个简单的 Snapline 插件初始化示例：\n\n```js\nconst graph = new Graph({\n plugins: [\n {\n type: 'snapline',\n key: 'my-snapline', // 指定唯一标识符\n tolerance: 5, // 对齐吸附阈值\n offset: 20, // 对齐线延伸距离\n autoSnap: true, // 启用自动吸附\n },\n ],\n});\n```\n\n## 在线体验\n\n\n\n## 配置项\n\n| 属性 | 描述 | 类型 | 默认值 | 必选 |\n| ------------------- | ----------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | ---- |\n| type | 插件类型 | string | `'snapline'` | ✓ |\n| key | 插件唯一标识符 | string | - | |\n| tolerance | 对齐精度，即触发对齐的距离阈值 | number | 5 | |\n| offset | 对齐线头尾的延伸距离 | number | 20 | |\n| autoSnap | 是否启用自动吸附 | boolean | true | |\n| shape | 指定元素的参照图形：
- `'key'`: 使用元素的主图形作为参照图形
- `Function`: 传入函数时接收元素对象，返回一个图形 | string \\| ((node: Node) => DisplayObject) | `'key'` | |\n| verticalLineStyle | 垂直对齐线样式 | 支持[BaseStyleProps](/manual/element/shape/properties#baseshapestyle) 下的部分配置，详见[「对齐线样式配置项」](#对齐线样式配置) | `{ stroke: '#1783FF' }` | |\n| horizontalLineStyle | 水平对齐线样式 | 支持[BaseStyleProps](/manual/element/shape/properties#baseshapestyle) 下的部分配置，详见[「对齐线样式配置项」](#对齐线样式配置) | `{ stroke: '#1783FF' }` | |\n| filter | 过滤不需要参与对齐的节点 | (node: Node) => boolean | `() => true` | |\n\n### shape\n\n`shape` 属性用于指定元素的参照图形，支持以下配置方式：\n\n```js\n// 使用主图形作为参照\n{\n type: 'snapline',\n shape: 'key'\n}\n\n// 使用自定义函数返回参照图形\n{\n type: 'snapline',\n shape: (node) => {\n return node.getShape('custom-shape');\n }\n}\n```\n\n### 对齐线样式配置\n\n| 配置项 | 说明 | 类型 | 默认值 |\n| -------------- | --------------- | ---------------------------------------- | ----------- |\n| stroke | 线条颜色 | string \\| Pattern \\| null | `'#1783FF'` |\n| opacity | 整体透明度 | number \\| string | 1 |\n| strokeOpacity | 描边透明度 | number \\| string | 1 |\n| lineWidth | 线宽度 | number \\| string | 1 |\n| lineCap | 线段端点样式 | `'butt'` \\| `'round'` \\| `'square'` | `'butt'` |\n| lineJoin | 线段连接处样式 | `'miter'` \\| `'round'` \\| `'bevel'` | `'miter'` |\n| lineDash | 虚线配置 | number \\| string \\| (string \\| number)[] | - |\n| lineDashOffset | 虚线偏移量 | number | 0 |\n| shadowBlur | 阴影模糊程度 | number | 0 |\n| shadowColor | 阴影颜色 | string | - |\n| shadowOffsetX | 阴影 X 方向偏移 | number | 0 |\n| shadowOffsetY | 阴影 Y 方向偏移 | number | 0 |\n| cursor | 鼠标样式 | string | `'default'` |\n| zIndex | 渲染层级 | number | 0 |\n\n示例配置\n\n```js\n{\n type: 'snapline',\n horizontalLineStyle: {\n stroke: '#F08F56',\n strokeOpacity: 0.8,\n lineWidth: 2,\n lineDash: [4, 4],\n lineDashOffset: 0,\n opacity: 1,\n cursor: 'move',\n },\n verticalLineStyle: {\n stroke: '#17C76F',\n strokeOpacity: 0.8,\n lineWidth: 2,\n lineDash: [4, 4],\n lineDashOffset: 0,\n opacity: 1,\n cursor: 'move',\n },\n}\n```\n\n## 代码示例\n\n### 基础对齐线\n\n最简单的使用方式：\n\n```js\nconst graph = new Graph({\n plugins: ['snapline'],\n});\n```\n\n### 自定义配置\n\n可以根据需要自定义对齐线的行为：\n\n```js\nconst graph = new Graph({\n plugins: [\n {\n type: 'snapline',\n tolerance: 8, // 更大的吸附范围\n offset: 30, // 更长的延伸线\n horizontalLineStyle: {\n stroke: '#1890ff',\n lineWidth: 2,\n },\n filter: (node) => node.id !== 'node-0', // 根据id过滤节点，不参与对齐\n },\n ],\n});\n```\n\n## 实际案例\n\n```js | ob { inject: true }\nimport { Graph } from '@antv/g6';\n\nconst data = {\n nodes: [{ id: 'node-0' }, { id: 'node-1' }, { id: 'node-2' }, { id: 'node-3' }, { id: 'node-4' }, { id: 'node-5' }],\n edges: [\n { source: 'node-0', target: 'node-1' },\n { source: 'node-0', target: 'node-2' },\n { source: 'node-0', target: 'node-3' },\n { source: 'node-0', target: 'node-4' },\n { source: 'node-1', target: 'node-0' },\n { source: 'node-2', target: 'node-0' },\n { source: 'node-3', target: 'node-0' },\n { source: 'node-4', target: 'node-0' },\n { source: 'node-5', target: 'node-0' },\n ],\n};\n\nconst graph = new Graph({\n container: 'container',\n data,\n layout: { type: 'grid' },\n behaviors: ['drag-canvas', 'drag-element'],\n plugins: [\n {\n type: 'snapline',\n key: 'snapline',\n verticalLineStyle: { stroke: '#F08F56', lineWidth: 2 },\n horizontalLineStyle: { stroke: '#17C76F', lineWidth: 2 },\n autoSnap: false,\n },\n ],\n});\n\ngraph.render();\n```\n","packages/site/docs/manual/plugin/Timebar.en.md":"---\ntitle: Timebar\norder: 14\n---\n\n## Overview\n\nThe Timebar plugin is an important tool for exploring time-series data. It can display the time distribution of data in the form of a timeline or trend chart, and supports interactions such as time interval filtering and dynamic playback, helping users better understand the changes in data over time.\n\n## Use Cases\n\n- Need to display and analyze the time distribution of time-series data\n- Need to filter and explore graph data through the time dimension\n- Need to dynamically display the process of data changing over time\n\n## Basic Usage\n\nBelow is a simple example of initializing the Timebar plugin:\n\n```js\nconst graph = new Graph({\n plugins: [\n {\n type: 'timebar',\n data: timeData, // Time data\n width: 450, // Timebar width\n height: 60, // Timebar height\n position: 'bottom', // Position\n loop: false, // Whether to loop playback\n },\n ],\n});\n```\n\n## Online Experience\n\n\n\n## Configuration Options\n\n| Property | Description | Type | Default Value | Required |\n| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------- | ------------- | -------- |\n| type | Plugin type | string | `timebar` | ✓ |\n| key | Unique identifier for the plugin, can be used to get the plugin instance or update plugin options | string | - | |\n| className | Additional class name for the toolbar DOM | string | `g6-timebar` | |\n| x | X position (position will be invalid if set) | number | - | |\n| y | Y position (position will be invalid if set) | number | - | |\n| width | Timebar width | number | 450 | |\n| height | Timebar height | number | 60 | |\n| position | Timebar position | `bottom` \\| `top` | `bottom` | |\n| padding | Padding | number \\| number[] | 10 | |\n| data | Time data | number[] \\| { time: number; value: number }[] | - | ✓ |\n| timebarType | Timebar display type | `time` \\| `chart` | `time` | |\n| elementTypes | Filter element types | (`node` \\| `edge` \\| `combo`)[] | [`node`] | |\n| mode | Control element filtering method, supports the following two configurations:
- `modify`: filter by modifying graph data
- `visibility`: filter by modifying element visibility | `modify` \\| `visibility` | `modify` | |\n| values | Current time value | number \\| [number, number] \\| Date \\| [Date, Date] | - | |\n| loop | Whether to loop playback | boolean | false | |\n| getTime | Method to get element time | (datum: ElementDatum) => number | - | |\n| labelFormatter | Custom time formatting in chart mode | (time: number \\| Date) => string | - | |\n| onChange | Callback when the time interval changes | (values: number \\| [number, number]) => void | - | |\n| onReset | Callback when reset | () => void | - | |\n| onSpeedChange | Callback when playback speed changes | (speed: number) => void | - | |\n| onPlay | Callback when playback starts | () => void | - | |\n| onPause | Callback when paused | () => void | - | |\n| onBackward | Callback when moving backward | () => void | - | |\n| onForward | Callback when moving forward | () => void | - | |\n\n### timebarType\n\nThe `timebarType` property is used to control the display type of the timebar, supporting the following two configurations:\n\n- `time`: Displayed as a timeline, refer to [Time Mode Example](/examples/plugin/timebar/#timer)\n- `chart`: Displayed as a trend chart, at this time the `data` configuration item under `timebar` needs to pass an additional `value` field as chart data, refer to [Chart Mode Example](/examples/plugin/timebar/#chart)\n\n## Code Examples\n\n### Basic Usage\n\nThe simplest configuration method:\n\n```js\nconst graph = new Graph({\n layout: { type: 'grid', cols: 5 },\n plugins: [\n {\n type: 'timebar',\n data: [\n {\n time: new Date('2023-08-01').getTime(),\n value: 5,\n },\n {\n time: new Date('2023-08-02').getTime(),\n value: 10,\n },\n {\n time: new Date('2023-08-03').getTime(),\n value: 15,\n },\n ],\n },\n ],\n data: {\n nodes: [\n {\n id: 'node1',\n label: 'Node 1',\n // By default, elementTypes=['node'], so nodes need to set data.timestamp to display sequentially according to the timeline\n data: {\n timestamp: new Date('2023-08-01').getTime(),\n },\n },\n {\n id: 'node2',\n label: 'Node 2',\n data: {\n timestamp: new Date('2023-08-02').getTime(),\n },\n },\n {\n id: 'node3',\n label: 'Node 3',\n data: {\n timestamp: new Date('2023-08-03').getTime(),\n },\n },\n ],\n edges: [\n {\n id: 'edge1',\n source: 'node1',\n target: 'node2',\n // Scenario 1: By default, elementTypes = ['node']\n // - Edges do not need to set data.timestamp, the display/hide of edges depends entirely on whether the two connected nodes are visible\n\n // Scenario 2: If elementTypes includes 'edge', for example, elementTypes = ['node', 'edge']\n // - At this time, edges must set data.timestamp, and the display of edges is controlled by it\n // data: {\n // timestamp: new Date('2023-08-01').getTime()\n // }\n },\n {\n id: 'edge2',\n source: 'node2',\n target: 'node3',\n },\n {\n id: 'edge3',\n source: 'node3',\n target: 'node1',\n },\n ],\n },\n});\n```\n\nThe effect is as follows:\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 600,\n height: 400,\n width: 600,\n height: 400,\n layout: { type: 'grid', cols: 5 },\n plugins: [\n {\n type: 'timebar',\n data: [\n {\n time: new Date('2023-08-01').getTime(),\n value: 5,\n },\n {\n time: new Date('2023-08-02').getTime(),\n value: 10,\n },\n {\n time: new Date('2023-08-03').getTime(),\n value: 15,\n },\n ],\n },\n ],\n data: {\n nodes: [\n {\n id: 'node1',\n label: 'Node 1',\n data: {\n timestamp: new Date('2023-08-01').getTime(),\n },\n },\n {\n id: 'node2',\n label: 'Node 2',\n data: {\n timestamp: new Date('2023-08-02').getTime(),\n },\n },\n {\n id: 'node3',\n label: 'Node 3',\n data: {\n timestamp: new Date('2023-08-03').getTime(),\n },\n },\n ],\n edges: [\n {\n id: 'edge1',\n source: 'node1',\n target: 'node2',\n },\n {\n id: 'edge2',\n source: 'node2',\n target: 'node3',\n },\n {\n id: 'edge3',\n source: 'node3',\n target: 'node1',\n },\n ],\n },\n});\n\ngraph.render();\n```\n\n### Custom Styles\n\n`width`, `height`, `padding`, `className` can customize the display effect of the timebar, but note that `className` only acts on the outer DOM container and cannot affect the internal Canvas rendering content of the timebar (timeline, chart, play button, etc.).\n\n```js\nconst graph = new Graph({\n plugins: [\n {\n type: 'timebar',\n className: 'custom-timebar', // Note: Since the content is Canvas rendered, CSS styles cannot affect the internal content of the timebar\n width: 400, // Set timebar width\n height: 80, // Set timebar height\n padding: [20, 20, 10, 20], // Set padding [top, right, bottom, left]\n position: 'bottom', // Keep position at the bottom\n data: timeData,\n // labelFormatter: (time) => {\n // return new Date(time).toLocaleDateString();\n // }\n },\n ],\n});\n```\n\nCSS can only set the style of the timebar container:\n\n```css\n.custom-timebar {\n background-color: #f0f0f0;\n border: 1px solid #ccc;\n border-radius: 5px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n```\n\nThe effect is as follows:\n\n```js | ob { pin: false }\ncreateGraph(\n {\n data: () => {\n return {\n nodes: [\n {\n id: 'node1',\n style: { x: 100, y: 100, label: 'Node 1' },\n data: {\n timestamp: new Date('2023-08-01').getTime(),\n },\n },\n {\n id: 'node2',\n style: { x: 200, y: 100, label: 'Node 2' },\n data: {\n timestamp: new Date('2023-08-01').getTime() + 3600 * 24 * 1000,\n },\n },\n {\n id: 'node3',\n style: { x: 150, y: 200, label: 'Node 3' },\n data: {\n timestamp: new Date('2023-08-01').getTime() + 3600 * 24 * 1000 * 2,\n },\n },\n ],\n edges: [\n { id: 'edge1', source: 'node1', target: 'node2' },\n { id: 'edge2', source: 'node2', target: 'node3' },\n { id: 'edge3', source: 'node3', target: 'node1' },\n ],\n };\n },\n node: {\n style: {\n size: 20,\n label: true,\n },\n },\n edge: {\n style: {\n stroke: '#91d5ff',\n lineWidth: 1,\n },\n },\n plugins: [\n {\n type: 'timebar',\n className: 'custom-timebar',\n width: 400,\n height: 80,\n padding: [20, 20, 10, 20],\n position: 'bottom',\n data: [\n {\n time: new Date('2023-08-01').getTime(),\n value: 5,\n },\n {\n time: new Date('2023-08-01').getTime() + 3600 * 24 * 1000,\n value: 10,\n },\n {\n time: new Date('2023-08-01').getTime() + 3600 * 24 * 1000 * 2,\n value: 15,\n },\n ],\n labelFormatter: (time) => {\n return new Date(time).toLocaleDateString();\n },\n },\n ],\n },\n { width: 600, height: 400 },\n (gui, graph) => {\n gui?.hide();\n const style = document.createElement('style');\n style.innerHTML = `\n .custom-timebar {\n background-color: #f0f0f0;\n border: 1px solid #ccc;\n border-radius: 5px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n }\n `;\n document.head.appendChild(style);\n },\n);\n```\n\n## Real Cases\n\n- [Time Mode](/examples/plugin/timebar/#timer)\n- [Chart Mode](/examples/plugin/timebar/#chart)\n","packages/site/docs/manual/plugin/Timebar.zh.md":"---\ntitle: 时间条 Timebar\norder: 14\n---\n\n## 概述\n\n时间条插件是一个用于时序数据探索的重要工具，它能够通过时间轴或趋势图的形式展示数据的时间分布，并支持时间区间筛选、动态播放等交互方式，帮助用户更好地理解数据随时间的变化。\n\n## 使用场景\n\n- 需要展示和分析时序数据的时间分布\n- 需要通过时间维度筛选和探索图数据\n- 需要动态展示数据随时间变化的过程\n\n## 基本用法\n\n以下是一个简单的 Timebar 插件初始化示例：\n\n```js\nconst graph = new Graph({\n plugins: [\n {\n type: 'timebar',\n data: timeData, // 时间数据\n width: 450, // 时间条宽度\n height: 60, // 时间条高度\n position: 'bottom', // 位置\n loop: false, // 是否循环播放\n },\n ],\n});\n```\n\n## 在线体验\n\n\n\n## 配置项\n\n| 属性 | 描述 | 类型 | 默认值 | 必选 |\n| -------------- | ------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------- | ------------ | ---- |\n| type | 插件类型 | string | `timebar` | ✓ |\n| key | 插件的唯一标识，可用于获取插件实例或更新插件选项 | string | - | |\n| className | 给工具栏的 DOM 追加的类名 | string | `g6-timebar` | |\n| x | X 位置（设置后 position 会失效） | number | - | |\n| y | Y 位置（设置后 position 会失效） | number | - | |\n| width | 时间条宽度 | number | 450 | |\n| height | 时间条高度 | number | 60 | |\n| position | 时间条位置 | `bottom` \\| `top` | `bottom` | |\n| padding | 边距 | number \\| number[] | 10 | |\n| data | 时间数据 | number[] \\| { time: number; value: number }[] | - | ✓ |\n| timebarType | 时间条展示类型 | `time` \\| `chart` | `time` | |\n| elementTypes | 筛选元素类型 | (`node` \\| `edge` \\| `combo`)[] | [`node`] | |\n| mode | 控制元素的筛选方式，支持以下两种配置：
- `modify`：通过修改图数据进行筛选
- `visibility`：通过修改元素可见性进行筛选 | `modify` \\| `visibility` | `modify` | |\n| values | 当前时间值 | number \\| [number, number] \\| Date \\| [Date, Date] | - | |\n| loop | 是否循环播放 | boolean | false | |\n| getTime | 获取元素时间的方法 | (datum: ElementDatum) => number | - | |\n| labelFormatter | 图表模式下自定义时间格式化 | (time: number \\| Date) => string | - | |\n| onChange | 时间区间变化时的回调 | (values: number \\| [number, number]) => void | - | |\n| onReset | 重置时的回调 | () => void | - | |\n| onSpeedChange | 播放速度变化时的回调 | (speed: number) => void | - | |\n| onPlay | 开始播放时的回调 | () => void | - | |\n| onPause | 暂停时的回调 | () => void | - | |\n| onBackward | 后退时的回调 | () => void | - | |\n| onForward | 前进时的回调 | () => void | - | |\n\n### timebarType\n\n`timebarType` 属性用于控制时间条的展示类型，支持以下两种配置：\n\n- `time`：显示为时间轴形式，参考 [时间模式示例](/examples/plugin/timebar/#timer)\n- `chart`：显示为趋势图形式，此时`timebar`下的`data`配置项，每个数组项需要额外传入 `value` 字段作为图表数据，参考 [图表模式示例](/examples/plugin/timebar/#chart)\n\n## 代码示例\n\n### 基础用法\n\n最简单的配置方式：\n\n```js\nconst graph = new Graph({\n layout: { type: 'grid', cols: 5 },\n plugins: [\n {\n type: 'timebar',\n data: [\n {\n time: new Date('2023-08-01').getTime(),\n value: 5,\n },\n {\n time: new Date('2023-08-02').getTime(),\n value: 10,\n },\n {\n time: new Date('2023-08-03').getTime(),\n value: 15,\n },\n ],\n },\n ],\n data: {\n nodes: [\n {\n id: 'node1',\n label: '节点1',\n // 默认情况下 elementTypes=['node']，所以节点需要设置 data.timestamp，才能按照时间轴内的时间依次展示\n data: {\n timestamp: new Date('2023-08-01').getTime(),\n },\n },\n {\n id: 'node2',\n label: '节点2',\n data: {\n timestamp: new Date('2023-08-02').getTime(),\n },\n },\n {\n id: 'node3',\n label: '节点3',\n data: {\n timestamp: new Date('2023-08-03').getTime(),\n },\n },\n ],\n edges: [\n {\n id: 'edge1',\n source: 'node1',\n target: 'node2',\n // 场景一：默认情况 elementTypes = ['node']\n // - 边不需要设置 data.timestamp，边的显示/隐藏完全取决于其连接的两个节点是否可见\n\n // 场景二：如果elementTypes包含了'edge'，比如 elementTypes = ['node', 'edge']\n // - 此时必须为边设置 data.timestamp，边的显示受其控制\n // data: {\n // timestamp: new Date('2023-08-01').getTime()\n // }\n },\n {\n id: 'edge2',\n source: 'node2',\n target: 'node3',\n },\n {\n id: 'edge3',\n source: 'node3',\n target: 'node1',\n },\n ],\n },\n});\n```\n\n效果如下：\n\n```js | ob { pin: false, inject: true }\nimport { Graph } from '@antv/g6';\n\nconst graph = new Graph({\n container: 'container',\n width: 600,\n height: 400,\n width: 600,\n height: 400,\n layout: { type: 'grid', cols: 5 },\n plugins: [\n {\n type: 'timebar',\n data: [\n {\n time: new Date('2023-08-01').getTime(),\n value: 5,\n },\n {\n time: new Date('2023-08-02').getTime(),\n value: 10,\n },\n {\n time: new Date('2023-08-03').getTime(),\n value: 15,\n },\n ],\n },\n ],\n data: {\n nodes: [\n {\n id: 'node1',\n label: '节点1',\n data: {\n timestamp: new Date('2023-08-01').getTime(),\n },\n },\n {\n id: 'node2',\n label: '节点2',\n data: {\n timestamp: new Date('2023-08-02').getTime(),\n },\n },\n {\n id: 'node3',\n label: '节点3',\n data: {\n timestamp: new Date('2023-08-03').getTime(),\n },\n },\n ],\n edges: [\n {\n id: 'edge1',\n source: 'node1',\n target: 'node2',\n },\n {\n id: 'edge2',\n source: 'node2',\n target: 'node3',\n },\n {\n id: 'edge3',\n source: 'node3',\n target: 'node1',\n },\n ],\n },\n});\n\ngraph.render();\n```\n\n### 自定义样式\n\n`width`、`height`、`padding`、`className` 可自定义时间条的展示效果，但需要注意 `className` 仅作用于外层 DOM 容器，无法影响时间条内部的 Canvas 渲染内容（时间轴、图表、播放按钮等）。\n\n```js\nconst graph = new Graph({\n plugins: [\n {\n type: 'timebar',\n className: 'custom-timebar', // 注意：由于内容是 Canvas 渲染，CSS 样式无法影响到时间条的内部内容\n width: 400, // 设置时间条宽度\n height: 80, // 设置时间条高度\n padding: [20, 20, 10, 20], // 设置内边距 [上, 右, 下, 左]\n position: 'bottom', // 位置保持在底部\n data: timeData,\n // labelFormatter: (time) => {\n // return new Date(time).toLocaleDateString();\n // }\n },\n ],\n});\n```\n\n通过 CSS 只能设置时间条容器的样式：\n\n```css\n.custom-timebar {\n background-color: #f0f0f0;\n border: 1px solid #ccc;\n border-radius: 5px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n```\n\n效果如下：\n\n```js | ob { pin: false }\ncreateGraph(\n {\n data: () => {\n return {\n nodes: [\n {\n id: 'node1',\n style: { x: 100, y: 100, label: 'Node 1' },\n data: {\n timestamp: new Date('2023-08-01').getTime(),\n },\n },\n {\n id: 'node2',\n style: { x: 200, y: 100, label: 'Node 2' },\n data: {\n timestamp: new Date('2023-08-01').getTime() + 3600 * 24 * 1000,\n },\n },\n {\n id: 'node3',\n style: { x: 150, y: 200, label: 'Node 3' },\n data: {\n timestamp: new Date('2023-08-01').getTime() + 3600 * 24 * 1000 * 2,\n },\n },\n ],\n edges: [\n { id: 'edge1', source: 'node1', target: 'node2' },\n { id: 'edge2', source: 'node2', target: 'node3' },\n { id: 'edge3', source: 'node3', target: 'node1' },\n ],\n };\n },\n node: {\n style: {\n size: 20,\n label: true,\n },\n },\n edge: {\n style: {\n stroke: '#91d5ff',\n lineWidth: 1,\n },\n },\n plugins: [\n {\n type: 'timebar',\n className: 'custom-timebar',\n width: 400,\n height: 80,\n padding: [20, 20, 10, 20],\n position: 'bottom',\n data: [\n {\n time: new Date('2023-08-01').getTime(),\n value: 5,\n },\n {\n time: new Date('2023-08-01').getTime() + 3600 * 24 * 1000,\n value: 10,\n },\n {\n time: new Date('2023-08-01').getTime() + 3600 * 24 * 1000 * 2,\n value: 15,\n },\n ],\n labelFormatter: (time) => {\n return new Date(time).toLocaleDateString();\n },\n },\n ],\n },\n { width: 600, height: 400 },\n (gui, graph) => {\n gui?.hide();\n const style = document.createElement('style');\n style.innerHTML = `\n .custom-timebar {\n background-color: #f0f0f0;\n border: 1px solid #ccc;\n border-radius: 5px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n }\n `;\n document.head.appendChild(style);\n },\n);\n```\n\n## 实际案例\n\n- [时间模式](/examples/plugin/timebar/#timer)\n- [图表模式](/examples/plugin/timebar/#chart)\n","packages/site/docs/manual/plugin/Title.en.md":"---\ntitle: Title\norder: 15\n---\n\n## Overview\n\nTitle indicates the name of the image and conveys the brief content of the image.\n\n## Basic Usage\n\nThe following is a simple example of initializing the Title plugin:\n\n```js\nconst graph = new Graph({\n plugins: [\n {\n key: 'title',\n type: 'title',\n title: 'This is a title',\n subTitle: 'This is a subtitle',\n },\n ],\n});\n```\n\n## Configuration Options\n\n| Option | Description | Type | Default | Required |\n| --------- | ------------------------------------------------------------- | ----------------------------- | ------------ | -------- |\n| type | Plugin type | string | `title` | ✓ |\n| key | Unique identifier for the plugin, used for subsequent updates | string | - | |\n| title | title content [style config](#title) | `TitleStyle` | - | ✓ |\n| subtitle | subtitle content [style config](#subtitle) | `SubTitleStyle` | - | |\n| spacing | Vertical spacing between main title and subtitle | number | 8 | |\n| className | Class name of the title canvas | string | - | |\n| align | Graph title alignment | `left` \\| `center` \\| `right` | `left` | |\n| size | Height of the title plugin | number | 44 | |\n| padding | Padding | number \\| number[] | [16,24,0,24] | |\n\n### size\n\n\n ${item.data.name}\n
\n Connection Info
\n
\n Name: ${items[0].data?.name || 'Unnamed'}\n User Actions
\n \n ${item.data.name}\n
\n 连接信息
\n
\n 名称: ${items[0].data?.name || '未命名'}\n 用户操作
\n ![\"亮色主题\"](\"https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*SPCES62UzzAAAAAAAAAAAAAAemJ7AQ/original\")
查看亮色主题完整配置项
\n\n```js\nconst lightTheme = {\n background: '#ffffff',\n node: {\n palette: {\n type: 'group',\n color: [\n '#1783FF',\n '#00C9C9',\n '#F08F56',\n '#D580FF',\n '#7863FF',\n '#DB9D0D',\n '#60C42D',\n '#FF80CA',\n '#2491B3',\n '#17C76F',\n ],\n },\n style: {\n donutOpacity: 1,\n badgeBackgroundOpacity: 1,\n badgeFill: '#fff',\n badgeFontSize: 8,\n badgePadding: [0, 4],\n badgePalette: ['#7E92B5', '#F4664A', '#FFBE3A'],\n fill: '#1783ff',\n fillOpacity: 1,\n halo: false,\n iconFill: '#fff',\n iconOpacity: 1,\n labelBackground: false,\n labelBackgroundFill: '#ffffff',\n labelBackgroundLineWidth: 0,\n labelBackgroundOpacity: 0.75,\n labelFill: '#000000',\n labelFillOpacity: 0.85,\n labelLineHeight: 16,\n labelPadding: [0, 2],\n labelFontSize: 12,\n labelFontWeight: 400,\n labelOpacity: 1,\n labelOffsetY: 2,\n lineWidth: 0,\n portFill: '#1783ff',\n portLineWidth: 1,\n portStroke: '#000000',\n portStrokeOpacity: 0.65,\n size: 32,\n stroke: '#000000',\n strokeOpacity: 1,\n zIndex: 2,\n },\n state: {\n selected: {\n halo: true,\n haloLineWidth: 24,\n haloStrokeOpacity: 0.25,\n labelFontSize: 12,\n labelFontWeight: 'bold',\n lineWidth: 4,\n stroke: '#000000',\n },\n active: {\n halo: true,\n haloLineWidth: 12,\n haloStrokeOpacity: 0.15,\n },\n highlight: {\n labelFontWeight: 'bold',\n lineWidth: 4,\n stroke: '#000000',\n strokeOpacity: 0.85,\n },\n inactive: {\n badgeBackgroundOpacity: 0.25,\n donutOpacity: 0.25,\n fillOpacity: 0.25,\n iconOpacity: 0.85,\n labelFill: '#000000',\n labelFillOpacity: 0.25,\n strokeOpacity: 0.25,\n },\n disabled: {\n badgeBackgroundOpacity: 0.25,\n donutOpacity: 0.06,\n fill: '#1B324F',\n fillOpacity: 0.06,\n iconFill: '#1B324F',\n iconOpacity: 0.25,\n labelFill: '#000000',\n labelFillOpacity: 0.25,\n strokeOpacity: 0.06,\n },\n },\n animation: {\n enter: 'fade',\n exit: 'fade',\n show: 'fade',\n hide: 'fade',\n expand: 'node-expand',\n collapse: 'node-collapse',\n update: [{ fields: ['x', 'y', 'fill', 'stroke'] }],\n translate: [{ fields: ['x', 'y'] }],\n },\n },\n edge: {\n palette: {\n type: 'group',\n color: [\n '#99ADD1',\n '#1783FF',\n '#00C9C9',\n '#F08F56',\n '#D580FF',\n '#7863FF',\n '#DB9D0D',\n '#60C42D',\n '#FF80CA',\n '#2491B3',\n '#17C76F',\n ],\n },\n style: {\n badgeBackgroundFill: '#99ADD1',\n badgeFill: '#fff',\n badgeFontSize: 8,\n badgeOffsetX: 10,\n fillOpacity: 1,\n halo: false,\n haloLineWidth: 12,\n haloStrokeOpacity: 1,\n increasedLineWidthForHitTesting: 2,\n labelBackground: false,\n labelBackgroundFill: '#ffffff',\n labelBackgroundLineWidth: 0,\n labelBackgroundOpacity: 0.75,\n labelBackgroundPadding: [4, 4, 4, 4],\n labelFill: '#000000',\n labelFontSize: 12,\n labelFontWeight: 400,\n labelOpacity: 1,\n labelPlacement: 'center',\n labelTextBaseline: 'middle',\n lineWidth: 1,\n stroke: '#99ADD1',\n strokeOpacity: 1,\n zIndex: 1,\n },\n state: {\n selected: {\n halo: true,\n haloStrokeOpacity: 0.25,\n labelFontSize: 14,\n labelFontWeight: 'bold',\n lineWidth: 3,\n },\n active: {\n halo: true,\n haloStrokeOpacity: 0.15,\n },\n highlight: {\n labelFontWeight: 'bold',\n lineWidth: 3,\n },\n inactive: {\n stroke: '#1B324F',\n fillOpacity: 0.08,\n labelOpacity: 0.25,\n strokeOpacity: 0.08,\n badgeBackgroundOpacity: 0.25,\n },\n disabled: {\n stroke: '#d9d9d9',\n fillOpacity: 0.45,\n strokeOpacity: 0.45,\n labelOpacity: 0.25,\n badgeBackgroundOpacity: 0.45,\n },\n },\n animation: {\n enter: 'fade',\n exit: 'fade',\n expand: 'path-in',\n collapse: 'path-out',\n show: 'fade',\n hide: 'fade',\n update: [{ fields: ['sourceNode', 'targetNode'] }, { fields: ['stroke'], shape: 'key' }],\n translate: [{ fields: ['sourceNode', 'targetNode'] }],\n },\n },\n combo: {\n style: {\n collapsedMarkerFill: '#ffffff',\n collapsedMarkerFontSize: 12,\n collapsedMarkerFillOpacity: 1,\n collapsedSize: 32,\n collapsedFillOpacity: 1,\n fill: '#99ADD1',\n halo: false,\n haloLineWidth: 12,\n haloStroke: '#99ADD1',\n haloStrokeOpacity: 0.25,\n labelBackground: false,\n labelBackgroundFill: '#ffffff',\n labelBackgroundLineWidth: 0,\n labelBackgroundOpacity: 0.75,\n labelBackgroundPadding: [2, 4, 2, 4],\n labelFill: '#000000',\n labelFontSize: 12,\n labelFontWeight: 400,\n labelOpacity: 1,\n lineDash: 0,\n lineWidth: 1,\n fillOpacity: 0.04,\n strokeOpacity: 1,\n padding: 10,\n stroke: '#99ADD1',\n },\n state: {\n selected: {\n halo: true,\n labelFontSize: 14,\n labelFontWeight: 700,\n lineWidth: 4,\n },\n active: {\n halo: true,\n },\n highlight: {\n labelFontWeight: 700,\n lineWidth: 4,\n },\n inactive: {\n fillOpacity: 0.65,\n labelOpacity: 0.25,\n strokeOpacity: 0.65,\n },\n disabled: {\n fill: '#d9d9d9',\n fillOpacity: 0.25,\n labelOpacity: 0.25,\n stroke: '#d9d9d9',\n strokeOpacity: 0.25,\n },\n },\n animation: {\n enter: 'fade',\n exit: 'fade',\n show: 'fade',\n hide: 'fade',\n expand: 'combo-expand',\n collapse: 'combo-collapse',\n update: [{ fields: ['x', 'y'] }, { fields: ['fill', 'stroke', 'lineWidth'], shape: 'key' }],\n translate: [{ fields: ['x', 'y'] }],\n },\n },\n};\n```\n\n![\"暗色主题\"](\"https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*qTlLSoAbaXYAAAAAAAAAAAAAemJ7AQ/original\")
查看暗色主题完整配置项
\n\n```js\nconst darkTheme = {\n background: '#000000',\n node: {\n palette: {\n type: 'group',\n color: [\n '#1783FF',\n '#00C9C9',\n '#F08F56',\n '#D580FF',\n '#7863FF',\n '#DB9D0D',\n '#60C42D',\n '#FF80CA',\n '#2491B3',\n '#17C76F',\n ],\n },\n style: {\n donutOpacity: 1,\n badgeBackgroundOpacity: 1,\n badgeFill: '#fff',\n badgeFontSize: 8,\n badgePadding: [0, 4],\n badgePalette: ['#7E92B5', '#F4664A', '#FFBE3A'],\n fill: '#1783ff',\n fillOpacity: 1,\n halo: false,\n iconFill: '#fff',\n iconOpacity: 1,\n labelBackground: false,\n labelBackgroundFill: '#000000',\n labelBackgroundLineWidth: 0,\n labelBackgroundOpacity: 0.75,\n labelFill: '#ffffff',\n labelFillOpacity: 0.85,\n labelLineHeight: 16,\n labelPadding: [0, 2],\n labelFontSize: 12,\n labelFontWeight: 400,\n labelOpacity: 1,\n labelOffsetY: 2,\n lineWidth: 0,\n portFill: '#1783ff',\n portLineWidth: 1,\n portStroke: '#d0e4ff',\n portStrokeOpacity: 0.65,\n size: 32,\n stroke: '#d0e4ff',\n strokeOpacity: 1,\n zIndex: 2,\n },\n state: {\n selected: {\n halo: true,\n haloLineWidth: 24,\n haloStrokeOpacity: 0.45,\n labelFontSize: 12,\n labelFontWeight: 'bold',\n lineWidth: 4,\n stroke: '#d0e4ff',\n },\n active: {\n halo: true,\n haloLineWidth: 12,\n haloStrokeOpacity: 0.25,\n },\n highlight: {\n labelFontWeight: 'bold',\n lineWidth: 4,\n stroke: '#d0e4ff',\n strokeOpacity: 0.85,\n },\n inactive: {\n badgeBackgroundOpacity: 0.45,\n donutOpacity: 0.45,\n fillOpacity: 0.45,\n iconOpacity: 0.45,\n labelFill: '#ffffff',\n labelFillOpacity: 0.45,\n strokeOpacity: 0.45,\n },\n disabled: {\n badgeBackgroundOpacity: 0.25,\n donutOpacity: 0.25,\n fill: '#D0E4FF',\n fillOpacity: 0.25,\n iconFill: '#D0E4FF',\n iconOpacity: 0.25,\n labelFill: '#ffffff',\n labelFillOpacity: 0.25,\n strokeOpacity: 0.25,\n },\n },\n animation: {\n enter: 'fade',\n exit: 'fade',\n show: 'fade',\n hide: 'fade',\n expand: 'node-expand',\n collapse: 'node-collapse',\n update: [{ fields: ['x', 'y', 'fill', 'stroke'] }],\n translate: [{ fields: ['x', 'y'] }],\n },\n },\n edge: {\n palette: {\n type: 'group',\n color: [\n '#637088',\n '#0F55A6',\n '#008383',\n '#9C5D38',\n '#8B53A6',\n '#4E40A6',\n '#8F6608',\n '#3E801D',\n '#A65383',\n '#175E75',\n '#0F8248',\n ],\n },\n style: {\n badgeBackgroundFill: '#637088',\n badgeFill: '#fff',\n badgeFontSize: 8,\n badgeOffsetX: 10,\n fillOpacity: 1,\n halo: false,\n haloLineWidth: 12,\n haloStrokeOpacity: 1,\n increasedLineWidthForHitTesting: 2,\n labelBackground: false,\n labelBackgroundFill: '#000000',\n labelBackgroundLineWidth: 0,\n labelBackgroundOpacity: 0.75,\n labelBackgroundPadding: [4, 4, 4, 4],\n labelFill: '#ffffff',\n labelFontSize: 12,\n labelFontWeight: 400,\n labelOpacity: 1,\n labelPlacement: 'center',\n labelTextBaseline: 'middle',\n lineWidth: 1,\n stroke: '#637088',\n strokeOpacity: 1,\n zIndex: 1,\n },\n state: {\n selected: {\n halo: true,\n haloStrokeOpacity: 0.25,\n labelFontSize: 14,\n labelFontWeight: 'bold',\n lineWidth: 3,\n },\n active: {\n halo: true,\n haloStrokeOpacity: 0.15,\n },\n highlight: {\n labelFontWeight: 'bold',\n lineWidth: 3,\n },\n inactive: {\n stroke: '#D0E4FF',\n fillOpacity: 0.08,\n labelOpacity: 0.25,\n strokeOpacity: 0.08,\n badgeBackgroundOpacity: 0.25,\n },\n disabled: {\n stroke: '#637088',\n fillOpacity: 0.45,\n strokeOpacity: 0.45,\n labelOpacity: 0.25,\n badgeBackgroundOpacity: 0.45,\n },\n },\n animation: {\n enter: 'fade',\n exit: 'fade',\n expand: 'path-in',\n collapse: 'path-out',\n show: 'fade',\n hide: 'fade',\n update: [{ fields: ['sourceNode', 'targetNode'] }, { fields: ['stroke'], shape: 'key' }],\n translate: [{ fields: ['sourceNode', 'targetNode'] }],\n },\n },\n combo: {\n style: {\n collapsedMarkerFill: '#000000',\n collapsedMarkerFontSize: 12,\n collapsedMarkerFillOpacity: 1,\n collapsedSize: 32,\n collapsedFillOpacity: 1,\n fill: '#fdfdfd',\n halo: false,\n haloLineWidth: 12,\n haloStroke: '#99add1',\n haloStrokeOpacity: 0.25,\n labelBackground: false,\n labelBackgroundFill: '#000000',\n labelBackgroundLineWidth: 0,\n labelBackgroundOpacity: 0.75,\n labelBackgroundPadding: [2, 4, 2, 4],\n labelFill: '#ffffff',\n labelFontSize: 12,\n labelFontWeight: 400,\n labelOpacity: 1,\n lineDash: 0,\n lineWidth: 1,\n fillOpacity: 0.04,\n strokeOpacity: 1,\n padding: 10,\n stroke: '#99add1',\n },\n state: {\n selected: {\n halo: true,\n labelFontSize: 14,\n labelFontWeight: 700,\n lineWidth: 4,\n },\n active: {\n halo: true,\n },\n highlight: {\n labelFontWeight: 700,\n lineWidth: 4,\n },\n inactive: {\n fillOpacity: 0.65,\n labelOpacity: 0.25,\n strokeOpacity: 0.65,\n },\n disabled: {\n fill: '#d0e4ff',\n fillOpacity: 0.25,\n labelOpacity: 0.25,\n stroke: '#969696',\n strokeOpacity: 0.25,\n },\n },\n animation: {\n enter: 'fade',\n exit: 'fade',\n show: 'fade',\n hide: 'fade',\n expand: 'combo-expand',\n collapse: 'combo-collapse',\n update: [{ fields: ['x', 'y'] }, { fields: ['fill', 'stroke', 'lineWidth'], shape: 'key' }],\n translate: [{ fields: ['x', 'y'] }],\n },\n },\n};\n```\n\n
![](\"https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*QjJoSbD7GTwAAAAAAAAAAAAADmJ7AQ/original\")
![](\"https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*IUOnSbLisyoAAAAAAAAAAAAADmJ7AQ/original\")
![](\"https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*BK0OSYplirUAAAAAAAAAAAAADmJ7AQ/original\")