ahri-cloud-projects/X6
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: 📚️ fix all the link

Browse Source
This commit is contained in:
vector
2021-04-28 19:35:48 +08:00
parent 2afe36b050
commit 1df8b1723b
104 changed files with 580 additions and 576 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
sites/x6-sites/docs/api/graph/background.en.md
View File

@ -6,7 +6,7 @@ redirect_from:
- /en/docs/api
---
背景用于为画布指定背景颜色或背景图片，支持[水印背景](#repeat)和[自定义背景图片的重复方式](../registry/background#registry)，背景层在 DOM 层级上位于画布的最底层。
背景用于为画布指定背景颜色或背景图片，支持[水印背景](#repeat)和[自定义背景图片的重复方式](/en/docs/api/registry/background#registry)，背景层在 DOM 层级上位于画布的最底层。
<iframe src="/demos/tutorial/basic/background/playground"></iframe>

2
sites/x6-sites/docs/api/graph/background.zh.md
View File

@ -6,7 +6,7 @@ redirect_from:
- /zh/docs/api
---
背景用于为画布指定背景颜色或背景图片，支持[水印背景](#repeat)和[自定义背景图片的重复方式](../registry/background#registry)，背景层在 DOM 层级上位于画布的最底层。
背景用于为画布指定背景颜色或背景图片，支持[水印背景](#repeat)和[自定义背景图片的重复方式](/zh/docs/api/registry/background#registry)，背景层在 DOM 层级上位于画布的最底层。
<iframe src="/demos/tutorial/basic/background/playground"></iframe>

74
sites/x6-sites/docs/api/graph/graph.en.md
View File

@ -19,43 +19,43 @@ new Graph(options: Options)
| [width](#width) | number | | `undefined` | 画布宽度，默认使用容器宽度。 |
| [height](#height) | number | | `undefined` | 画布高度，默认使用容器高度。 | |
| [autoResize](#autoresize) | boolean \| Element \| Document | | `false` | 是否监听容器大小改变，并自动更新画布大小。默认监听画布容器，也可以指定监听的元素，如 `Docuemnt`。 |
| [grid](./grid) | boolean \| number \| object | | `false` | 网格，默认使用 `10px` 的网格，但不绘制网格背景。 |
| [background](./background) | false \| object | | `false` | 背景，默认不绘制背景。 |
| [snapline](./snapline) | boolean \| object | | `false` | 对齐线，默认禁用。 |
| [scroller](./scroller) | boolean \| object | | `false` | 滚动画布，默认禁用。 |
| [minimap](./minimap) | boolean \| object | | `false` | 小地图，默认禁用。 |
| [history](./history) | boolean \| object | | `false` | 撤销/重做，默认禁用。 |
| [clipboard](./clipboard) | boolean \| object | | `false` | 剪切板，默认禁用。 |
| [keyboard](./keyboard) | boolean \| object | | `false` | 键盘快捷键，默认禁用。 |
| [mousewheel](./mousewheel) | boolean \| object | | `false` | 鼠标滚轮缩放，默认禁用。 |
| [selecting](./selecting) | boolean \| object | | `false` | 点选/框选，默认禁用。 |
| [rotating](./transform#rotating) | boolean \| object | | `false` | 旋转节点，默认禁用。 |
| [resizing](./transform#resizing) | boolean \| object | | `false` | 缩放节点，默认禁用。 |
| [translating](./transform#translating) | object | | object | 平移节点。 |
| [transforming](./transform#transforming) | object | | object | 平移和缩放节点的基础选项。 |
| [embedding](./interaction#embedding) | boolean \| object | | `false` | 嵌套节点，默认禁用。 |
| [connecting](./interaction#connecting) | object | | object | 连线选项。 |
| [highlighting](./interaction#highlighting) | object | | object | 高亮选项。 |
| [interacting](./interaction#interacting) | object \| function | | `{ edgeLabelMovable: false }` | 定制节点和边的交互行为。 |
| [sorting](./view#sorting) | 'none' \| 'approx' \| 'exact' | | `'exact'` | 节点和边视图的排序方式。 |
| [async](./view#async) | boolean | | `false` | 是否是异步渲染的画布。 |
| [frozen](./view#frozen) | boolean | | `false` | 异步渲染的画布是否处于冻结状态。 |
| [checkView](./view#checkView) | function | | - | 返回指定的视图是否应该渲染到 DOM 中。 |
| [magnetThreshold](./view#magnetThreshold) | number \| 'onleave' | | `0` | 鼠标移动多少次后才触发连线，或者设置为 `'onleave'` 时表示鼠标移出元素时才触发连线。 |
| [moveThreshold](./view#moveThreshold) | number | | `0` | 触发 `'mousemove'` 事件之前，允许鼠标移动的次数。 |
| [clickThreshold](./view#clickThreshold) | number | | `0` | 当鼠标移动次数超过指定的数字时，将不触发鼠标点击事件。 |
| [preventDefaultContextMenu](./view#preventDefaultContextMenu) | boolean | | `true` | 是否禁用浏览器默认右键菜单。 |
| [preventDefaultBlankAction](./view#preventDefaultBlankAction) | boolean | | `true` | 在画布空白位置响应鼠标事件时，是否禁用鼠标默认行为。 |
| [guard](./view#guard) | function | | `() => false` | 返回是否应该忽略某个鼠标事件，返回 `true` 时忽略指定的鼠标事件。 |
| [allowRubberband](./view#allowRubberband) | function | | `() => true` | 返回是否响应框选事件。 |
| [allowPanning](./view#allowPanning) | function | | `() => true` | 返回是否响应画布平移事件。 |
| [getCellView](./view#getCellView) | function | | `() => null` | 获取节点/边的视图类。 |
| [createCellView](./view#createCellView) | function | | `undefined` | 创建节点/边的视图，默认自动根据节点和边的 [`view`](../model/cell#view) 选项创建对应的视图。 |
| [getHTMLComponent](./view#getHTMLComponent) | function | | `undefined` | 获取 HTML 节点的 HTML 元素，默认根据节点的 `html` 选项返回对应的 HTML 元素。 |
| [onPortRendered](./view#onPortRendered) | function | | `undefined` | 当某个链接桩渲染完成时触发的回调。 |
| [onEdgeLabelRendered](./view#onEdgeLabelRendered) | function | | `undefined` | 当边的文本标签渲染完成时触发的回调。 |
| [onToolItemCreated](./view#onToolItemCreated) | function | | `undefined` | 当工具项渲染完成时触发的回调。
| [model](./model) | Model | | `undefined` | 画布对应的模型，默认创建一个新模型。
| [grid](/en/docs/api/graph/grid) | boolean \| number \| object | | `false` | 网格，默认使用 `10px` 的网格，但不绘制网格背景。 |
| [background](/en/docs/api/graph/background) | false \| object | | `false` | 背景，默认不绘制背景。 |
| [snapline](/en/docs/api/graph/snapline) | boolean \| object | | `false` | 对齐线，默认禁用。 |
| [scroller](/en/docs/api/graph/scroller) | boolean \| object | | `false` | 滚动画布，默认禁用。 |
| [minimap](/en/docs/api/graph/minimap) | boolean \| object | | `false` | 小地图，默认禁用。 |
| [history](/en/docs/api/graph/history) | boolean \| object | | `false` | 撤销/重做，默认禁用。 |
| [clipboard](/en/docs/api/graph/clipboard) | boolean \| object | | `false` | 剪切板，默认禁用。 |
| [keyboard](/en/docs/api/graph/keyboard) | boolean \| object | | `false` | 键盘快捷键，默认禁用。 |
| [mousewheel](/en/docs/api/graph/mousewheel) | boolean \| object | | `false` | 鼠标滚轮缩放，默认禁用。 |
| [selecting](/en/docs/api/graph/selecting) | boolean \| object | | `false` | 点选/框选，默认禁用。 |
| [rotating](/en/docs/api/graph/transform#rotating) | boolean \| object | | `false` | 旋转节点，默认禁用。 |
| [resizing](/en/docs/api/graph/transform#resizing) | boolean \| object | | `false` | 缩放节点，默认禁用。 |
| [translating](/en/docs/api/graph/transform#translating) | object | | object | 平移节点。 |
| [transforming](/en/docs/api/graph/transform#transforming) | object | | object | 平移和缩放节点的基础选项。 |
| [embedding](/en/docs/api/graph/interaction#embedding) | boolean \| object | | `false` | 嵌套节点，默认禁用。 |
| [connecting](/en/docs/api/graph/interaction#connecting) | object | | object | 连线选项。 |
| [highlighting](/en/docs/api/graph/interaction#highlighting) | object | | object | 高亮选项。 |
| [interacting](/en/docs/api/graph/interaction#interacting) | object \| function | | `{ edgeLabelMovable: false }` | 定制节点和边的交互行为。 |
| [sorting](/en/docs/api/graph/view#sorting) | 'none' \| 'approx' \| 'exact' | | `'exact'` | 节点和边视图的排序方式。 |
| [async](/en/docs/api/graph/view#async) | boolean | | `false` | 是否是异步渲染的画布。 |
| [frozen](/en/docs/api/graph/view#frozen) | boolean | | `false` | 异步渲染的画布是否处于冻结状态。 |
| [checkView](/en/docs/api/graph/view#checkView) | function | | - | 返回指定的视图是否应该渲染到 DOM 中。 |
| [magnetThreshold](/en/docs/api/graph/view#magnetThreshold) | number \| 'onleave' | | `0` | 鼠标移动多少次后才触发连线，或者设置为 `'onleave'` 时表示鼠标移出元素时才触发连线。 |
| [moveThreshold](/en/docs/api/graph/view#moveThreshold) | number | | `0` | 触发 `'mousemove'` 事件之前，允许鼠标移动的次数。 |
| [clickThreshold](/en/docs/api/graph/view#clickThreshold) | number | | `0` | 当鼠标移动次数超过指定的数字时，将不触发鼠标点击事件。 |
| [preventDefaultContextMenu](/en/docs/api/graph/view#preventDefaultContextMenu) | boolean | | `true` | 是否禁用浏览器默认右键菜单。 |
| [preventDefaultBlankAction](/en/docs/api/graph/view#preventDefaultBlankAction) | boolean | | `true` | 在画布空白位置响应鼠标事件时，是否禁用鼠标默认行为。 |
| [guard](/en/docs/api/graph/view#guard) | function | | `() => false` | 返回是否应该忽略某个鼠标事件，返回 `true` 时忽略指定的鼠标事件。 |
| [allowRubberband](/en/docs/api/graph/view#allowRubberband) | function | | `() => true` | 返回是否响应框选事件。 |
| [allowPanning](/en/docs/api/graph/view#allowPanning) | function | | `() => true` | 返回是否响应画布平移事件。 |
| [getCellView](/en/docs/api/graph/view#getCellView) | function | | `() => null` | 获取节点/边的视图类。 |
| [createCellView](/en/docs/api/graph/view#createCellView) | function | | `undefined` | 创建节点/边的视图，默认自动根据节点和边的 [`view`](/en/docs/api/model/cell#view) 选项创建对应的视图。 |
| [getHTMLComponent](/en/docs/api/graph/view#getHTMLComponent) | function | | `undefined` | 获取 HTML 节点的 HTML 元素，默认根据节点的 `html` 选项返回对应的 HTML 元素。 |
| [onPortRendered](/en/docs/api/graph/view#onPortRendered) | function | | `undefined` | 当某个链接桩渲染完成时触发的回调。 |
| [onEdgeLabelRendered](/en/docs/api/graph/view#onEdgeLabelRendered) | function | | `undefined` | 当边的文本标签渲染完成时触发的回调。 |
| [onToolItemCreated](/en/docs/api/graph/view#onToolItemCreated) | function | | `undefined` | 当工具项渲染完成时触发的回调。
| [model](/en/docs/api/graph/model) | Model | | `undefined` | 画布对应的模型，默认创建一个新模型。
### container

74
sites/x6-sites/docs/api/graph/graph.zh.md
View File

@ -19,43 +19,43 @@ new Graph(options: Options)
| [width](#width) | number | | `undefined` | 画布宽度，默认使用容器宽度。 |
| [height](#height) | number | | `undefined` | 画布高度，默认使用容器高度。 | |
| [autoResize](#autoresize) | boolean \| Element \| Document | | `false` | 是否监听容器大小改变，并自动更新画布大小。默认监听画布容器，也可以指定监听的元素，如 `Docuemnt`。 |
| [grid](./grid) | boolean \| number \| object | | `false` | 网格，默认使用 `10px` 的网格，但不绘制网格背景。 |
| [background](./background) | false \| object | | `false` | 背景，默认不绘制背景。 |
| [snapline](./snapline) | boolean \| object | | `false` | 对齐线，默认禁用。 |
| [scroller](./scroller) | boolean \| object | | `false` | 滚动画布，默认禁用。 |
| [minimap](./minimap) | boolean \| object | | `false` | 小地图，默认禁用。 |
| [history](./history) | boolean \| object | | `false` | 撤销/重做，默认禁用。 |
| [clipboard](./clipboard) | boolean \| object | | `false` | 剪切板，默认禁用。 |
| [keyboard](./keyboard) | boolean \| object | | `false` | 键盘快捷键，默认禁用。 |
| [mousewheel](./mousewheel) | boolean \| object | | `false` | 鼠标滚轮缩放，默认禁用。 |
| [selecting](./selecting) | boolean \| object | | `false` | 点选/框选，默认禁用。 |
| [rotating](./transform#rotating) | boolean \| object | | `false` | 旋转节点，默认禁用。 |
| [resizing](./transform#resizing) | boolean \| object | | `false` | 缩放节点，默认禁用。 |
| [translating](./transform#translating) | object | | object | 平移节点。 |
| [transforming](./transform#transforming) | object | | object | 平移和缩放节点的基础选项。 |
| [embedding](./interaction#embedding) | boolean \| object | | `false` | 嵌套节点，默认禁用。 |
| [connecting](./interaction#connecting) | object | | object | 连线选项。 |
| [highlighting](./interaction#highlighting) | object | | object | 高亮选项。 |
| [interacting](./interaction#interacting) | object \| function | | `{ edgeLabelMovable: false }` | 定制节点和边的交互行为。 |
| [sorting](./view#sorting) | 'none' \| 'approx' \| 'exact' | | `'exact'` | 节点和边视图的排序方式。 |
| [async](./view#async) | boolean | | `false` | 是否是异步渲染的画布。 |
| [frozen](./view#frozen) | boolean | | `false` | 异步渲染的画布是否处于冻结状态。 |
| [checkView](./view#checkView) | function | | - | 返回指定的视图是否应该渲染到 DOM 中。 |
| [magnetThreshold](./view#magnetThreshold) | number \| 'onleave' | | `0` | 鼠标移动多少次后才触发连线，或者设置为 `'onleave'` 时表示鼠标移出元素时才触发连线。 |
| [moveThreshold](./view#moveThreshold) | number | | `0` | 触发 `'mousemove'` 事件之前，允许鼠标移动的次数。 |
| [clickThreshold](./view#clickThreshold) | number | | `0` | 当鼠标移动次数超过指定的数字时，将不触发鼠标点击事件。 |
| [preventDefaultContextMenu](./view#preventDefaultContextMenu) | boolean | | `true` | 是否禁用浏览器默认右键菜单。 |
| [preventDefaultBlankAction](./view#preventDefaultBlankAction) | boolean | | `true` | 在画布空白位置响应鼠标事件时，是否禁用鼠标默认行为。 |
| [guard](./view#guard) | function | | `() => false` | 返回是否应该忽略某个鼠标事件，返回 `true` 时忽略指定的鼠标事件。 |
| [allowRubberband](./view#allowRubberband) | function | | `() => true` | 返回是否响应框选事件。 |
| [allowPanning](./view#allowPanning) | function | | `() => true` | 返回是否响应画布平移事件。 |
| [getCellView](./view#getCellView) | function | | `() => null` | 获取节点/边的视图类。 |
| [createCellView](./view#createCellView) | function | | `undefined` | 创建节点/边的视图，默认自动根据节点和边的 [`view`](../model/cell#view) 选项创建对应的视图。 |
| [getHTMLComponent](./view#getHTMLComponent) | function | | `undefined` | 获取 HTML 节点的 HTML 元素，默认根据节点的 `html` 选项返回对应的 HTML 元素。 |
| [onPortRendered](./view#onPortRendered) | function | | `undefined` | 当某个链接桩渲染完成时触发的回调。 |
| [onEdgeLabelRendered](./view#onEdgeLabelRendered) | function | | `undefined` | 当边的文本标签渲染完成时触发的回调。 |
| [onToolItemCreated](./view#onToolItemCreated) | function | | `undefined` | 当工具项渲染完成时触发的回调。
| [model](./model) | Model | | `undefined` | 画布对应的模型，默认创建一个新模型。
| [grid](/zh/docs/api/graph/grid) | boolean \| number \| object | | `false` | 网格，默认使用 `10px` 的网格，但不绘制网格背景。 |
| [background](/zh/docs/api/graph/background) | false \| object | | `false` | 背景，默认不绘制背景。 |
| [snapline](/zh/docs/api/graph/snapline) | boolean \| object | | `false` | 对齐线，默认禁用。 |
| [scroller](/zh/docs/api/graph/scroller) | boolean \| object | | `false` | 滚动画布，默认禁用。 |
| [minimap](/zh/docs/api/graph/minimap) | boolean \| object | | `false` | 小地图，默认禁用。 |
| [history](/zh/docs/api/graph/history) | boolean \| object | | `false` | 撤销/重做，默认禁用。 |
| [clipboard](/zh/docs/api/graph/clipboard) | boolean \| object | | `false` | 剪切板，默认禁用。 |
| [keyboard](/zh/docs/api/graph/keyboard) | boolean \| object | | `false` | 键盘快捷键，默认禁用。 |
| [mousewheel](/zh/docs/api/graph/mousewheel) | boolean \| object | | `false` | 鼠标滚轮缩放，默认禁用。 |
| [selecting](/zh/docs/api/graph/selecting) | boolean \| object | | `false` | 点选/框选，默认禁用。 |
| [rotating](/zh/docs/api/graph/transform#rotating) | boolean \| object | | `false` | 旋转节点，默认禁用。 |
| [resizing](/zh/docs/api/graph/transform#resizing) | boolean \| object | | `false` | 缩放节点，默认禁用。 |
| [translating](/zh/docs/api/graph/transform#translating) | object | | object | 平移节点。 |
| [transforming](/zh/docs/api/graph/transform#transforming) | object | | object | 平移和缩放节点的基础选项。 |
| [embedding](/zh/docs/api/graph/interaction#embedding) | boolean \| object | | `false` | 嵌套节点，默认禁用。 |
| [connecting](/zh/docs/api/graph/interaction#connecting) | object | | object | 连线选项。 |
| [highlighting](/zh/docs/api/graph/interaction#highlighting) | object | | object | 高亮选项。 |
| [interacting](/zh/docs/api/graph/interaction#interacting) | object \| function | | `{ edgeLabelMovable: false }` | 定制节点和边的交互行为。 |
| [sorting](/zh/docs/api/graph/view#sorting) | 'none' \| 'approx' \| 'exact' | | `'exact'` | 节点和边视图的排序方式。 |
| [async](/zh/docs/api/graph/view#async) | boolean | | `false` | 是否是异步渲染的画布。 |
| [frozen](/zh/docs/api/graph/view#frozen) | boolean | | `false` | 异步渲染的画布是否处于冻结状态。 |
| [checkView](/zh/docs/api/graph/view#checkView) | function | | - | 返回指定的视图是否应该渲染到 DOM 中。 |
| [magnetThreshold](/zh/docs/api/graph/view#magnetThreshold) | number \| 'onleave' | | `0` | 鼠标移动多少次后才触发连线，或者设置为 `'onleave'` 时表示鼠标移出元素时才触发连线。 |
| [moveThreshold](/zh/docs/api/graph/view#moveThreshold) | number | | `0` | 触发 `'mousemove'` 事件之前，允许鼠标移动的次数。 |
| [clickThreshold](/zh/docs/api/graph/view#clickThreshold) | number | | `0` | 当鼠标移动次数超过指定的数字时，将不触发鼠标点击事件。 |
| [preventDefaultContextMenu](/zh/docs/api/graph/view#preventDefaultContextMenu) | boolean | | `true` | 是否禁用浏览器默认右键菜单。 |
| [preventDefaultBlankAction](/zh/docs/api/graph/view#preventDefaultBlankAction) | boolean | | `true` | 在画布空白位置响应鼠标事件时，是否禁用鼠标默认行为。 |
| [guard](/zh/docs/api/graph/view#guard) | function | | `() => false` | 返回是否应该忽略某个鼠标事件，返回 `true` 时忽略指定的鼠标事件。 |
| [allowRubberband](/zh/docs/api/graph/view#allowRubberband) | function | | `() => true` | 返回是否响应框选事件。 |
| [allowPanning](/zh/docs/api/graph/view#allowPanning) | function | | `() => true` | 返回是否响应画布平移事件。 |
| [getCellView](/zh/docs/api/graph/view#getCellView) | function | | `() => null` | 获取节点/边的视图类。 |
| [createCellView](/zh/docs/api/graph/view#createCellView) | function | | `undefined` | 创建节点/边的视图，默认自动根据节点和边的 [`view`](/zh/docs/api/model/cell#view) 选项创建对应的视图。 |
| [getHTMLComponent](/zh/docs/api/graph/view#getHTMLComponent) | function | | `undefined` | 获取 HTML 节点的 HTML 元素，默认根据节点的 `html` 选项返回对应的 HTML 元素。 |
| [onPortRendered](/zh/docs/api/graph/view#onPortRendered) | function | | `undefined` | 当某个链接桩渲染完成时触发的回调。 |
| [onEdgeLabelRendered](/zh/docs/api/graph/view#onEdgeLabelRendered) | function | | `undefined` | 当边的文本标签渲染完成时触发的回调。 |
| [onToolItemCreated](/zh/docs/api/graph/view#onToolItemCreated) | function | | `undefined` | 当工具项渲染完成时触发的回调。
| [model](/zh/docs/api/graph/model) | Model | | `undefined` | 画布对应的模型，默认创建一个新模型。
### container

2
sites/x6-sites/docs/api/graph/grid.en.md
View File

@ -163,5 +163,5 @@ drawGrid(options?: DrawGridOptions): this
| 名称 | 类型 | 必选 | 默认值 | 描述 |
|--------------|--------|:----:|---------|------------------------------------------------|
| options.type | string | | `'dot'` | 网格类型。详情请[参考这里](../registry/grid)。 |
| options.type | string | | `'dot'` | 网格类型。详情请[参考这里](/en/docs/api/registry/grid)。 |
| options.args | object | | - | 与网格类型对应的网格参数。 |

2
sites/x6-sites/docs/api/graph/grid.zh.md
View File

@ -163,5 +163,5 @@ drawGrid(options?: DrawGridOptions): this
| 名称 | 类型 | 必选 | 默认值 | 描述 |
|--------------|--------|:----:|---------|------------------------------------------------|
| options.type | string | | `'dot'` | 网格类型。详情请[参考这里](../registry/grid)。 |
| options.type | string | | `'dot'` | 网格类型。详情请[参考这里](/zh/docs/api/registry/grid)。 |
| options.args | object | | - | 与网格类型对应的网格参数。 |

12
sites/x6-sites/docs/api/graph/interaction.en.md
View File

@ -117,7 +117,7 @@ const graph = new Graph({
#### anchor
当连接到节点时，通过 [`anchor`](../registry/node-anchor) 来指定被连接的节点的锚点，默认值为 `center`。
当连接到节点时，通过 [`anchor`](/en/docs/api/registry/node-anchor) 来指定被连接的节点的锚点，默认值为 `center`。
#### sourceAnchor
@ -129,7 +129,7 @@ const graph = new Graph({
#### edgeAnchor
当连接到边时，通过 [`edgeAnchor`](../registry/edge-anchor) 来指定被连接的边的锚点，默认值为 `ratio`。
当连接到边时，通过 [`edgeAnchor`](/en/docs/api/registry/edge-anchor) 来指定被连接的边的锚点，默认值为 `ratio`。
#### sourceEdgeAnchor
@ -141,7 +141,7 @@ const graph = new Graph({
#### connectionPoint
指定[连接点](../registry/connector)，默认值为 `boundary`。
指定[连接点](/en/docs/api/registry/connector)，默认值为 `boundary`。
#### sourceConnectionPoint
@ -153,11 +153,11 @@ const graph = new Graph({
#### router
[路由](../registry/router)将边的路径点 `vertices` 做进一步转换处理，并在必要时添加额外的点，然后返回处理后的点，默认值为 `normal`。
[路由](/en/docs/api/registry/router)将边的路径点 `vertices` 做进一步转换处理，并在必要时添加额外的点，然后返回处理后的点，默认值为 `normal`。
#### connector
[连接器](../registry/connector)将起点、路由返回的点、终点加工为 <path> 元素的 d 属性，决定了边渲染到画布后的样式，默认值为 `normal`。
[连接器](/en/docs/api/registry/connector)将起点、路由返回的点、终点加工为 <path> 元素的 d 属性，决定了边渲染到画布后的样式，默认值为 `normal`。
#### validateMagnet
@ -309,7 +309,7 @@ new Graph({
- `'magnetAdsorbed'` 连线过程中，自动吸附到链接桩时被使用。
另外，也可以直接使用在 [`cellView.highlight(...)`](../view/cellview#highlight) 方法中，用来高亮指定的元素。
另外，也可以直接使用在 [`cellView.highlight(...)`](/en/docs/api/view/cellview#highlight) 方法中，用来高亮指定的元素。
```ts
cellView.highlight(elem, {

12
sites/x6-sites/docs/api/graph/interaction.zh.md
View File

@ -117,7 +117,7 @@ const graph = new Graph({
#### anchor
当连接到节点时，通过 [`anchor`](../registry/node-anchor) 来指定被连接的节点的锚点，默认值为 `center`。
当连接到节点时，通过 [`anchor`](/zh/docs/api/registry/node-anchor) 来指定被连接的节点的锚点，默认值为 `center`。
#### sourceAnchor
@ -129,7 +129,7 @@ const graph = new Graph({
#### edgeAnchor
当连接到边时，通过 [`edgeAnchor`](../registry/edge-anchor) 来指定被连接的边的锚点，默认值为 `ratio`。
当连接到边时，通过 [`edgeAnchor`](/zh/docs/api/registry/edge-anchor) 来指定被连接的边的锚点，默认值为 `ratio`。
#### sourceEdgeAnchor
@ -141,7 +141,7 @@ const graph = new Graph({
#### connectionPoint
指定[连接点](../registry/connector)，默认值为 `boundary`。
指定[连接点](/zh/docs/api/registry/connector)，默认值为 `boundary`。
#### sourceConnectionPoint
@ -153,11 +153,11 @@ const graph = new Graph({
#### router
[路由](../registry/router)将边的路径点 `vertices` 做进一步转换处理，并在必要时添加额外的点，然后返回处理后的点，默认值为 `normal`。
[路由](/zh/docs/api/registry/router)将边的路径点 `vertices` 做进一步转换处理，并在必要时添加额外的点，然后返回处理后的点，默认值为 `normal`。
#### connector
[连接器](../registry/connector)将起点、路由返回的点、终点加工为 <path> 元素的 d 属性，决定了边渲染到画布后的样式，默认值为 `normal`。
[连接器](/zh/docs/api/registry/connector)将起点、路由返回的点、终点加工为 <path> 元素的 d 属性，决定了边渲染到画布后的样式，默认值为 `normal`。
#### validateMagnet
@ -309,7 +309,7 @@ new Graph({
- `'magnetAdsorbed'` 连线过程中，自动吸附到链接桩时被使用。
另外，也可以直接使用在 [`cellView.highlight(...)`](../view/cellview#highlight) 方法中，用来高亮指定的元素。
另外，也可以直接使用在 [`cellView.highlight(...)`](/zh/docs/api/view/cellview#highlight) 方法中，用来高亮指定的元素。
```ts
cellView.highlight(elem, {

3
sites/x6-sites/docs/api/graph/minimap.en.md
View File

@ -4,11 +4,12 @@ order: 5
redirect_from:
- /en/docs
- /en/docs/api
- /en/docs/api/graph
---
## 配置
启用 [Scroller](./scroller) 后可开启小地图，小地图是完整画布的预览，支持通过平移缩放小地图的视口来平移缩放画布。
启用 [Scroller](/en/docs/api/graph/scroller) 后可开启小地图，小地图是完整画布的预览，支持通过平移缩放小地图的视口来平移缩放画布。
```ts
const graph = new Graph({

3
sites/x6-sites/docs/api/graph/minimap.zh.md
View File

@ -4,11 +4,12 @@ order: 5
redirect_from:
- /zh/docs
- /zh/docs/api
- /zh/docs/api/graph
---
## 配置
启用 [Scroller](./scroller) 后可开启小地图，小地图是完整画布的预览，支持通过平移缩放小地图的视口来平移缩放画布。
启用 [Scroller](/zh/docs/api/graph/scroller) 后可开启小地图，小地图是完整画布的预览，支持通过平移缩放小地图的视口来平移缩放画布。
```ts
const graph = new Graph({

16
sites/x6-sites/docs/api/graph/model.en.md
View File

@ -54,7 +54,7 @@ createNode(metadata: Node.Metadata): Node
| 名称 | 类型 | 必选 | 默认值 | 描述 |
|----------|---------------|:----:|--------|---------------------------------------|
| metadata | Node.Metadata | ✓ | | [节点元数据](../model/node#constructor)。 |
| metadata | Node.Metadata | ✓ | | [节点元数据](/en/docs/api/model/node#constructor)。 |
### addNode(...)
@ -69,7 +69,7 @@ addNode(node: Node, options?: AddOptions): Node
| 名称 | 类型 | 必选 | 默认值 | 描述 |
|------------------|-----------------------|:----:|---------|-------------------------------------------------------------------|
| node | Node.Metadata \| Node | ✓ | | [节点元数据](../model/node#constructor)或[节点实例](../model/node)。 |
| node | Node.Metadata \| Node | ✓ | | [节点元数据](/en/docs/api/model/node#constructor)或[节点实例](/en/docs/api/model/node)。 |
| options.silent | boolean | | `false` | 为 `true` 时不触发 `'node:added'` 和 `'cell:added'` 事件和画布重绘。 |
| options.sort | boolean | | `true` | 是否按照 `zIndex` 排序。 |
| options...others | object | | | 其他自定义键值对，可以在事件回调中使用。 |
@ -87,7 +87,7 @@ removeNode(node: Node, options?: RemoveOptions): Node | null
| 名称 | 类型 | 必选 | 默认值 | 描述 |
|------------------|----------------|:----:|---------|-----------------------------------------------------------------------|
| node | string \| Node | ✓ | | 节点 ID 或[节点实例](../model/node)。 |
| node | string \| Node | ✓ | | 节点 ID 或[节点实例](/en/docs/api/model/node)。 |
| options.silent | boolean | | `false` | 为 `true` 时不触发 `'node:removed'` 和 `'cell:removed'` 事件和画布重绘。 |
| options...others | object | | | 其他自定义键值对，可以在事件回调中使用。 |
@ -103,7 +103,7 @@ createNode(metadata: Edge.Metadata): Edge
| 名称 | 类型 | 必选 | 默认值 | 描述 |
|----------|---------------|:----:|--------|---------------------------------------|
| metadata | Edge.Metadata | ✓ | | [节点元数据](../model/edge#constructor)。 |
| metadata | Edge.Metadata | ✓ | | [节点元数据](/en/docs/api/model/edge#constructor)。 |
### addEdge(...)
@ -118,7 +118,7 @@ addEdge(edge:Edge, options?: AddOptions): Edge
| 名称 | 类型 | 必选 | 默认值 | 描述 |
|------------------|-----------------------|:----:|---------|-------------------------------------------------------------------|
| edge | Edge.Metadata \| Edge | ✓ | | [边元数据](../model/edge#constructor)或[边实例](../model/edge)。 |
| edge | Edge.Metadata \| Edge | ✓ | | [边元数据](/en/docs/api/model/edge#constructor)或[边实例](/en/docs/api/model/edge)。 |
| options.silent | boolean | | `false` | 为 `true` 时不触发 `'edge:added'` 和 `'cell:added'` 事件和画布重绘。 |
| options.sort | boolean | | `true` | 是否按照 `zIndex` 排序。 |
| options...others | object | | | 其他自定义键值对，可以在事件回调中使用。 |
@ -136,7 +136,7 @@ removeEdge(edge: Edge, options?: RemoveOptions): Edge | null
| 名称 | 类型 | 必选 | 默认值 | 描述 |
|------------------|----------------|:----:|---------|-----------------------------------------------------------------------|
| edge | string \| Edge | ✓ | | 边 ID 或[边实例](../model/edge)。 |
| edge | string \| Edge | ✓ | | 边 ID 或[边实例](/en/docs/api/model/edge)。 |
| options.silent | boolean | | `false` | 为 `true` 时不触发 `'edge:removed'` 和 `'cell:removed'` 事件和画布重绘。 |
| options...others | object | | | 其他自定义键值对，可以在事件回调中使用。 |
@ -152,7 +152,7 @@ addCell(cell: Cell | Cell[], options?: AddOptions): this
| 名称 | 类型 | 必选 | 默认值 | 描述 |
|------------------|----------------|:----:|---------|----------------------------------------------------------------------------------|
| cell | Cell \| Cell[] | ✓ | | [节点实例](../model/node)或[边实例](../model/edge)，支持传入数组同时添加多个节点或边。 |
| cell | Cell \| Cell[] | ✓ | | [节点实例](/en/docs/api/model/node)或[边实例](/en/docs/api/model/edge)，支持传入数组同时添加多个节点或边。 |
| options.silent | boolean | | `false` | 为 `true` 时不触发 `'cell:added'`、`'node:added'` 和 `'edge:added'` 事件和画布重绘。 |
| options.sort | boolean | | `true` | 是否按照 `zIndex` 排序。 |
| options...others | object | | | 其他自定义键值对，可以在事件回调中使用。 |
@ -661,7 +661,7 @@ toJSON(options?: ToJSONOptions): object
| 名称 | 类型 | 必选 | 默认值 | 描述 |
|--------------|------|:----:|---------|------------------------------------------------------------------------------------------------|
| options.deep | diff | | `false` | 是否导出节点和边的差异数据（与节点和边的[默认配置](../../tutorial/basic/cell#选项默认值)不同的部分）。 |
| options.deep | diff | | `false` | 是否导出节点和边的差异数据（与节点和边的[默认配置](/en/docs/tutorial/basic/cell#选项默认值)不同的部分）。 |
### parseJSON(...)

16
sites/x6-sites/docs/api/graph/model.zh.md
View File

@ -54,7 +54,7 @@ createNode(metadata: Node.Metadata): Node
| 名称 | 类型 | 必选 | 默认值 | 描述 |
|----------|---------------|:----:|--------|---------------------------------------|
| metadata | Node.Metadata | ✓ | | [节点元数据](../model/node#constructor)。 |
| metadata | Node.Metadata | ✓ | | [节点元数据](/zh/docs/api/model/node#constructor)。 |
### addNode(...)
@ -69,7 +69,7 @@ addNode(node: Node, options?: AddOptions): Node
| 名称 | 类型 | 必选 | 默认值 | 描述 |
|------------------|-----------------------|:----:|---------|-------------------------------------------------------------------|
| node | Node.Metadata \| Node | ✓ | | [节点元数据](../model/node#constructor)或[节点实例](../model/node)。 |
| node | Node.Metadata \| Node | ✓ | | [节点元数据](/zh/docs/api/model/node#constructor)或[节点实例](/zh/docs/api/model/node)。 |
| options.silent | boolean | | `false` | 为 `true` 时不触发 `'node:added'` 和 `'cell:added'` 事件和画布重绘。 |
| options.sort | boolean | | `true` | 是否按照 `zIndex` 排序。 |
| options...others | object | | | 其他自定义键值对，可以在事件回调中使用。 |
@ -87,7 +87,7 @@ removeNode(node: Node, options?: RemoveOptions): Node | null
| 名称 | 类型 | 必选 | 默认值 | 描述 |
|------------------|----------------|:----:|---------|-----------------------------------------------------------------------|
| node | string \| Node | ✓ | | 节点 ID 或[节点实例](../model/node)。 |
| node | string \| Node | ✓ | | 节点 ID 或[节点实例](/zh/docs/api/model/node)。 |
| options.silent | boolean | | `false` | 为 `true` 时不触发 `'node:removed'` 和 `'cell:removed'` 事件和画布重绘。 |
| options...others | object | | | 其他自定义键值对，可以在事件回调中使用。 |
@ -103,7 +103,7 @@ createNode(metadata: Edge.Metadata): Edge
| 名称 | 类型 | 必选 | 默认值 | 描述 |
|----------|---------------|:----:|--------|---------------------------------------|
| metadata | Edge.Metadata | ✓ | | [节点元数据](../model/edge#constructor)。 |
| metadata | Edge.Metadata | ✓ | | [节点元数据](/zh/docs/api/model/edge#constructor)。 |
### addEdge(...)
@ -118,7 +118,7 @@ addEdge(edge:Edge, options?: AddOptions): Edge
| 名称 | 类型 | 必选 | 默认值 | 描述 |
|------------------|-----------------------|:----:|---------|-------------------------------------------------------------------|
| edge | Edge.Metadata \| Edge | ✓ | | [边元数据](../model/edge#constructor)或[边实例](../model/edge)。 |
| edge | Edge.Metadata \| Edge | ✓ | | [边元数据](/zh/docs/api/model/edge#constructor)或[边实例](/zh/docs/api/model/edge)。 |
| options.silent | boolean | | `false` | 为 `true` 时不触发 `'edge:added'` 和 `'cell:added'` 事件和画布重绘。 |
| options.sort | boolean | | `true` | 是否按照 `zIndex` 排序。 |
| options...others | object | | | 其他自定义键值对，可以在事件回调中使用。 |
@ -136,7 +136,7 @@ removeEdge(edge: Edge, options?: RemoveOptions): Edge | null
| 名称 | 类型 | 必选 | 默认值 | 描述 |
|------------------|----------------|:----:|---------|-----------------------------------------------------------------------|
| edge | string \| Edge | ✓ | | 边 ID 或[边实例](../model/edge)。 |
| edge | string \| Edge | ✓ | | 边 ID 或[边实例](/zh/docs/api/model/edge)。 |
| options.silent | boolean | | `false` | 为 `true` 时不触发 `'edge:removed'` 和 `'cell:removed'` 事件和画布重绘。 |
| options...others | object | | | 其他自定义键值对，可以在事件回调中使用。 |
@ -152,7 +152,7 @@ addCell(cell: Cell | Cell[], options?: AddOptions): this
| 名称 | 类型 | 必选 | 默认值 | 描述 |
|------------------|----------------|:----:|---------|----------------------------------------------------------------------------------|
| cell | Cell \| Cell[] | ✓ | | [节点实例](../model/node)或[边实例](../model/edge)，支持传入数组同时添加多个节点或边。 |
| cell | Cell \| Cell[] | ✓ | | [节点实例](/zh/docs/api/model/node)或[边实例](/zh/docs/api/model/edge)，支持传入数组同时添加多个节点或边。 |
| options.silent | boolean | | `false` | 为 `true` 时不触发 `'cell:added'`、`'node:added'` 和 `'edge:added'` 事件和画布重绘。 |
| options.sort | boolean | | `true` | 是否按照 `zIndex` 排序。 |
| options...others | object | | | 其他自定义键值对，可以在事件回调中使用。 |
@ -661,7 +661,7 @@ toJSON(options?: ToJSONOptions): object
| 名称 | 类型 | 必选 | 默认值 | 描述 |
|--------------|------|:----:|---------|------------------------------------------------------------------------------------------------|
| options.deep | diff | | `false` | 是否导出节点和边的差异数据（与节点和边的[默认配置](../../tutorial/basic/cell#选项默认值)不同的部分）。 |
| options.deep | diff | | `false` | 是否导出节点和边的差异数据（与节点和边的[默认配置](/zh/docs/tutorial/basic/cell#选项默认值)不同的部分）。 |
### parseJSON(...)

3
sites/x6-sites/docs/api/graph/mousewheel.en.md
View File

@ -4,11 +4,12 @@ order: 9
redirect_from:
- /en/docs
- /en/docs/api
- /en/docs/api/garph
---
## 配置
鼠标滚轮的默认行为是滚动页面，启用 [Scroller](./scroller) 后用于滚动画布，但在某些场景下我们需要用滚轮来缩放画布，所为了避免交互冲突，通常配合修饰键来实现滚轮缩放画布，参考下面配置。
鼠标滚轮的默认行为是滚动页面，启用 [Scroller](/en/docs/api/garph/scroller) 后用于滚动画布，但在某些场景下我们需要用滚轮来缩放画布，所为了避免交互冲突，通常配合修饰键来实现滚轮缩放画布，参考下面配置。
```ts
const graph = new Graph({

3
sites/x6-sites/docs/api/graph/mousewheel.zh.md
View File

@ -4,11 +4,12 @@ order: 9
redirect_from:
- /zh/docs
- /zh/docs/api
- /zh/docs/api/graph
---
## 配置
鼠标滚轮的默认行为是滚动页面，启用 [Scroller](./scroller) 后用于滚动画布，但在某些场景下我们需要用滚轮来缩放画布，所为了避免交互冲突，通常配合修饰键来实现滚轮缩放画布，参考下面配置。
鼠标滚轮的默认行为是滚动页面，启用 [Scroller](/zh/docs/api/graph/scroller) 后用于滚动画布，但在某些场景下我们需要用滚轮来缩放画布，所为了避免交互冲突，通常配合修饰键来实现滚轮缩放画布，参考下面配置。
```ts
const graph = new Graph({

2
sites/x6-sites/docs/api/graph/other.en.md
View File

@ -39,7 +39,7 @@ showTools(): this
defineFilter(options: FilterOptions): string
```
定义[滤镜](../registry/filter)，返回滤镜 ID。
定义[滤镜](/en/docs/api/registry/filter)，返回滤镜 ID。
<span class="tag-param">参数<span>

2
sites/x6-sites/docs/api/graph/other.zh.md
View File

@ -39,7 +39,7 @@ showTools(): this
defineFilter(options: FilterOptions): string
```
定义[滤镜](../registry/filter)，返回滤镜 ID。
定义[滤镜](/zh/docs/api/registry/filter)，返回滤镜 ID。
<span class="tag-param">参数<span>

6
sites/x6-sites/docs/api/graph/view.en.md
View File

@ -12,7 +12,7 @@ redirect_from:
节点和边视图的排序方式。
原生 SVG 不支持 `z-index` 样式，所以我们在 x6 中通过代码的形式来支持节点和边的层级设置。创建节点和边时，可以通过 [`zIndex`](../model/cell#zindex) 选项来设置节点和边的层级；也可以拿到节点/边的实例后，通过 [`cell.setZIndex(z)`](../model/cell#setzindex)、[`cell.toFront()`](../model/cell#tofront) 和 [`cell.toBack()`](../model/cell#toback) 等方法来修改层级。
原生 SVG 不支持 `z-index` 样式，所以我们在 x6 中通过代码的形式来支持节点和边的层级设置。创建节点和边时，可以通过 [`zIndex`](/en/docs/api/model/cell#zindex) 选项来设置节点和边的层级；也可以拿到节点/边的实例后，通过 [`cell.setZIndex(z)`](/en/docs/api/model/cell#setzindex)、[`cell.toFront()`](/en/docs/api/model/cell#tofront) 和 [`cell.toBack()`](/en/docs/api/model/cell#toback) 等方法来修改层级。
支持以下三种取值：
@ -116,7 +116,7 @@ graph.unfreeze()
(this: Graph, cell: Cell) => CellView | null | undefined
```
创建节点/边的视图，默认自动根据节点和边的 [`view`](../model/cell#view) 选项创建对应的视图。
创建节点/边的视图，默认自动根据节点和边的 [`view`](/en/docs/api/model/cell#view) 选项创建对应的视图。
### getHTMLComponent
@ -124,7 +124,7 @@ graph.unfreeze()
(this: Graph, node: HTML) => HTMLElement | string | null | undefined
```
获取 HTML 节点的 HTML 元素，默认根据节点的 `html` 选项返回对应的 HTML 元素。更多细节请参考[使用 HTML 节点教程](../../tutorial/advanced/react#渲染-html-节点)。
获取 HTML 节点的 HTML 元素，默认根据节点的 `html` 选项返回对应的 HTML 元素。更多细节请参考[使用 HTML 节点教程](/en/docs/tutorial/advanced/react#渲染-html-节点)。
```ts
const graph = new Graph({

6
sites/x6-sites/docs/api/graph/view.zh.md
View File

@ -12,7 +12,7 @@ redirect_from:
节点和边视图的排序方式。
原生 SVG 不支持 `z-index` 样式，所以我们在 x6 中通过代码的形式来支持节点和边的层级设置。创建节点和边时，可以通过 [`zIndex`](../model/cell#zindex) 选项来设置节点和边的层级；也可以拿到节点/边的实例后，通过 [`cell.setZIndex(z)`](../model/cell#setzindex)、[`cell.toFront()`](../model/cell#tofront) 和 [`cell.toBack()`](../model/cell#toback) 等方法来修改层级。
原生 SVG 不支持 `z-index` 样式，所以我们在 x6 中通过代码的形式来支持节点和边的层级设置。创建节点和边时，可以通过 [`zIndex`](/zh/docs/api/model/cell#zindex) 选项来设置节点和边的层级；也可以拿到节点/边的实例后，通过 [`cell.setZIndex(z)`](/zh/docs/api/model/cell#setzindex)、[`cell.toFront()`](/zh/docs/api/model/cell#tofront) 和 [`cell.toBack()`](/zh/docs/api/model/cell#toback) 等方法来修改层级。
支持以下三种取值：
@ -116,7 +116,7 @@ graph.unfreeze()
(this: Graph, cell: Cell) => CellView | null | undefined
```
创建节点/边的视图，默认自动根据节点和边的 [`view`](../model/cell#view) 选项创建对应的视图。
创建节点/边的视图，默认自动根据节点和边的 [`view`](/zh/docs/api/model/cell#view) 选项创建对应的视图。
### getHTMLComponent
@ -124,7 +124,7 @@ graph.unfreeze()
(this: Graph, node: HTML) => HTMLElement | string | null | undefined
```
获取 HTML 节点的 HTML 元素，默认根据节点的 `html` 选项返回对应的 HTML 元素。更多细节请参考[使用 HTML 节点教程](../../tutorial/advanced/react#渲染-html-节点)。
获取 HTML 节点的 HTML 元素，默认根据节点的 `html` 选项返回对应的 HTML 元素。更多细节请参考[使用 HTML 节点教程](/zh/docs/tutorial/advanced/react#渲染-html-节点)。
```ts
const graph = new Graph({

42
sites/x6-sites/docs/api/model/cell.en.md
View File

@ -2,12 +2,12 @@
title: Cell
order: 0
redirect_from:
- /zh/docs
- /zh/docs/api
- /zh/docs/api/model
- /en/docs
- /en/docs/api
- /en/docs/api/model
---
Cell 是 [Node](./node) 和 [Edge](./edge) 的基类，包含节点和边的通用属性和方法定义，如属性样式、可见性、业务数据等，并且在实例化、样式定制、默认选项、自定义选项等方面具有相同的行为。
Cell 是 [Node](/en/docs/api/model/node) 和 [Edge](/en/docs/api/model/edge) 的基类，包含节点和边的通用属性和方法定义，如属性样式、可见性、业务数据等，并且在实例化、样式定制、默认选项、自定义选项等方面具有相同的行为。
## constructor
@ -347,7 +347,7 @@ const edge = graph.addEdge({
- `graph.addNode` 方法中 `shape` 的默认值为 `'rect'`
- `graph.addEdge` 方法中 `shape` 的默认值为 `'edge'`
同时，我们在 X6 中[内置](../../tutorial/basic/cell#内置节点)了一系列节点和边。
同时，我们在 X6 中[内置](/en/docs/tutorial/basic/cell#内置节点)了一系列节点和边。
内置节点构造函数与 `shape` 名称对应关系如下表。
@ -375,7 +375,7 @@ const edge = graph.addEdge({
| Shape.DoubleEdge | double-edge | 双线边。 |
| Shape.ShadowEdge | shadow-edge | 阴影边。 |
除了使用 X6 的内置节点/边，我们还可以注册自定义节点/边并使用他们，想了解更多请参考[自定义节点](../../tutorial/intermediate/custom-node)和[自定义边](../../tutorial/intermediate/custom-edge)教程。
除了使用 X6 的内置节点/边，我们还可以注册自定义节点/边并使用他们，想了解更多请参考[自定义节点](/en/docs/tutorial/intermediate/custom-node)和[自定义边](/en/docs/tutorial/intermediate/custom-edge)教程。
### view
@ -403,18 +403,18 @@ const edge = graph.addEdge({
节点
- [button](../registry/node-tool#button) 在指定位置处渲染一个按钮，支持自定义按钮的点击交互。
- [button-remove](../registry/node-tool#button-remove) 在指定的位置处，渲染一个删除按钮，点击时删除对应的节点。
- [boundary](../registry/node-tool#boundary) 根据节点的包围盒渲染一个包围节点的矩形。注意，该工具仅仅渲染一个矩形，不带任何交互。
- [button](/en/docs/api/registry/node-tool#button) 在指定位置处渲染一个按钮，支持自定义按钮的点击交互。
- [button-remove](/en/docs/api/registry/node-tool#button-remove) 在指定的位置处，渲染一个删除按钮，点击时删除对应的节点。
- [boundary](/en/docs/api/registry/node-tool#boundary) 根据节点的包围盒渲染一个包围节点的矩形。注意，该工具仅仅渲染一个矩形，不带任何交互。
边
- [vertices](../registry/edge-tool#vertices) 路径点工具，在路径点位置渲染一个小圆点，拖动小圆点修改路径点位置，双击小圆点删除路径点，在边上单击添加路径点。
- [segments](../registry/edge-tool#segments) 线段工具。在边的每条线段的中心渲染一个工具条，可以拖动工具条调整线段两端的路径点的位置。
- [boundary](../registry/edge-tool#boundary) 根据边的包围盒渲染一个包围边的矩形。注意，该工具仅仅渲染一个矩形，不带任何交互。
- [button](../registry/edge-tool#button) 在指定位置处渲染一个按钮，支持自定义按钮的点击交互。
- [button-remove](../registry/edge-tool#button-remove) 在指定的位置处，渲染一个删除按钮，点击时删除对应的边。
- [source-arrowhead-和-target-arrowhead](../registry/edge-tool#source-arrowhead-和-target-arrowhead) 在边的起点或终点渲染一个图形(默认是箭头)，拖动该图形来修改边的起点或终点。
- [vertices](/en/docs/api/registry/edge-tool#vertices) 路径点工具，在路径点位置渲染一个小圆点，拖动小圆点修改路径点位置，双击小圆点删除路径点，在边上单击添加路径点。
- [segments](/en/docs/api/registry/edge-tool#segments) 线段工具。在边的每条线段的中心渲染一个工具条，可以拖动工具条调整线段两端的路径点的位置。
- [boundary](/en/docs/api/registry/edge-tool#boundary) 根据边的包围盒渲染一个包围边的矩形。注意，该工具仅仅渲染一个矩形，不带任何交互。
- [button](/en/docs/api/registry/edge-tool#button) 在指定位置处渲染一个按钮，支持自定义按钮的点击交互。
- [button-remove](/en/docs/api/registry/edge-tool#button-remove) 在指定的位置处，渲染一个删除按钮，点击时删除对应的边。
- [source-arrowhead-和-target-arrowhead](/en/docs/api/registry/edge-tool#source-arrowhead-和-target-arrowhead) 在边的起点或终点渲染一个图形(默认是箭头)，拖动该图形来修改边的起点或终点。
可以指定单个工具：
@ -510,7 +510,7 @@ const rect = new Shape.Rect({
#### get model
获取节点/边所属的 [Model](../graph/model)，当节点/边被添加到画布时将自动确定。
获取节点/边所属的 [Model](/en/docs/api/graph/model)，当节点/边被添加到画布时将自动确定。
```ts
const rect = new Shape.Rect({
@ -555,7 +555,7 @@ if (node.view === 'rect') {
isNode(): boolean
```
检测实例是不是 [Node](./node) 实例，如果是 [Node](./node) 实例则返回 `true`，否则返回 `false`。所有继承自 [Node](./node) 的节点都返回 `true`。
检测实例是不是 [Node](/en/docs/api/model/node) 实例，如果是 [Node](/en/docs/api/model/node) 实例则返回 `true`，否则返回 `false`。所有继承自 [Node](/en/docs/api/model/node) 的节点都返回 `true`。
```ts
if (cell.isNode()) {
@ -569,7 +569,7 @@ if (cell.isNode()) {
isEdge(): boolean
```
检测实例是不是 [Edge](./edge) 实例，如果是 [Edge](./edge) 实例则返回 `true`，否则返回 `false`。所有继承自 [Edge](./edge) 的边都返回 `true`。
检测实例是不是 [Edge](/en/docs/api/model/edge) 实例，如果是 [Edge](/en/docs/api/model/edge) 实例则返回 `true`，否则返回 `false`。所有继承自 [Edge](/en/docs/api/model/edge) 的边都返回 `true`。
```ts
if (cell.isEdge()) {
@ -818,7 +818,7 @@ cell.removeMarkup({ otherKey: 'otherValue', ... })
获取属性。
```ts
const atts = cell.atts
const atts = cell.attrs
```
#### set attrs
@ -2737,7 +2737,7 @@ addTools(
| 名称 | 类型 | 必选 | 默认值 | 描述 |
|------------------|----------------------------------|:----:|---------|----------------------------------------------------------------------------------------------------------------------|
| items | Cell.ToolItem \| Cell.ToolItem[] | | | [NodeTool](../registry/node-tool#presets) 或 [EdgeTool](../registry/edge-tool#presets) 中定义的小工具。 |
| items | Cell.ToolItem \| Cell.ToolItem[] | | | [NodeTool](/en/docs/api/registry/node-tool#presets) 或 [EdgeTool](/en/docs/api/registry/edge-tool#presets) 中定义的小工具。 |
| name | string | | | 工具集名称。当指定了工具集名称，且 `options.reset` 为 `false` 时，指定的名称与现有工具集名称相同时才会向工具集中添加工具。 |
| options.reset | boolean | | `false` | 是否清空工具集，默认向工具集追加小工具。 |
| options.silent | boolean | | `false` | 为 `true` 时不触不触发 `'change:tools'` 事件和小工具重绘。 |
@ -2768,7 +2768,7 @@ setTools(
|-------------|-----------------|:----:|-------------|----------------------------------------------------------------------------------------------------------|
| tools.name | string | | `undefined` | 工具集名称。 |
| tools.local | boolean | | `false` | 是否渲染到节点/边的容器中，默认为 `false` 表示渲染到画布容器中。 |
| tools.items | Cell.ToolItem[] | | `undefined` | [NodeTool](../registry/node-tool#presets) 或 [EdgeTool](../registry/edge-tool#presets) 中定义的小工具集合。 |
| tools.items | Cell.ToolItem[] | | `undefined` | [NodeTool](/en/docs/api/registry/node-tool#presets) 或 [EdgeTool](/en/docs/api/registry/edge-tool#presets) 中定义的小工具集合。 |
#### getTools()

36
sites/x6-sites/docs/api/model/cell.zh.md
View File

@ -7,7 +7,7 @@ redirect_from:
- /zh/docs/api/model
---
Cell 是 [Node](./node) 和 [Edge](./edge) 的基类，包含节点和边的通用属性和方法定义，如属性样式、可见性、业务数据等，并且在实例化、样式定制、默认选项、自定义选项等方面具有相同的行为。
Cell 是 [Node](/zh/docs/api/model/node) 和 [Edge](/zh/docs/api/model/edge) 的基类，包含节点和边的通用属性和方法定义，如属性样式、可见性、业务数据等，并且在实例化、样式定制、默认选项、自定义选项等方面具有相同的行为。
## constructor
@ -347,7 +347,7 @@ const edge = graph.addEdge({
- `graph.addNode` 方法中 `shape` 的默认值为 `'rect'`
- `graph.addEdge` 方法中 `shape` 的默认值为 `'edge'`
同时，我们在 X6 中[内置](../../tutorial/basic/cell#内置节点)了一系列节点和边。
同时，我们在 X6 中[内置](/zh/docs/tutorial/basic/cell#内置节点)了一系列节点和边。
内置节点构造函数与 `shape` 名称对应关系如下表。
@ -375,7 +375,7 @@ const edge = graph.addEdge({
| Shape.DoubleEdge | double-edge | 双线边。 |
| Shape.ShadowEdge | shadow-edge | 阴影边。 |
除了使用 X6 的内置节点/边，我们还可以注册自定义节点/边并使用他们，想了解更多请参考[自定义节点](../../tutorial/intermediate/custom-node)和[自定义边](../../tutorial/intermediate/custom-edge)教程。
除了使用 X6 的内置节点/边，我们还可以注册自定义节点/边并使用他们，想了解更多请参考[自定义节点](/zh/docs/tutorial/intermediate/custom-node)和[自定义边](/zh/docs/tutorial/intermediate/custom-edge)教程。
### view
@ -403,18 +403,18 @@ const edge = graph.addEdge({
节点
- [button](../registry/node-tool#button) 在指定位置处渲染一个按钮，支持自定义按钮的点击交互。
- [button-remove](../registry/node-tool#button-remove) 在指定的位置处，渲染一个删除按钮，点击时删除对应的节点。
- [boundary](../registry/node-tool#boundary) 根据节点的包围盒渲染一个包围节点的矩形。注意，该工具仅仅渲染一个矩形，不带任何交互。
- [button](/zh/docs/api/registry/node-tool#button) 在指定位置处渲染一个按钮，支持自定义按钮的点击交互。
- [button-remove](/zh/docs/api/registry/node-tool#button-remove) 在指定的位置处，渲染一个删除按钮，点击时删除对应的节点。
- [boundary](/zh/docs/api/registry/node-tool#boundary) 根据节点的包围盒渲染一个包围节点的矩形。注意，该工具仅仅渲染一个矩形，不带任何交互。
边
- [vertices](../registry/edge-tool#vertices) 路径点工具，在路径点位置渲染一个小圆点，拖动小圆点修改路径点位置，双击小圆点删除路径点，在边上单击添加路径点。
- [segments](../registry/edge-tool#segments) 线段工具。在边的每条线段的中心渲染一个工具条，可以拖动工具条调整线段两端的路径点的位置。
- [boundary](../registry/edge-tool#boundary) 根据边的包围盒渲染一个包围边的矩形。注意，该工具仅仅渲染一个矩形，不带任何交互。
- [button](../registry/edge-tool#button) 在指定位置处渲染一个按钮，支持自定义按钮的点击交互。
- [button-remove](../registry/edge-tool#button-remove) 在指定的位置处，渲染一个删除按钮，点击时删除对应的边。
- [source-arrowhead-和-target-arrowhead](../registry/edge-tool#source-arrowhead-和-target-arrowhead) 在边的起点或终点渲染一个图形(默认是箭头)，拖动该图形来修改边的起点或终点。
- [vertices](/zh/docs/api/registry/edge-tool#vertices) 路径点工具，在路径点位置渲染一个小圆点，拖动小圆点修改路径点位置，双击小圆点删除路径点，在边上单击添加路径点。
- [segments](/zh/docs/api/registry/edge-tool#segments) 线段工具。在边的每条线段的中心渲染一个工具条，可以拖动工具条调整线段两端的路径点的位置。
- [boundary](/zh/docs/api/registry/edge-tool#boundary) 根据边的包围盒渲染一个包围边的矩形。注意，该工具仅仅渲染一个矩形，不带任何交互。
- [button](/zh/docs/api/registry/edge-tool#button) 在指定位置处渲染一个按钮，支持自定义按钮的点击交互。
- [button-remove](/zh/docs/api/registry/edge-tool#button-remove) 在指定的位置处，渲染一个删除按钮，点击时删除对应的边。
- [source-arrowhead-和-target-arrowhead](/zh/docs/api/registry/edge-tool#source-arrowhead-和-target-arrowhead) 在边的起点或终点渲染一个图形(默认是箭头)，拖动该图形来修改边的起点或终点。
可以指定单个工具：
@ -510,7 +510,7 @@ const rect = new Shape.Rect({
#### get model
获取节点/边所属的 [Model](../graph/model)，当节点/边被添加到画布时将自动确定。
获取节点/边所属的 [Model](/zh/docs/api/graph/model)，当节点/边被添加到画布时将自动确定。
```ts
const rect = new Shape.Rect({
@ -555,7 +555,7 @@ if (node.view === 'rect') {
isNode(): boolean
```
检测实例是不是 [Node](./node) 实例，如果是 [Node](./node) 实例则返回 `true`，否则返回 `false`。所有继承自 [Node](./node) 的节点都返回 `true`。
检测实例是不是 [Node](/zh/docs/api/model/node) 实例，如果是 [Node](/zh/docs/api/model/node) 实例则返回 `true`，否则返回 `false`。所有继承自 [Node](/zh/docs/api/model/node) 的节点都返回 `true`。
```ts
if (cell.isNode()) {
@ -569,7 +569,7 @@ if (cell.isNode()) {
isEdge(): boolean
```
检测实例是不是 [Edge](./edge) 实例，如果是 [Edge](./edge) 实例则返回 `true`，否则返回 `false`。所有继承自 [Edge](./edge) 的边都返回 `true`。
检测实例是不是 [Edge](/zh/docs/api/model/edge) 实例，如果是 [Edge](/zh/docs/api/model/edge) 实例则返回 `true`，否则返回 `false`。所有继承自 [Edge](/zh/docs/api/model/edge) 的边都返回 `true`。
```ts
if (cell.isEdge()) {
@ -818,7 +818,7 @@ cell.removeMarkup({ otherKey: 'otherValue', ... })
获取属性。
```ts
const atts = cell.atts
const atts = cell.attrs
```
#### set attrs
@ -2737,7 +2737,7 @@ addTools(
| 名称 | 类型 | 必选 | 默认值 | 描述 |
|------------------|----------------------------------|:----:|---------|----------------------------------------------------------------------------------------------------------------------|
| items | Cell.ToolItem \| Cell.ToolItem[] | | | [NodeTool](../registry/node-tool#presets) 或 [EdgeTool](../registry/edge-tool#presets) 中定义的小工具。 |
| items | Cell.ToolItem \| Cell.ToolItem[] | | | [NodeTool](/zh/docs/api/registry/node-tool#presets) 或 [EdgeTool](/zh/docs/api/registry/edge-tool#presets) 中定义的小工具。 |
| name | string | | | 工具集名称。当指定了工具集名称，且 `options.reset` 为 `false` 时，指定的名称与现有工具集名称相同时才会向工具集中添加工具。 |
| options.reset | boolean | | `false` | 是否清空工具集，默认向工具集追加小工具。 |
| options.silent | boolean | | `false` | 为 `true` 时不触不触发 `'change:tools'` 事件和小工具重绘。 |
@ -2768,7 +2768,7 @@ setTools(
|-------------|-----------------|:----:|-------------|----------------------------------------------------------------------------------------------------------|
| tools.name | string | | `undefined` | 工具集名称。 |
| tools.local | boolean | | `false` | 是否渲染到节点/边的容器中，默认为 `false` 表示渲染到画布容器中。 |
| tools.items | Cell.ToolItem[] | | `undefined` | [NodeTool](../registry/node-tool#presets) 或 [EdgeTool](../registry/edge-tool#presets) 中定义的小工具集合。 |
| tools.items | Cell.ToolItem[] | | `undefined` | [NodeTool](/zh/docs/api/registry/node-tool#presets) 或 [EdgeTool](/zh/docs/api/registry/edge-tool#presets) 中定义的小工具集合。 |
#### getTools()

34
sites/x6-sites/docs/api/model/edge.en.md
View File

@ -7,7 +7,7 @@ redirect_from:
- /en/docs/api/model
---
Edge 是边的基类，继承自 [Cell](./cell)，并定义了边的通用属性和方法。
Edge 是边的基类，继承自 [Cell](/en/docs/api/model/cell)，并定义了边的通用属性和方法。
## constructor
@ -15,7 +15,7 @@ Edge 是边的基类，继承自 [Cell](./cell)，并定义了边的通用属性
constructor(metadata?: Edge.Metadata)
```
其中 `Edge.Metadata` 是创建节点的选项，除了从 Cell [继承](./cell#constructor)的 [`markup`](./cell#markup)、[`attrs`](./cell#attrs-1)、[`zIndex`](./cell#zindex) 等选项外，还支持以下选项。
其中 `Edge.Metadata` 是创建节点的选项，除了从 Cell [继承](/en/docs/api/model/cell#constructor)的 [`markup`](/en/docs/api/model/cell#markup)、[`attrs`](/en/docs/api/model/cell#attrs-1)、[`zIndex`](/en/docs/api/model/cell#zindex) 等选项外，还支持以下选项。
| 选项 | 类型 | 默认值 | 必选 | 描述 |
|--------------|---------------------|--------|:----:|--------------------------|
@ -60,7 +60,7 @@ constructor(metadata?: Edge.Metadata)
})
```
另外，边的[锚点 anchor](../../api/registry/node-anchor) 和[连接点 ConnectionPoint](../../api/registry/connection-point) 选项共同确定了边的起点和终点。
另外，边的[锚点 anchor](/en/docs/api/registry/node-anchor) 和[连接点 ConnectionPoint](/en/docs/api/registry/connection-point) 选项共同确定了边的起点和终点。
- 起点：从第一个路径点或目标节点的中心（没有路径点时）画一条参考线到源节点的锚点，然后根据 connectionPoint 指定的交点计算方法，计算参考线与图形的交点，该交点就是边的起点。
- 终点：从最后一个路径点或源节点的中心（没有路径点时）画一条参考线到目标节点的锚点，然后根据 connectionPoint 指定的交点计算方法，计算参考线与图形的交点，该交点就是边的终点。
@ -122,18 +122,18 @@ const edge = new Shape.Edge({
### router
路由 `router` 将对 `vertices` 进一步处理，并在必要时添加额外的点，然后返回处理后的点（不包含边的起点和终点）。例如，经过 [`orth`](../registry/router#orth) 路由处理后，边的每一条链接线段都是水平或垂直的。
路由 `router` 将对 `vertices` 进一步处理，并在必要时添加额外的点，然后返回处理后的点（不包含边的起点和终点）。例如，经过 [`orth`](/en/docs/api/registry/router#orth) 路由处理后，边的每一条链接线段都是水平或垂直的。
我们默认提供了以下几种路由。
| 路由名称 | 说明 |
|-----------|--------------------------------------------------------------------------------------------------------------------------------|
| normal | [默认路由](../registry/router#normal)，原样返回路径点。 |
| orth | [正交路由](../registry/router#orth)，由水平或垂直的正交线段组成。 |
| oneSide | [受限正交路由](../registry/router#oneside)，由受限的三段水平或垂直的正交线段组成。 |
| manhattan | [智能正交路由](../registry/router#manhattan)，由水平或垂直的正交线段组成，并自动避开路径上的其他节点（障碍）。 |
| metro | [智能地铁线路由](../registry/router#metro)，由水平或垂直的正交线段和斜角线段组成，类似地铁轨道图，并自动避开路径上的其他节点（障碍）。 |
| er | [实体关系路由](../registry/router#er)，由 `Z` 字形的斜角线段组成。 |
| normal | [默认路由](/en/docs/api/registry/router#normal)，原样返回路径点。 |
| orth | [正交路由](/en/docs/api/registry/router#orth)，由水平或垂直的正交线段组成。 |
| oneSide | [受限正交路由](/en/docs/api/registry/router#oneside)，由受限的三段水平或垂直的正交线段组成。 |
| manhattan | [智能正交路由](/en/docs/api/registry/router#manhattan)，由水平或垂直的正交线段组成，并自动避开路径上的其他节点（障碍）。 |
| metro | [智能地铁线路由](/en/docs/api/registry/router#metro)，由水平或垂直的正交线段和斜角线段组成，类似地铁轨道图，并自动避开路径上的其他节点（障碍）。 |
| er | [实体关系路由](/en/docs/api/registry/router#er)，由 `Z` 字形的斜角线段组成。 |
可以这样指定路由名称 `name` 和路由参数 `args`：
@ -168,7 +168,7 @@ const edge = new Shape.Edge({
})
```
除了上面几种内置路由，我们还可以创建自定义路由，并注册使用，更多细节请参考[自定义路由](../registry/router#registry)教程。
除了上面几种内置路由，我们还可以创建自定义路由，并注册使用，更多细节请参考[自定义路由](/en/docs/api/registry/router#registry)教程。
### connector
@ -178,10 +178,10 @@ const edge = new Shape.Edge({
| 连接器名称 | 说明 |
|------------|----------------------------------------------------------------------------------------------------------|
| normal | [简单连接器](../registry/connector#normal)，用直线连接起点、路由点和终点。 |
| smooth | [平滑连接器](../registry/connector#smooth)，用三次贝塞尔曲线线连接起点、路由点和终点。 |
| rounded | [圆角连接器](../registry/connector#rounded)，用直线连接起点、路由点和终点，并在线段连接处用圆弧链接（倒圆角）。 |
| jumpover | [跳线连接器](../registry/connector#jumpover)，用直线连接起点、路由点和终点，并在边与边的交叉处用跳线符号链接。 |
| normal | [简单连接器](/en/docs/api/registry/connector#normal)，用直线连接起点、路由点和终点。 |
| smooth | [平滑连接器](/en/docs/api/registry/connector#smooth)，用三次贝塞尔曲线线连接起点、路由点和终点。 |
| rounded | [圆角连接器](/en/docs/api/registry/connector#rounded)，用直线连接起点、路由点和终点，并在线段连接处用圆弧链接（倒圆角）。 |
| jumpover | [跳线连接器](/en/docs/api/registry/connector#jumpover)，用直线连接起点、路由点和终点，并在边与边的交叉处用跳线符号链接。 |
可以这样指定连接器名称 `name` 和路由参数 `args`：
@ -216,11 +216,11 @@ const edge = new Shape.Edge({
})
```
除了上面几种内置连接器，我们还可以创建自定义连接器，并注册使用，更多细节请参考[自定义连接器](../registry/connector#registry)教程。
除了上面几种内置连接器，我们还可以创建自定义连接器，并注册使用，更多细节请参考[自定义连接器](/en/docs/api/registry/connector#registry)教程。
### labels 和 defaultLabel
由于标签配置非常灵活，所以我们提供了单独的教程来介绍如何使用标签，详情请参考[使用标签](../../tutorial/intermediate/edge-labels)教程。
由于标签配置非常灵活，所以我们提供了单独的教程来介绍如何使用标签，详情请参考[使用标签](/en/docs/tutorial/intermediate/edge-labels)教程。
## prototype

34
sites/x6-sites/docs/api/model/edge.zh.md
View File

@ -7,7 +7,7 @@ redirect_from:
- /zh/docs/api/model
---
Edge 是边的基类，继承自 [Cell](./cell)，并定义了边的通用属性和方法。
Edge 是边的基类，继承自 [Cell](/zh/docs/api/model/cell)，并定义了边的通用属性和方法。
## constructor
@ -15,7 +15,7 @@ Edge 是边的基类，继承自 [Cell](./cell)，并定义了边的通用属性
constructor(metadata?: Edge.Metadata)
```
其中 `Edge.Metadata` 是创建节点的选项，除了从 Cell [继承](./cell#constructor)的 [`markup`](./cell#markup)、[`attrs`](./cell#attrs-1)、[`zIndex`](./cell#zindex) 等选项外，还支持以下选项。
其中 `Edge.Metadata` 是创建节点的选项，除了从 Cell [继承](/zh/docs/api/model/cell#constructor)的 [`markup`](/zh/docs/api/model/cell#markup)、[`attrs`](/zh/docs/api/model/cell#attrs-1)、[`zIndex`](/zh/docs/api/model/cell#zindex) 等选项外，还支持以下选项。
| 选项 | 类型 | 默认值 | 必选 | 描述 |
|--------------|---------------------|--------|:----:|--------------------------|
@ -60,7 +60,7 @@ constructor(metadata?: Edge.Metadata)
})
```
另外，边的[锚点 anchor](../../api/registry/node-anchor) 和[连接点 ConnectionPoint](../../api/registry/connection-point) 选项共同确定了边的起点和终点。
另外，边的[锚点 anchor](/zh/docs/api/registry/node-anchor) 和[连接点 ConnectionPoint](/zh/docs/api/registry/connection-point) 选项共同确定了边的起点和终点。
- 起点：从第一个路径点或目标节点的中心（没有路径点时）画一条参考线到源节点的锚点，然后根据 connectionPoint 指定的交点计算方法，计算参考线与图形的交点，该交点就是边的起点。
- 终点：从最后一个路径点或源节点的中心（没有路径点时）画一条参考线到目标节点的锚点，然后根据 connectionPoint 指定的交点计算方法，计算参考线与图形的交点，该交点就是边的终点。
@ -122,18 +122,18 @@ const edge = new Shape.Edge({
### router
路由 `router` 将对 `vertices` 进一步处理，并在必要时添加额外的点，然后返回处理后的点（不包含边的起点和终点）。例如，经过 [`orth`](../registry/router#orth) 路由处理后，边的每一条链接线段都是水平或垂直的。
路由 `router` 将对 `vertices` 进一步处理，并在必要时添加额外的点，然后返回处理后的点（不包含边的起点和终点）。例如，经过 [`orth`](/zh/docs/api/registry/router#orth) 路由处理后，边的每一条链接线段都是水平或垂直的。
我们默认提供了以下几种路由。
| 路由名称 | 说明 |
|-----------|--------------------------------------------------------------------------------------------------------------------------------|
| normal | [默认路由](../registry/router#normal)，原样返回路径点。 |
| orth | [正交路由](../registry/router#orth)，由水平或垂直的正交线段组成。 |
| oneSide | [受限正交路由](../registry/router#oneside)，由受限的三段水平或垂直的正交线段组成。 |
| manhattan | [智能正交路由](../registry/router#manhattan)，由水平或垂直的正交线段组成，并自动避开路径上的其他节点（障碍）。 |
| metro | [智能地铁线路由](../registry/router#metro)，由水平或垂直的正交线段和斜角线段组成，类似地铁轨道图，并自动避开路径上的其他节点（障碍）。 |
| er | [实体关系路由](../registry/router#er)，由 `Z` 字形的斜角线段组成。 |
| normal | [默认路由](/zh/docs/api/registry/router#normal)，原样返回路径点。 |
| orth | [正交路由](/zh/docs/api/registry/router#orth)，由水平或垂直的正交线段组成。 |
| oneSide | [受限正交路由](/zh/docs/api/registry/router#oneside)，由受限的三段水平或垂直的正交线段组成。 |
| manhattan | [智能正交路由](/zh/docs/api/registry/router#manhattan)，由水平或垂直的正交线段组成，并自动避开路径上的其他节点（障碍）。 |
| metro | [智能地铁线路由](/zh/docs/api/registry/router#metro)，由水平或垂直的正交线段和斜角线段组成，类似地铁轨道图，并自动避开路径上的其他节点（障碍）。 |
| er | [实体关系路由](/zh/docs/api/registry/router#er)，由 `Z` 字形的斜角线段组成。 |
可以这样指定路由名称 `name` 和路由参数 `args`：
@ -168,7 +168,7 @@ const edge = new Shape.Edge({
})
```
除了上面几种内置路由，我们还可以创建自定义路由，并注册使用，更多细节请参考[自定义路由](../registry/router#registry)教程。
除了上面几种内置路由，我们还可以创建自定义路由，并注册使用，更多细节请参考[自定义路由](/zh/docs/api/registry/router#registry)教程。
### connector
@ -178,10 +178,10 @@ const edge = new Shape.Edge({
| 连接器名称 | 说明 |
|------------|----------------------------------------------------------------------------------------------------------|
| normal | [简单连接器](../registry/connector#normal)，用直线连接起点、路由点和终点。 |
| smooth | [平滑连接器](../registry/connector#smooth)，用三次贝塞尔曲线线连接起点、路由点和终点。 |
| rounded | [圆角连接器](../registry/connector#rounded)，用直线连接起点、路由点和终点，并在线段连接处用圆弧链接（倒圆角）。 |
| jumpover | [跳线连接器](../registry/connector#jumpover)，用直线连接起点、路由点和终点，并在边与边的交叉处用跳线符号链接。 |
| normal | [简单连接器](/zh/docs/api/registry/connector#normal)，用直线连接起点、路由点和终点。 |
| smooth | [平滑连接器](/zh/docs/api/registry/connector#smooth)，用三次贝塞尔曲线线连接起点、路由点和终点。 |
| rounded | [圆角连接器](/zh/docs/api/registry/connector#rounded)，用直线连接起点、路由点和终点，并在线段连接处用圆弧链接（倒圆角）。 |
| jumpover | [跳线连接器](/zh/docs/api/registry/connector#jumpover)，用直线连接起点、路由点和终点，并在边与边的交叉处用跳线符号链接。 |
可以这样指定连接器名称 `name` 和路由参数 `args`：
@ -216,11 +216,11 @@ const edge = new Shape.Edge({
})
```
除了上面几种内置连接器，我们还可以创建自定义连接器，并注册使用，更多细节请参考[自定义连接器](../registry/connector#registry)教程。
除了上面几种内置连接器，我们还可以创建自定义连接器，并注册使用，更多细节请参考[自定义连接器](/zh/docs/api/registry/connector#registry)教程。
### labels 和 defaultLabel
由于标签配置非常灵活，所以我们提供了单独的教程来介绍如何使用标签，详情请参考[使用标签](../../tutorial/intermediate/edge-labels)教程。
由于标签配置非常灵活，所以我们提供了单独的教程来介绍如何使用标签，详情请参考[使用标签](/zh/docs/tutorial/intermediate/edge-labels)教程。
## prototype

8
sites/x6-sites/docs/api/model/node.en.md
View File

@ -7,7 +7,7 @@ redirect_from:
- /en/docs/api/model
---
Node 是所有节点的基类，继承自 [Cell](./cell)，并定义了节点的通用属性和方法。
Node 是所有节点的基类，继承自 [Cell](/en/docs/api/model/cell)，并定义了节点的通用属性和方法。
## constructor
@ -15,7 +15,7 @@ Node 是所有节点的基类，继承自 [Cell](./cell)，并定义了节点的
constructor(metadata?: Node.Metadata)
```
其中 `Node.Metadata` 是创建节点的选项，除了从 Cell [继承](./cell#constructor)的 [`markup`](./cell#markup)、[`attrs`](./cell#attrs-1)、[`zIndex`](./cell#zindex) 等选项外，还支持以下选项。
其中 `Node.Metadata` 是创建节点的选项，除了从 Cell [继承](/en/docs/api/model/cell#constructor)的 [`markup`](/en/docs/api/model/cell#markup)、[`attrs`](/en/docs/api/model/cell#attrs-1)、[`zIndex`](/en/docs/api/model/cell#zindex) 等选项外，还支持以下选项。
| 选项 | 类型 | 默认值 | 必选 | 描述 |
|-----------------|-----------------------------------|---------------------------|:----:|----------------------|
@ -488,7 +488,7 @@ translate(tx?: number, ty?: number, options?: Node.TranslateOptions): this
| tx | number | | `0` | 节点在 X 轴的偏移量。 |
| ty | number | | `0` | 节点在 Y 轴的偏移量。 |
| options.restrict | Rectangle.RectangleLike | | `undefined` | 将节点的可移动范围限制在指定的矩形区域内。 |
| options.transition | boolean \| Animation.Options | | `false` | 是否使用动画或指定一个[动画选项](./cell#transition)。 |
| options.transition | boolean \| Animation.Options | | `false` | 是否使用动画或指定一个[动画选项](/en/docs/api/model/cell#transition)。 |
| options.silent | boolean | | `false` | 为 `true` 时不触不触发 `'change:position'` 事件和画布重绘。 |
| options...others | object | | | 其他自定义键值对，可以在事件回调中使用。 |
@ -512,7 +512,7 @@ child.translate(30, 30, {
})
```
当 `options.transition` 为 `true` 或指定了一个[动画选项](./cell#transition)时，表示使用动画来平移节点，详情请参考[使用动画文档](./cell#transition)。
当 `options.transition` 为 `true` 或指定了一个[动画选项](/en/docs/api/model/cell#transition)时，表示使用动画来平移节点，详情请参考[使用动画文档](/en/docs/api/model/cell#transition)。
```ts
// 使用默认动画在平移节点

8
sites/x6-sites/docs/api/model/node.zh.md
View File

@ -7,7 +7,7 @@ redirect_from:
- /zh/docs/api/model
---
Node 是所有节点的基类，继承自 [Cell](./cell)，并定义了节点的通用属性和方法。
Node 是所有节点的基类，继承自 [Cell](/zh/docs/api/model/cell)，并定义了节点的通用属性和方法。
## constructor
@ -15,7 +15,7 @@ Node 是所有节点的基类，继承自 [Cell](./cell)，并定义了节点的
constructor(metadata?: Node.Metadata)
```
其中 `Node.Metadata` 是创建节点的选项，除了从 Cell [继承](./cell#constructor)的 [`markup`](./cell#markup)、[`attrs`](./cell#attrs-1)、[`zIndex`](./cell#zindex) 等选项外，还支持以下选项。
其中 `Node.Metadata` 是创建节点的选项，除了从 Cell [继承](/zh/docs/api/model/cell#constructor)的 [`markup`](/zh/docs/api/model/cell#markup)、[`attrs`](/zh/docs/api/model/cell#attrs-1)、[`zIndex`](/zh/docs/api/model/cell#zindex) 等选项外，还支持以下选项。
| 选项 | 类型 | 默认值 | 必选 | 描述 |
|-----------------|-----------------------------------|---------------------------|:----:|----------------------|
@ -488,7 +488,7 @@ translate(tx?: number, ty?: number, options?: Node.TranslateOptions): this
| tx | number | | `0` | 节点在 X 轴的偏移量。 |
| ty | number | | `0` | 节点在 Y 轴的偏移量。 |
| options.restrict | Rectangle.RectangleLike | | `undefined` | 将节点的可移动范围限制在指定的矩形区域内。 |
| options.transition | boolean \| Animation.Options | | `false` | 是否使用动画或指定一个[动画选项](./cell#transition)。 |
| options.transition | boolean \| Animation.Options | | `false` | 是否使用动画或指定一个[动画选项](/zh/docs/api/model/cell#transition)。 |
| options.silent | boolean | | `false` | 为 `true` 时不触不触发 `'change:position'` 事件和画布重绘。 |
| options...others | object | | | 其他自定义键值对，可以在事件回调中使用。 |
@ -512,7 +512,7 @@ child.translate(30, 30, {
})
```
当 `options.transition` 为 `true` 或指定了一个[动画选项](./cell#transition)时，表示使用动画来平移节点，详情请参考[使用动画文档](./cell#transition)。
当 `options.transition` 为 `true` 或指定了一个[动画选项](/zh/docs/api/model/cell#transition)时，表示使用动画来平移节点，详情请参考[使用动画文档](/zh/docs/api/model/cell#transition)。
```ts
// 使用默认动画在平移节点

10
sites/x6-sites/docs/api/registry/attr.en.md
View File

@ -2,9 +2,9 @@
title: Attr
order: 0
redirect_from:
- /zh/docs
- /zh/docs/api
- /zh/docs/api/registry
- /en/docs
- /en/docs/api
- /en/docs/api/registry
---
我们在 `Attr` 命名空间中提供了注册和管理特殊属性的方法，以及所有特殊属性的定义。
@ -542,7 +542,7 @@ edge.attr('rectSelector', {
### sourceMarker
适用于所有 `<path>` 元素，在路径的起点添加一个 SVG 元素（如起始箭头），并自动旋转该元素，使其与根据路径方向保持一致。了解更多详情请参考[这篇教程](../../tutorial/intermediate/marker)。
适用于所有 `<path>` 元素，在路径的起点添加一个 SVG 元素（如起始箭头），并自动旋转该元素，使其与根据路径方向保持一致。了解更多详情请参考[这篇教程](/en/docs/tutorial/intermediate/marker)。
```ts
edge.attr('connection/sourceMarker', {
@ -557,7 +557,7 @@ edge.attr('connection/sourceMarker', {
### targetMarker
适用于所有 `<path>` 元素，在路径的终点添加一个 SVG 元素（如终点箭头），并自动旋转该元素，使其与根据路径方向保持一致。了解更多详情请参考[这篇教程](../../tutorial/intermediate/marker)。
适用于所有 `<path>` 元素，在路径的终点添加一个 SVG 元素（如终点箭头），并自动旋转该元素，使其与根据路径方向保持一致。了解更多详情请参考[这篇教程](/en/docs/tutorial/intermediate/marker)。
[[warning]]
| 需要注意的是，该元素初始时就被旋转了 `180` 度，在此基础上再自动调整旋转角度，并与路径的方向保持一致。例如，对于一个水平的直线，我们为其起点指定了一个向左的箭头，我们也可以为其重点指定相同的箭头，这个箭头会自动指向右侧（自动旋转了 `180` 度）。

4
sites/x6-sites/docs/api/registry/attr.zh.md
View File

@ -542,7 +542,7 @@ edge.attr('rectSelector', {
### sourceMarker
适用于所有 `<path>` 元素，在路径的起点添加一个 SVG 元素（如起始箭头），并自动旋转该元素，使其与根据路径方向保持一致。了解更多详情请参考[这篇教程](../../tutorial/intermediate/marker)。
适用于所有 `<path>` 元素，在路径的起点添加一个 SVG 元素（如起始箭头），并自动旋转该元素，使其与根据路径方向保持一致。了解更多详情请参考[这篇教程](/zh/docs/tutorial/intermediate/marker)。
```ts
edge.attr('connection/sourceMarker', {
@ -557,7 +557,7 @@ edge.attr('connection/sourceMarker', {
### targetMarker
适用于所有 `<path>` 元素，在路径的终点添加一个 SVG 元素（如终点箭头），并自动旋转该元素，使其与根据路径方向保持一致。了解更多详情请参考[这篇教程](../../tutorial/intermediate/marker)。
适用于所有 `<path>` 元素，在路径的终点添加一个 SVG 元素（如终点箭头），并自动旋转该元素，使其与根据路径方向保持一致。了解更多详情请参考[这篇教程](/zh/docs/tutorial/intermediate/marker)。
[[warning]]
| 需要注意的是，该元素初始时就被旋转了 `180` 度，在此基础上再自动调整旋转角度，并与路径的方向保持一致。例如，对于一个水平的直线，我们为其起点指定了一个向左的箭头，我们也可以为其重点指定相同的箭头，这个箭头会自动指向右侧（自动旋转了 `180` 度）。

6
sites/x6-sites/docs/api/registry/connection-point.en.md
View File

@ -7,10 +7,10 @@ redirect_from:
- /en/docs/api/registry
---
连接点 ConnectionPoint 与锚点 [Anchor](./node-anchor) 共同确定了边的起点或终点。
连接点 ConnectionPoint 与锚点 [Anchor](/en/docs/api/registry/node-anchor) 共同确定了边的起点或终点。
- 起点：从第一个路径点或目标节点的中心（没有路径点时）画一条参考线到源节点的锚点，然后根据 [connectionPoint](../model/edge#source-和-target) 指定的交点计算方法，计算参考线与图形的交点，该交点就是边的起点。
- 终点：从最后一个路径点或源节点的中心（没有路径点时）画一条参考线到目标节点的锚点，然后根据 [connectionPoint](../model/edge#source-和-target) 指定的交点计算方法，计算参考线与图形的交点，该交点就是边的终点。
- 起点：从第一个路径点或目标节点的中心（没有路径点时）画一条参考线到源节点的锚点，然后根据 [connectionPoint](/en/docs/api/model/edge#source-和-target) 指定的交点计算方法，计算参考线与图形的交点，该交点就是边的起点。
- 终点：从最后一个路径点或源节点的中心（没有路径点时）画一条参考线到目标节点的锚点，然后根据 [connectionPoint](/en/docs/api/model/edge#source-和-target) 指定的交点计算方法，计算参考线与图形的交点，该交点就是边的终点。
我们在 `Registry.ConnectionPoint.presets` 命名空间中提供了以下几种连接点计算方法。

12
sites/x6-sites/docs/api/registry/connection-point.zh.md
View File

@ -2,15 +2,15 @@
title: ConnectionPoint
order: 12
redirect_from:
- /en/docs
- /en/docs/api
- /en/docs/api/registry
- /zh/docs
- /zh/docs/api
- /zh/docs/api/registry
---
连接点 ConnectionPoint 与锚点 [Anchor](./node-anchor) 共同确定了边的起点或终点。
连接点 ConnectionPoint 与锚点 [Anchor](/zh/docs/api/registry/node-anchor) 共同确定了边的起点或终点。
- 起点：从第一个路径点或目标节点的中心（没有路径点时）画一条参考线到源节点的锚点，然后根据 [connectionPoint](../model/edge#source-和-target) 指定的交点计算方法，计算参考线与图形的交点，该交点就是边的起点。
- 终点：从最后一个路径点或源节点的中心（没有路径点时）画一条参考线到目标节点的锚点，然后根据 [connectionPoint](../model/edge#source-和-target) 指定的交点计算方法，计算参考线与图形的交点，该交点就是边的终点。
- 起点：从第一个路径点或目标节点的中心（没有路径点时）画一条参考线到源节点的锚点，然后根据 [connectionPoint](/zh/docs/api/model/edge#source-和-target) 指定的交点计算方法，计算参考线与图形的交点，该交点就是边的起点。
- 终点：从最后一个路径点或源节点的中心（没有路径点时）画一条参考线到目标节点的锚点，然后根据 [connectionPoint](/zh/docs/api/model/edge#source-和-target) 指定的交点计算方法，计算参考线与图形的交点，该交点就是边的终点。
我们在 `Registry.ConnectionPoint.presets` 命名空间中提供了以下几种连接点计算方法。

6
sites/x6-sites/docs/api/registry/edge-anchor.en.md
View File

@ -7,10 +7,10 @@ redirect_from:
- /en/docs/api/registry
---
当边连接到边时，可以通过 EdgeAnchor 来指定被连接的边上的锚点，锚点与连接点 [ConnectionPoint](./connection-point) 共同确定了边的起点和终点。
当边连接到边时，可以通过 EdgeAnchor 来指定被连接的边上的锚点，锚点与连接点 [ConnectionPoint](/en/docs/api/registry/connection-point) 共同确定了边的起点和终点。
- 起点：从第一个路径点或目标节点的中心（没有路径点时）画一条参考线到源节点的锚点，然后根据 [connectionPoint](../model/edge#source-和-target) 指定的交点计算方法，计算参考线与图形的交点，该交点就是边的起点。
- 终点：从最后一个路径点或源节点的中心（没有路径点时）画一条参考线到目标节点的锚点，然后根据 [connectionPoint](../model/edge#source-和-target) 指定的交点计算方法，计算参考线与图形的交点，该交点就是边的终点。
- 起点：从第一个路径点或目标节点的中心（没有路径点时）画一条参考线到源节点的锚点，然后根据 [connectionPoint](/en/docs/api/model/edge#source-和-target) 指定的交点计算方法，计算参考线与图形的交点，该交点就是边的起点。
- 终点：从最后一个路径点或源节点的中心（没有路径点时）画一条参考线到目标节点的锚点，然后根据 [connectionPoint](/en/docs/api/model/edge#source-和-target) 指定的交点计算方法，计算参考线与图形的交点，该交点就是边的终点。
我们在 `Registry.EdgeAnchor.presets` 命名空间中提供了以下几种锚点定义。

6
sites/x6-sites/docs/api/registry/edge-anchor.zh.md
View File

@ -7,10 +7,10 @@ redirect_from:
- /zh/docs/api/registry
---
当边连接到边时，可以通过 EdgeAnchor 来指定被连接的边上的锚点，锚点与连接点 [ConnectionPoint](./connection-point) 共同确定了边的起点和终点。
当边连接到边时，可以通过 EdgeAnchor 来指定被连接的边上的锚点，锚点与连接点 [ConnectionPoint](/zh/docs/api/registry/connection-point) 共同确定了边的起点和终点。
- 起点：从第一个路径点或目标节点的中心（没有路径点时）画一条参考线到源节点的锚点，然后根据 [connectionPoint](../model/edge#source-和-target) 指定的交点计算方法，计算参考线与图形的交点，该交点就是边的起点。
- 终点：从最后一个路径点或源节点的中心（没有路径点时）画一条参考线到目标节点的锚点，然后根据 [connectionPoint](../model/edge#source-和-target) 指定的交点计算方法，计算参考线与图形的交点，该交点就是边的终点。
- 起点：从第一个路径点或目标节点的中心（没有路径点时）画一条参考线到源节点的锚点，然后根据 [connectionPoint](/zh/docs/api/model/edge#source-和-target) 指定的交点计算方法，计算参考线与图形的交点，该交点就是边的起点。
- 终点：从最后一个路径点或源节点的中心（没有路径点时）画一条参考线到目标节点的锚点，然后根据 [connectionPoint](/zh/docs/api/model/edge#source-和-target) 指定的交点计算方法，计算参考线与图形的交点，该交点就是边的终点。
我们在 `Registry.EdgeAnchor.presets` 命名空间中提供了以下几种锚点定义。

4
sites/x6-sites/docs/api/registry/edge-tool.en.md
View File

@ -400,7 +400,7 @@ graph.on('edge:mouseleave', ({ cell }) => {
## registry
我们在 Registry.EdgeTool.registry 对象上提供了注册和取消注册工具的方法，工具实际上是一个继承自 ToolItem 的[视图](../view/view)。
我们在 Registry.EdgeTool.registry 对象上提供了注册和取消注册工具的方法，工具实际上是一个继承自 ToolItem 的[视图](/en/docs/api/view/view)。
```ts
export type Definition = typeof ToolItem | (new (options: ToolItem.Options) => ToolItem)
@ -438,7 +438,7 @@ unregister(name: string): Definition | null
### 自定义工具
场景一：继承 `ToolItem` 实现一个工具类，难度较高，要求对[视图基类](../view/view)和 `ToolItem` 类都有所了解，可以参考上述内置工具的源码，这里不展开叙述。
场景一：继承 `ToolItem` 实现一个工具类，难度较高，要求对[视图基类](/en/docs/api/view/view)和 `ToolItem` 类都有所了解，可以参考上述内置工具的源码，这里不展开叙述。
```ts
Graph.registerEdgeTool('button', Button)

4
sites/x6-sites/docs/api/registry/edge-tool.zh.md
View File

@ -400,7 +400,7 @@ graph.on('edge:mouseleave', ({ cell }) => {
## registry
我们在 Registry.EdgeTool.registry 对象上提供了注册和取消注册工具的方法，工具实际上是一个继承自 ToolItem 的[视图](../view/view)。
我们在 Registry.EdgeTool.registry 对象上提供了注册和取消注册工具的方法，工具实际上是一个继承自 ToolItem 的[视图](/zh/docs/api/view/view)。
```ts
export type Definition = typeof ToolItem | (new (options: ToolItem.Options) => ToolItem)
@ -438,7 +438,7 @@ unregister(name: string): Definition | null
### 自定义工具
场景一：继承 `ToolItem` 实现一个工具类，难度较高，要求对[视图基类](../view/view)和 `ToolItem` 类都有所了解，可以参考上述内置工具的源码，这里不展开叙述。
场景一：继承 `ToolItem` 实现一个工具类，难度较高，要求对[视图基类](/zh/docs/api/view/view)和 `ToolItem` 类都有所了解，可以参考上述内置工具的源码，这里不展开叙述。
```ts
Graph.registerEdgeTool('button', Button)

2
sites/x6-sites/docs/api/registry/filter.en.md
View File

@ -7,7 +7,7 @@ redirect_from:
- /en/docs/api/registry
---
我们可以使用 [filter](./attr#filter) 这个特殊属性来为元素指定 [SVG 滤镜](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Filter_effects)，像下面这样，为该元素的 `filter` 属性指定一个预定义的对象，其中 `name` 和 `args` 分别指定了滤镜名称和滤镜参数。
我们可以使用 [filter](/en/docs/api/registry/attr#filter) 这个特殊属性来为元素指定 [SVG 滤镜](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Filter_effects)，像下面这样，为该元素的 `filter` 属性指定一个预定义的对象，其中 `name` 和 `args` 分别指定了滤镜名称和滤镜参数。
```ts
// 创建节点是通过 attrs 选项指定滤镜

2
sites/x6-sites/docs/api/registry/filter.zh.md
View File

@ -7,7 +7,7 @@ redirect_from:
- /zh/docs/api/registry
---
我们可以使用 [filter](./attr#filter) 这个特殊属性来为元素指定 [SVG 滤镜](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Filter_effects)，像下面这样，为该元素的 `filter` 属性指定一个预定义的对象，其中 `name` 和 `args` 分别指定了滤镜名称和滤镜参数。
我们可以使用 [filter](/zh/docs/api/registry/attr#filter) 这个特殊属性来为元素指定 [SVG 滤镜](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Filter_effects)，像下面这样，为该元素的 `filter` 属性指定一个预定义的对象，其中 `name` 和 `args` 分别指定了滤镜名称和滤镜参数。
```ts
// 创建节点是通过 attrs 选项指定滤镜

2
sites/x6-sites/docs/api/registry/highlighter.en.md
View File

@ -43,7 +43,7 @@ new Graph({
- `'magnetAdsorbed'` 连线过程中，自动吸附到链接桩时被使用。
另外，也可以直接使用在 [`cellView.highlight(...)`](../view/cellview#highlight) 方法中，用来高亮指定的元素。
另外，也可以直接使用在 [`cellView.highlight(...)`](/en/docs/api/view/cellview#highlight) 方法中，用来高亮指定的元素。
```ts
cellView.highlight(elem, {

2
sites/x6-sites/docs/api/registry/highlighter.zh.md
View File

@ -43,7 +43,7 @@ new Graph({
- `'magnetAdsorbed'` 连线过程中，自动吸附到链接桩时被使用。
另外，也可以直接使用在 [`cellView.highlight(...)`](../view/cellview#highlight) 方法中，用来高亮指定的元素。
另外，也可以直接使用在 [`cellView.highlight(...)`](/zh/docs/api/view/cellview#highlight) 方法中，用来高亮指定的元素。
```ts
cellView.highlight(elem, {

2
sites/x6-sites/docs/api/registry/marker.en.md
View File

@ -7,7 +7,7 @@ redirect_from:
- /en/docs/api/registry
---
我们可以通过 [`sourceMarker`](../../api/registry/attr#sourcemarker) 和 [`targetMarker`](../../api/registry/attr#targetmarker) 两个特殊属性，来指定边的起始箭头和终止箭头。同时我们将一些常用的箭头参数化并注册到 `Registry.Marker.presets` 命名空间中，这些箭头被称为“内置箭头”，使用内置箭头时只需要指定箭头名 `name` 和对应的参数即可，填充颜色 `fill` 和边框颜色 `stroke` 默认继承自边，可以通过指定 `fill` 和 `stroke` 属性来覆盖。
我们可以通过 [`sourceMarker`](/en/docs/api/registry/attr#sourcemarker) 和 [`targetMarker`](/en/docs/api/registry/attr#targetmarker) 两个特殊属性，来指定边的起始箭头和终止箭头。同时我们将一些常用的箭头参数化并注册到 `Registry.Marker.presets` 命名空间中，这些箭头被称为“内置箭头”，使用内置箭头时只需要指定箭头名 `name` 和对应的参数即可，填充颜色 `fill` 和边框颜色 `stroke` 默认继承自边，可以通过指定 `fill` 和 `stroke` 属性来覆盖。
```ts
edge.attr({

2
sites/x6-sites/docs/api/registry/marker.zh.md
View File

@ -7,7 +7,7 @@ redirect_from:
- /zh/docs/api/registry
---
我们可以通过 [`sourceMarker`](../../api/registry/attr#sourcemarker) 和 [`targetMarker`](../../api/registry/attr#targetmarker) 两个特殊属性，来指定边的起始箭头和终止箭头。同时我们将一些常用的箭头参数化并注册到 `Registry.Marker.presets` 命名空间中，这些箭头被称为“内置箭头”，使用内置箭头时只需要指定箭头名 `name` 和对应的参数即可，填充颜色 `fill` 和边框颜色 `stroke` 默认继承自边，可以通过指定 `fill` 和 `stroke` 属性来覆盖。
我们可以通过 [`sourceMarker`](/zh/docs/api/registry/attr#sourcemarker) 和 [`targetMarker`](/zh/docs/api/registry/attr#targetmarker) 两个特殊属性，来指定边的起始箭头和终止箭头。同时我们将一些常用的箭头参数化并注册到 `Registry.Marker.presets` 命名空间中，这些箭头被称为“内置箭头”，使用内置箭头时只需要指定箭头名 `name` 和对应的参数即可，填充颜色 `fill` 和边框颜色 `stroke` 默认继承自边，可以通过指定 `fill` 和 `stroke` 属性来覆盖。
```ts
edge.attr({

6
sites/x6-sites/docs/api/registry/node-anchor.en.md
View File

@ -7,10 +7,10 @@ redirect_from:
- /en/docs/api/registry
---
当连接到节点时，可以通过 EdgeAnchor 来指定被连接的节点的锚点，锚点与连接点 [ConnectionPoint](./connection-point) 共同确定了边的起点和终点。
当连接到节点时，可以通过 EdgeAnchor 来指定被连接的节点的锚点，锚点与连接点 [ConnectionPoint](/en/docs/api/registry/connection-point) 共同确定了边的起点和终点。
- 起点：从第一个路径点或目标节点的中心（没有路径点时）画一条参考线到源节点的锚点，然后根据 [connectionPoint](../model/edge#source-和-target) 指定的交点计算方法，计算参考线与图形的交点，该交点就是边的起点。
- 终点：从最后一个路径点或源节点的中心（没有路径点时）画一条参考线到目标节点的锚点，然后根据 [connectionPoint](../model/edge#source-和-target) 指定的交点计算方法，计算参考线与图形的交点，该交点就是边的终点。
- 起点：从第一个路径点或目标节点的中心（没有路径点时）画一条参考线到源节点的锚点，然后根据 [connectionPoint](/en/docs/api/model/edge#source-和-target) 指定的交点计算方法，计算参考线与图形的交点，该交点就是边的起点。
- 终点：从最后一个路径点或源节点的中心（没有路径点时）画一条参考线到目标节点的锚点，然后根据 [connectionPoint](/en/docs/api/model/edge#source-和-target) 指定的交点计算方法，计算参考线与图形的交点，该交点就是边的终点。
我们在 `Registry.NodeAnchor.presets` 命名空间中提供了以下几种锚点定义。

6
sites/x6-sites/docs/api/registry/node-anchor.zh.md
View File

@ -7,10 +7,10 @@ redirect_from:
- /zh/docs/api/registry
---
当连接到节点时，可以通过 EdgeAnchor 来指定被连接的节点的锚点，锚点与连接点 [ConnectionPoint](./connection-point) 共同确定了边的起点和终点。
当连接到节点时，可以通过 EdgeAnchor 来指定被连接的节点的锚点，锚点与连接点 [ConnectionPoint](/zh/docs/api/registry/connection-point) 共同确定了边的起点和终点。
- 起点：从第一个路径点或目标节点的中心（没有路径点时）画一条参考线到源节点的锚点，然后根据 [connectionPoint](../model/edge#source-和-target) 指定的交点计算方法，计算参考线与图形的交点，该交点就是边的起点。
- 终点：从最后一个路径点或源节点的中心（没有路径点时）画一条参考线到目标节点的锚点，然后根据 [connectionPoint](../model/edge#source-和-target) 指定的交点计算方法，计算参考线与图形的交点，该交点就是边的终点。
- 起点：从第一个路径点或目标节点的中心（没有路径点时）画一条参考线到源节点的锚点，然后根据 [connectionPoint](/zh/docs/api/model/edge#source-和-target) 指定的交点计算方法，计算参考线与图形的交点，该交点就是边的起点。
- 终点：从最后一个路径点或源节点的中心（没有路径点时）画一条参考线到目标节点的锚点，然后根据 [connectionPoint](/zh/docs/api/model/edge#source-和-target) 指定的交点计算方法，计算参考线与图形的交点，该交点就是边的终点。
我们在 `Registry.NodeAnchor.presets` 命名空间中提供了以下几种锚点定义。

4
sites/x6-sites/docs/api/registry/node-tool.en.md
View File

@ -234,7 +234,7 @@ const source = graph.addNode({
## registry
我们在 Registry.NodeTool.registry 对象上提供了注册和取消注册工具的方法，工具实际上是一个继承自 ToolItem 的[视图](../view/view)。
我们在 Registry.NodeTool.registry 对象上提供了注册和取消注册工具的方法，工具实际上是一个继承自 ToolItem 的[视图](/en/docs/api/view/view)。
```ts
export type Definition = typeof ToolItem | (new (options: ToolItem.Options) => ToolItem)
@ -272,7 +272,7 @@ unregister(name: string): Definition | null
### 自定义工具
场景一：继承 `ToolItem` 实现一个工具类，难度较高，要求对[视图基类](../view/view)和 `ToolItem` 类都有所了解，可以参考上述内置工具的源码，这里不展开叙述。
场景一：继承 `ToolItem` 实现一个工具类，难度较高，要求对[视图基类](/en/docs/api/view/view)和 `ToolItem` 类都有所了解，可以参考上述内置工具的源码，这里不展开叙述。
```ts
Graph.registerNodeTool('button', Button)

4
sites/x6-sites/docs/api/registry/node-tool.zh.md
View File

@ -234,7 +234,7 @@ const source = graph.addNode({
## registry
我们在 Registry.NodeTool.registry 对象上提供了注册和取消注册工具的方法，工具实际上是一个继承自 ToolItem 的[视图](../view/view)。
我们在 Registry.NodeTool.registry 对象上提供了注册和取消注册工具的方法，工具实际上是一个继承自 ToolItem 的[视图](/zh/docs/api/view/view)。
```ts
export type Definition = typeof ToolItem | (new (options: ToolItem.Options) => ToolItem)
@ -272,7 +272,7 @@ unregister(name: string): Definition | null
### 自定义工具
场景一：继承 `ToolItem` 实现一个工具类，难度较高，要求对[视图基类](../view/view)和 `ToolItem` 类都有所了解，可以参考上述内置工具的源码，这里不展开叙述。
场景一：继承 `ToolItem` 实现一个工具类，难度较高，要求对[视图基类](/zh/docs/api/view/view)和 `ToolItem` 类都有所了解，可以参考上述内置工具的源码，这里不展开叙述。
```ts
Graph.registerNodeTool('button', Button)

2
sites/x6-sites/docs/api/registry/router.en.md
View File

@ -7,7 +7,7 @@ redirect_from:
- /en/docs/api/registry
---
路由将边的路径点 [vertices](../../tutorial/basic/edge#vertices) 做进一步转换处理，并在必要时添加额外的点，然后返回处理后的点（不包含边的起点和终点）。例如，经过 [`orth`](#orth) 路由处理后，边的每一条线段都是水平或垂直的正交线段。
路由将边的路径点 [vertices](/en/docs/tutorial/basic/edge#vertices) 做进一步转换处理，并在必要时添加额外的点，然后返回处理后的点（不包含边的起点和终点）。例如，经过 [`orth`](#orth) 路由处理后，边的每一条线段都是水平或垂直的正交线段。
我们在 `Registry.Router.presets` 命名空间中提供了以下几种路由。

2
sites/x6-sites/docs/api/registry/router.zh.md
View File

@ -7,7 +7,7 @@ redirect_from:
- /zh/docs/api/registry
---
路由将边的路径点 [vertices](../../tutorial/basic/edge#vertices) 做进一步转换处理，并在必要时添加额外的点，然后返回处理后的点（不包含边的起点和终点）。例如，经过 [`orth`](#orth) 路由处理后，边的每一条线段都是水平或垂直的正交线段。
路由将边的路径点 [vertices](/zh/docs/tutorial/basic/edge#vertices) 做进一步转换处理，并在必要时添加额外的点，然后返回处理后的点（不包含边的起点和终点）。例如，经过 [`orth`](#orth) 路由处理后，边的每一条线段都是水平或垂直的正交线段。
我们在 `Registry.Router.presets` 命名空间中提供了以下几种路由。

2
sites/x6-sites/docs/api/ui/auto-scrollbox.en.md
View File

@ -41,7 +41,7 @@ import '@antv/x6-react-components/es/auto-scroll-box/style/index.css'
| 参数 | 说明 | 类型 | 默认值 |
|----------------|----------------------------------------|-----------------------------------------|--------|
| scrollBoxProps | 内部的 [ScrollBox](./scrollbox) 组件选项 | ScrollBox.Props | - |
| scrollBoxProps | 内部的 [ScrollBox](/en/docs/api/ui/scrollbox) 组件选项 | ScrollBox.Props | - |
| refreshRate | 监听内容容器大小改变的频率 | number | `1000` |
| skipOnMount | 首次渲染时是否触发 `onResize` 回调 | boolean | - |
| scrollX | 是否显示水平滚动条 | boolean | `true` |

2
sites/x6-sites/docs/api/ui/auto-scrollbox.zh.md
View File

@ -41,7 +41,7 @@ import '@antv/x6-react-components/es/auto-scroll-box/style/index.css'
| 参数 | 说明 | 类型 | 默认值 |
|----------------|----------------------------------------|-----------------------------------------|--------|
| scrollBoxProps | 内部的 [ScrollBox](./scrollbox) 组件选项 | ScrollBox.Props | - |
| scrollBoxProps | 内部的 [ScrollBox](/zh/docs/api/ui/scrollbox) 组件选项 | ScrollBox.Props | - |
| refreshRate | 监听内容容器大小改变的频率 | number | `1000` |
| skipOnMount | 首次渲染时是否触发 `onResize` 回调 | boolean | - |
| scrollX | 是否显示水平滚动条 | boolean | `true` |

2
sites/x6-sites/docs/api/ui/contextmenu.en.md
View File

@ -48,7 +48,7 @@ const menu = (
| 参数 | 说明 | 类型 | 默认值 |
|-------------------|-----------------------------------------------------------------------------------------------|---------------------------------------|---------|
| className | 自定义的样式名 | string | - |
| menu | 菜单 [Menu](./menu) 组件 | Menu | - |
| menu | 菜单 [Menu](/en/docs/api/ui/menu) 组件 | Menu | - |
| overlayClassName | 下拉根元素的类名称 | string | - |
| overlayStyle | 下拉根元素的样式 | CSSProperties | - |
| disabled | 菜单是否禁用 | boolean | `false` |

2
sites/x6-sites/docs/api/ui/contextmenu.zh.md
View File

@ -48,7 +48,7 @@ const menu = (
| 参数 | 说明 | 类型 | 默认值 |
|-------------------|-----------------------------------------------------------------------------------------------|---------------------------------------|---------|
| className | 自定义的样式名 | string | - |
| menu | 菜单 [Menu](./menu) 组件 | Menu | - |
| menu | 菜单 [Menu](/zh/docs/api/ui/menu) 组件 | Menu | - |
| overlayClassName | 下拉根元素的类名称 | string | - |
| overlayStyle | 下拉根元素的样式 | CSSProperties | - |
| disabled | 菜单是否禁用 | boolean | `false` |

2
sites/x6-sites/docs/api/ui/dropdown.en.md
View File

@ -38,7 +38,7 @@ const menu = (
| 参数 | 说明 | 类型 | 默认值 |
|-------------------|-------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------|----------------|
| className | 自定义的样式名 | string | - |
| overlay | 菜单，通常使用 [Menu](./menu) 组件 | ReactNode | - |
| overlay | 菜单，通常使用 [Menu](/en/docs/api/ui/menu) 组件 | ReactNode | - |
| overlayClassName | 下拉根元素的类名称 | string | - |
| overlayStyle | 下拉根元素的样式 | CSSProperties | - |
| disabled | 菜单是否禁用 | boolean | `false` |

2
sites/x6-sites/docs/api/ui/dropdown.zh.md
View File

@ -38,7 +38,7 @@ const menu = (
| 参数 | 说明 | 类型 | 默认值 |
|-------------------|-------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------|----------------|
| className | 自定义的样式名 | string | - |
| overlay | 菜单，通常使用 [Menu](./menu) 组件 | ReactNode | - |
| overlay | 菜单，通常使用 [Menu](/zh/docs/api/ui/menu) 组件 | ReactNode | - |
| overlayClassName | 下拉根元素的类名称 | string | - |
| overlayStyle | 下拉根元素的样式 | CSSProperties | - |
| disabled | 菜单是否禁用 | boolean | `false` |

2
sites/x6-sites/docs/api/ui/menu.en.md
View File

@ -7,7 +7,7 @@ redirect_from:
- /en/docs/api/ui
---
菜单组件。一般在 [Menubar](./menubar)、[ContextMenu](./contextmenu)、[Dropdown](./dropdown) 组件中使用。
菜单组件。一般在 [Menubar](/en/docs/api/ui/menubar)、[ContextMenu](/en/docs/api/ui/contextmenu)、[Dropdown](/en/docs/api/ui/dropdown) 组件中使用。
<iframe src="/demos/api/ui/menu/basic"></iframe>

2
sites/x6-sites/docs/api/ui/menu.zh.md
View File

@ -7,7 +7,7 @@ redirect_from:
- /zh/docs/api/ui
---
菜单组件。一般在 [Menubar](./menubar)、[ContextMenu](./contextmenu)、[Dropdown](./dropdown) 组件中使用。
菜单组件。一般在 [Menubar](/zh/docs/api/ui/menubar)、[ContextMenu](/zh/docs/api/ui/contextmenu)、[Dropdown](/zh/docs/api/ui/dropdown) 组件中使用。
<iframe src="/demos/api/ui/menu/basic"></iframe>

2
sites/x6-sites/docs/api/ui/toolbar.en.md
View File

@ -73,6 +73,6 @@ const Group = Toolbar.Group
| tooltipAsTitle | 是否将提示文本作为工具项的 `title` 属性 | boolean | - |
| dropdown | 下拉菜单 | ReactNode | - |
| dropdownArrow | 是否显示下拉菜单箭头 | boolean | - |
| dropdown | [下拉菜单](./dropdown)的选项 | Dropdown.Props | - |
| dropdown | [下拉菜单](/en/docs/api/ui/dropdown)的选项 | Dropdown.Props | - |
| onClick | 点击工具项的回调函数 | (name?: string) => void | - |

2
sites/x6-sites/docs/api/ui/toolbar.zh.md
View File

@ -73,6 +73,6 @@ const Group = Toolbar.Group
| tooltipAsTitle | 是否将提示文本作为工具项的 `title` 属性 | boolean | - |
| dropdown | 下拉菜单 | ReactNode | - |
| dropdownArrow | 是否显示下拉菜单箭头 | boolean | - |
| dropdown | [下拉菜单](./dropdown)的选项 | Dropdown.Props | - |
| dropdown | [下拉菜单](/zh/docs/api/ui/dropdown)的选项 | Dropdown.Props | - |
| onClick | 点击工具项的回调函数 | (name?: string) => void | - |

12
sites/x6-sites/docs/api/view/cellview.en.md
View File

@ -2,12 +2,12 @@
title: CellView
order: 1
redirect_from:
- /zh/docs
- /zh/docs/api
- /zh/docs/api/view
- /en/docs
- /en/docs/api
- /en/docs/api/view
---
节点和边视图的基类，继承自 [View](./view)。
节点和边视图的基类，继承自 [View](/en/docs/api/view/view)。
## constructor
@ -78,8 +78,8 @@ highlight(elem?: Element | null, options?: CellView.HighlightOptions): this
支持的 `options.highlighter` 有：
- [stroke](../registry/highlighter#stroke)
- [className](../registry/highlighter#classname)
- [stroke](/en/docs/api/registry/highlighter#stroke)
- [className](/en/docs/api/registry/highlighter#classname)
#### unhighlight(...)

6
sites/x6-sites/docs/api/view/cellview.zh.md
View File

@ -7,7 +7,7 @@ redirect_from:
- /zh/docs/api/view
---
节点和边视图的基类，继承自 [View](./view)。
节点和边视图的基类，继承自 [View](/zh/docs/api/view/view)。
## constructor
@ -78,8 +78,8 @@ highlight(elem?: Element | null, options?: CellView.HighlightOptions): this
支持的 `options.highlighter` 有：
- [stroke](../registry/highlighter#stroke)
- [className](../registry/highlighter#classname)
- [stroke](/zh/docs/api/registry/highlighter#stroke)
- [className](/zh/docs/api/registry/highlighter#classname)
#### unhighlight(...)

8
sites/x6-sites/docs/api/view/edgeview.en.md
View File

@ -2,12 +2,12 @@
title: EdgeView
order: 3
redirect_from:
- /zh/docs
- /zh/docs/api
- /zh/docs/api/view
- /en/docs
- /en/docs/api
- /en/docs/api/view
---
边视图，继承自 [CellView](./cellview)。
边视图，继承自 [CellView](/en/docs/api/view/cellview)。
## constructor

2
sites/x6-sites/docs/api/view/edgeview.zh.md
View File

@ -7,7 +7,7 @@ redirect_from:
- /zh/docs/api/view
---
边视图，继承自 [CellView](./cellview)。
边视图，继承自 [CellView](/zh/docs/api/view/cellview)。
## constructor

2
sites/x6-sites/docs/api/view/nodeview.en.md
View File

@ -7,7 +7,7 @@ redirect_from:
- /en/docs/api/view
---
节点视图，继承自 [CellView](./cellview)。
节点视图，继承自 [CellView](/en/docs/api/view/cellview)。
## constructor

2
sites/x6-sites/docs/api/view/nodeview.zh.md
View File

@ -7,7 +7,7 @@ redirect_from:
- /zh/docs/api/view
---
节点视图，继承自 [CellView](./cellview)。
节点视图，继承自 [CellView](/zh/docs/api/view/cellview)。
## constructor

12
sites/x6-sites/docs/tutorial/advanced/animation.en.md
View File

@ -2,16 +2,16 @@
title: 使用动画
order: 2
redirect_from:
- /zh/docs
- /zh/docs/tutorial
- /zh/docs/tutorial/advanced
- /en/docs
- /en/docs/tutorial
- /en/docs/tutorial/advanced
---
## Transition
### 开始
我们可以调用 [`cell.transition(...)`](../../api/model/cell#transition) 方法，来将指定路径 `path` 上对应的属性值通过平滑动画的形式过渡到 `target` 指定的目标值，并返回 `stop` 方法，调用该方法时立即停止该动画。
我们可以调用 [`cell.transition(...)`](/en/docs/api/model/cell#transition) 方法，来将指定路径 `path` 上对应的属性值通过平滑动画的形式过渡到 `target` 指定的目标值，并返回 `stop` 方法，调用该方法时立即停止该动画。
```sign
transition(
@ -93,7 +93,7 @@ transition(
### 停止
动画开始后可以调用 [`cell.stopTransition(...)`](../../api/model/cell#stoptransition) 方法来停止指定路径上的动画。
动画开始后可以调用 [`cell.stopTransition(...)`](/en/docs/api/model/cell#stoptransition) 方法来停止指定路径上的动画。
```sign
stopTransition(
@ -301,7 +301,7 @@ if (view) {
### 沿边运动的动画
我们可以调用 EdgeView 上的 [`sendToken(...)`](../../api/view/edgeview#sendtoken) 方法来触发一个沿边运动的动画，同时返回一个停止该动画的方法。
我们可以调用 EdgeView 上的 [`sendToken(...)`](/en/docs/api/view/edgeview#sendtoken) 方法来触发一个沿边运动的动画，同时返回一个停止该动画的方法。
```sign
sendToken(

6
sites/x6-sites/docs/tutorial/advanced/animation.zh.md
View File

@ -11,7 +11,7 @@ redirect_from:
### 开始
我们可以调用 [`cell.transition(...)`](../../api/model/cell#transition) 方法，来将指定路径 `path` 上对应的属性值通过平滑动画的形式过渡到 `target` 指定的目标值，并返回 `stop` 方法，调用该方法时立即停止该动画。
我们可以调用 [`cell.transition(...)`](/zh/docs/api/model/cell#transition) 方法，来将指定路径 `path` 上对应的属性值通过平滑动画的形式过渡到 `target` 指定的目标值，并返回 `stop` 方法，调用该方法时立即停止该动画。
```sign
transition(
@ -93,7 +93,7 @@ transition(
### 停止
动画开始后可以调用 [`cell.stopTransition(...)`](../../api/model/cell#stoptransition) 方法来停止指定路径上的动画。
动画开始后可以调用 [`cell.stopTransition(...)`](/zh/docs/api/model/cell#stoptransition) 方法来停止指定路径上的动画。
```sign
stopTransition(
@ -301,7 +301,7 @@ if (view) {
### 沿边运动的动画
我们可以调用 EdgeView 上的 [`sendToken(...)`](../../api/view/edgeview#sendtoken) 方法来触发一个沿边运动的动画，同时返回一个停止该动画的方法。
我们可以调用 EdgeView 上的 [`sendToken(...)`](/zh/docs/api/view/edgeview#sendtoken) 方法来触发一个沿边运动的动画，同时返回一个停止该动画的方法。
```sign
sendToken(

18
sites/x6-sites/docs/tutorial/advanced/components.en.md
View File

@ -102,12 +102,12 @@ import { Menu } from '@antv/x6-react-components'
点击下面链接查看每个组件的使用文档。
- [Menu](../../api/ui/menu) 菜单
- [Dropdown](../../api/ui/dropdown) 下拉菜单
- [ContextMenu](../../api/ui/contextmenu) 右键菜单
- [Menubar](../../api/ui/menubar) 菜单栏
- [Toolbar](../../api/ui/toolbar) 工具栏
- [SplitBox](../../api/ui/splitbox) 分割容器
- [ScrollBox](../../api/ui/scrollbox) 自定义滚动条的容器
- [AutoScrollBox](../../api/ui/auto-scrollbox) 自动根据内容大小设置和更新容器的滚动条
- [ColorPicker](../../api/ui/color-picker) 颜色选择器
- [Menu](/en/docs/api/ui/menu) 菜单
- [Dropdown](/en/docs/api/ui/dropdown) 下拉菜单
- [ContextMenu](/en/docs/api/ui/contextmenu) 右键菜单
- [Menubar](/en/docs/api/ui/menubar) 菜单栏
- [Toolbar](/en/docs/api/ui/toolbar) 工具栏
- [SplitBox](/en/docs/api/ui/splitbox) 分割容器
- [ScrollBox](/en/docs/api/ui/scrollbox) 自定义滚动条的容器
- [AutoScrollBox](/en/docs/api/ui/auto-scrollbox) 自动根据内容大小设置和更新容器的滚动条
- [ColorPicker](/en/docs/api/ui/color-picker) 颜色选择器

18
sites/x6-sites/docs/tutorial/advanced/components.zh.md
View File

@ -102,12 +102,12 @@ import { Menu } from '@antv/x6-react-components'
点击下面链接查看每个组件的使用文档。
- [Menu](../../api/ui/menu) 菜单
- [Dropdown](../../api/ui/dropdown) 下拉菜单
- [ContextMenu](../../api/ui/contextmenu) 右键菜单
- [Menubar](../../api/ui/menubar) 菜单栏
- [Toolbar](../../api/ui/toolbar) 工具栏
- [SplitBox](../../api/ui/splitbox) 分割容器
- [ScrollBox](../../api/ui/scrollbox) 自定义滚动条的容器
- [AutoScrollBox](../../api/ui/auto-scrollbox) 自动根据内容大小设置和更新容器的滚动条
- [ColorPicker](../../api/ui/color-picker) 颜色选择器
- [Menu](/zh/docs/api/ui/menu) 菜单
- [Dropdown](/zh/docs/api/ui/dropdown) 下拉菜单
- [ContextMenu](/zh/docs/api/ui/contextmenu) 右键菜单
- [Menubar](/zh/docs/api/ui/menubar) 菜单栏
- [Toolbar](/zh/docs/api/ui/toolbar) 工具栏
- [SplitBox](/zh/docs/api/ui/splitbox) 分割容器
- [ScrollBox](/zh/docs/api/ui/scrollbox) 自定义滚动条的容器
- [AutoScrollBox](/zh/docs/api/ui/auto-scrollbox) 自动根据内容大小设置和更新容器的滚动条
- [ColorPicker](/zh/docs/api/ui/color-picker) 颜色选择器

10
sites/x6-sites/docs/tutorial/basic/background.en.md
View File

@ -7,7 +7,7 @@ redirect_from:
- /en/docs/tutorial/basic
---
背景用于为画布指定背景颜色或背景图片，支持[水印背景](#repeat)和[自定义背景图片的重复方式](../../api/registry/background#registry)，背景层在 DOM 层级上位于画布的最底层。
背景用于为画布指定背景颜色或背景图片，支持[水印背景](#repeat)和[自定义背景图片的重复方式](/en/docs/api/registry/background#registry)，背景层在 DOM 层级上位于画布的最底层。
创建画布时，通过 `background` 选项来设置画布的背景颜色或背景图片，默认值为 `false` 表示没有（透明）背景。
@ -84,10 +84,10 @@ interface BackgroundOptions {
另外，还支持以下几个预定义值：
- [`'watermark'`](../../api/registry/background#watermark) 水印效果。
- [`'flip-x'`](../../api/registry/background#flip-x) 水平翻转背景图片。
- [`'flip-y'`](../../api/registry/background#flip-y) 垂直翻转背景图片。
- [`'flip-xy'`](../../api/registry/background#flip-xy) 水平和垂直翻转背景图片。
- [`'watermark'`](/en/docs/api/registry/background#watermark) 水印效果。
- [`'flip-x'`](/en/docs/api/registry/background#flip-x) 水平翻转背景图片。
- [`'flip-y'`](/en/docs/api/registry/background#flip-y) 垂直翻转背景图片。
- [`'flip-xy'`](/en/docs/api/registry/background#flip-xy) 水平和垂直翻转背景图片。
### opacity

10
sites/x6-sites/docs/tutorial/basic/background.zh.md
View File

@ -7,7 +7,7 @@ redirect_from:
- /zh/docs/tutorial/basic
---
背景用于为画布指定背景颜色或背景图片，支持[水印背景](#repeat)和[自定义背景图片的重复方式](../../api/registry/background#registry)，背景层在 DOM 层级上位于画布的最底层。
背景用于为画布指定背景颜色或背景图片，支持[水印背景](#repeat)和[自定义背景图片的重复方式](/en/docs/api/registry/background#registry)，背景层在 DOM 层级上位于画布的最底层。
创建画布时，通过 `background` 选项来设置画布的背景颜色或背景图片，默认值为 `false` 表示没有（透明）背景。
@ -84,10 +84,10 @@ interface BackgroundOptions {
另外，还支持以下几个预定义值：
- [`'watermark'`](../../api/registry/background#watermark) 水印效果。
- [`'flip-x'`](../../api/registry/background#flip-x) 水平翻转背景图片。
- [`'flip-y'`](../../api/registry/background#flip-y) 垂直翻转背景图片。
- [`'flip-xy'`](../../api/registry/background#flip-xy) 水平和垂直翻转背景图片。
- [`'watermark'`](/en/docs/api/registry/background#watermark) 水印效果。
- [`'flip-x'`](/en/docs/api/registry/background#flip-x) 水平翻转背景图片。
- [`'flip-y'`](/en/docs/api/registry/background#flip-y) 垂直翻转背景图片。
- [`'flip-xy'`](/en/docs/api/registry/background#flip-xy) 水平和垂直翻转背景图片。
### opacity

10
sites/x6-sites/docs/tutorial/basic/cell.en.md
View File

@ -7,7 +7,7 @@ redirect_from:
- /en/docs/tutorial/basic
---
在[快速上手](../getting-started)案例中，我们通过 JSON 数据添加了两个矩形节点和一条边到画布中，除此之外，我们在 X6 的 `Shape` 命名空间中内置了一些基础图形，如 `Rect`、`Edge`、`Circle` 等，这些图形最终都有共同的基类 `Cell`，定义了节点和边共同属性和方法，如属性样式、可见性、业务数据等，并且在实例化、定制样式、配置默认选项等方面具有相同的行为。看下面的继承关系。
在[快速上手](/en/docs/tutorial/getting-started)案例中，我们通过 JSON 数据添加了两个矩形节点和一条边到画布中，除此之外，我们在 X6 的 `Shape` 命名空间中内置了一些基础图形，如 `Rect`、`Edge`、`Circle` 等，这些图形最终都有共同的基类 `Cell`，定义了节点和边共同属性和方法，如属性样式、可见性、业务数据等，并且在实例化、定制样式、配置默认选项等方面具有相同的行为。看下面的继承关系。
```
┌──────────────────┐
@ -257,7 +257,7 @@ new SomeNode({
### attrs
在[快速上手](../getting-started)中，我们简单介绍了如何使用 `attrs` 选项定制节点样式，`attrs` 选项是一个复杂对象，该对象的 Key 是节点中 SVG 元素的选择器(Selector)，对应的值是应用到该 SVG 元素的 [SVG 属性值](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute)(如 [fill](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/fill) 和 [stroke](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/stroke))，如果你对 SVG 属性还不熟悉，可以参考 MDN 提供的[填充和边框](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Fills_and_Strokes)入门教程。
在[快速上手](/en/docs/tutorial/getting-started)中，我们简单介绍了如何使用 `attrs` 选项定制节点样式，`attrs` 选项是一个复杂对象，该对象的 Key 是节点中 SVG 元素的选择器(Selector)，对应的值是应用到该 SVG 元素的 [SVG 属性值](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute)(如 [fill](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/fill) 和 [stroke](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/stroke))，如果你对 SVG 属性还不熟悉，可以参考 MDN 提供的[填充和边框](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Fills_and_Strokes)入门教程。
选择器(Selector)通过节点的 `markup` 确定，如 `Shape.Rect` 节点定义了 `'body'`(代表 `<rect>` 元素) 和 `'label'`(代表 `<text>` 元素) 两个选择器。
@ -318,7 +318,7 @@ const rect = new Shape.Rect({
值得一提的是，支持使用小驼峰(camelCase)格式的属性名，如 `'fontSize'`，这就避免了 `'font-size'` 这种属性名作为对象 Key 时需要加引号的书写麻烦。
除了标准的 [SVG 属性](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute)，我们在 X6 中还定义了一系列特殊属性，详情请参考[如何使用特殊属性](../intermediate/attrs)和[如何自定义属性](../../api/registry/attr#definition)。另外，我们还可以使用 [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) 来定制样式，节点和边渲染到画布后分别有 `'x6-node'` 和 `'x6-edge'` 两个样式名，默认的样式定义[参考这里](https://github.com/antvis/X6/blob/master/packages/x6/src/index.less#L26-L156)。例如，我们可以像下面这样来指定节点中 `<rect>` 元素的样式：
除了标准的 [SVG 属性](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute)，我们在 X6 中还定义了一系列特殊属性，详情请参考[如何使用特殊属性](/en/docs/tutorial/intermediate/attrs)和[如何自定义属性](/en/docs/api/registry/attr#definition)。另外，我们还可以使用 [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) 来定制样式，节点和边渲染到画布后分别有 `'x6-node'` 和 `'x6-edge'` 两个样式名，默认的样式定义[参考这里](https://github.com/antvis/X6/blob/master/packages/x6/src/index.less#L26-L156)。例如，我们可以像下面这样来指定节点中 `<rect>` 元素的样式：
```css
.x6-node rect {
@ -414,11 +414,11 @@ const edge = graph.addEdge({
| Shape.DoubleEdge | double-edge | 双线边。 |
| Shape.ShadowEdge | shadow-edge | 阴影边。 |
除了使用 X6 的内置节点/边，我们还可以注册自定义节点/边并使用他们，想了解更多请参考[自定义节点](../intermediate/custom-node)和[自定义边](../intermediate/custom-edge)教程。
除了使用 X6 的内置节点/边，我们还可以注册自定义节点/边并使用他们，想了解更多请参考[自定义节点](/en/docs/tutorial/intermediate/custom-node)和[自定义边](/en/docs/tutorial/intermediate/custom-edge)教程。
### view
指定渲染节点/边所使用的视图，视图的概念与 MVC 模式中的 View 一致，我们将在[自定义节点](../intermediate/custom-node)和[自定义边](../intermediate/custom-edge)教程中做详细介绍。
指定渲染节点/边所使用的视图，视图的概念与 MVC 模式中的 View 一致，我们将在[自定义节点](/en/docs/tutorial/intermediate/custom-node)和[自定义边](/en/docs/tutorial/intermediate/custom-edge)教程中做详细介绍。
### zIndex

10
sites/x6-sites/docs/tutorial/basic/cell.zh.md
View File

@ -7,7 +7,7 @@ redirect_from:
- /zh/docs/tutorial/basic
---
在[快速上手](../getting-started)案例中，我们通过 JSON 数据添加了两个矩形节点和一条边到画布中，除此之外，我们在 X6 的 `Shape` 命名空间中内置了一些基础图形，如 `Rect`、`Edge`、`Circle` 等，这些图形最终都有共同的基类 `Cell`，定义了节点和边共同属性和方法，如属性样式、可见性、业务数据等，并且在实例化、定制样式、配置默认选项等方面具有相同的行为。看下面的继承关系。
在[快速上手](/zh/docs/tutorial/getting-started)案例中，我们通过 JSON 数据添加了两个矩形节点和一条边到画布中，除此之外，我们在 X6 的 `Shape` 命名空间中内置了一些基础图形，如 `Rect`、`Edge`、`Circle` 等，这些图形最终都有共同的基类 `Cell`，定义了节点和边共同属性和方法，如属性样式、可见性、业务数据等，并且在实例化、定制样式、配置默认选项等方面具有相同的行为。看下面的继承关系。
```
┌──────────────────┐
@ -257,7 +257,7 @@ new SomeNode({
### attrs
在[快速上手](../getting-started)中，我们简单介绍了如何使用 `attrs` 选项定制节点样式，`attrs` 选项是一个复杂对象，该对象的 Key 是节点中 SVG 元素的选择器(Selector)，对应的值是应用到该 SVG 元素的 [SVG 属性值](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute)(如 [fill](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/fill) 和 [stroke](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/stroke))，如果你对 SVG 属性还不熟悉，可以参考 MDN 提供的[填充和边框](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Fills_and_Strokes)入门教程。
在[快速上手](/zh/docs/tutorial/getting-started)中，我们简单介绍了如何使用 `attrs` 选项定制节点样式，`attrs` 选项是一个复杂对象，该对象的 Key 是节点中 SVG 元素的选择器(Selector)，对应的值是应用到该 SVG 元素的 [SVG 属性值](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute)(如 [fill](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/fill) 和 [stroke](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/stroke))，如果你对 SVG 属性还不熟悉，可以参考 MDN 提供的[填充和边框](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Fills_and_Strokes)入门教程。
选择器(Selector)通过节点的 `markup` 确定，如 `Shape.Rect` 节点定义了 `'body'`(代表 `<rect>` 元素) 和 `'label'`(代表 `<text>` 元素) 两个选择器。
@ -318,7 +318,7 @@ const rect = new Shape.Rect({
值得一提的是，支持使用小驼峰(camelCase)格式的属性名，如 `'fontSize'`，这就避免了 `'font-size'` 这种属性名作为对象 Key 时需要加引号的书写麻烦。
除了标准的 [SVG 属性](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute)，我们在 X6 中还定义了一系列特殊属性，详情请参考[如何使用特殊属性](../intermediate/attrs)和[如何自定义属性](../../api/registry/attr#definition)。另外，我们还可以使用 [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) 来定制样式，节点和边渲染到画布后分别有 `'x6-node'` 和 `'x6-edge'` 两个样式名，默认的样式定义[参考这里](https://github.com/antvis/X6/blob/master/packages/x6/src/index.less#L26-L156)。例如，我们可以像下面这样来指定节点中 `<rect>` 元素的样式：
除了标准的 [SVG 属性](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute)，我们在 X6 中还定义了一系列特殊属性，详情请参考[如何使用特殊属性](/zh/docs/tutorial/intermediate/attrs)和[如何自定义属性](/zh/docs/api/registry/attr#definition)。另外，我们还可以使用 [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) 来定制样式，节点和边渲染到画布后分别有 `'x6-node'` 和 `'x6-edge'` 两个样式名，默认的样式定义[参考这里](https://github.com/antvis/X6/blob/master/packages/x6/src/index.less#L26-L156)。例如，我们可以像下面这样来指定节点中 `<rect>` 元素的样式：
```css
.x6-node rect {
@ -414,11 +414,11 @@ const edge = graph.addEdge({
| Shape.DoubleEdge | double-edge | 双线边。 |
| Shape.ShadowEdge | shadow-edge | 阴影边。 |
除了使用 X6 的内置节点/边，我们还可以注册自定义节点/边并使用他们，想了解更多请参考[自定义节点](../intermediate/custom-node)和[自定义边](../intermediate/custom-edge)教程。
除了使用 X6 的内置节点/边，我们还可以注册自定义节点/边并使用他们，想了解更多请参考[自定义节点](/zh/docs/tutorial/intermediate/custom-node)和[自定义边](/zh/docs/tutorial/intermediate/custom-edge)教程。
### view
指定渲染节点/边所使用的视图，视图的概念与 MVC 模式中的 View 一致，我们将在[自定义节点](../intermediate/custom-node)和[自定义边](../intermediate/custom-edge)教程中做详细介绍。
指定渲染节点/边所使用的视图，视图的概念与 MVC 模式中的 View 一致，我们将在[自定义节点](/zh/docs/tutorial/intermediate/custom-node)和[自定义边](/zh/docs/tutorial/intermediate/custom-edge)教程中做详细介绍。
### zIndex

52
sites/x6-sites/docs/tutorial/basic/edge.en.md
View File

@ -7,7 +7,7 @@ redirect_from:
- /en/docs/tutorial/basic
---
在[快速上手](../getting-started)案例中，我们通过 JSON 数据来快速添加两个矩形节点和一条边到画布中，并简单了解了如何定制边样式。接下来我们将学习更多创建边的方式，并了解创建边的基础选项。
在[快速上手](/en/docs/tutorial/getting-started)案例中，我们通过 JSON 数据来快速添加两个矩形节点和一条边到画布中，并简单了解了如何定制边样式。接下来我们将学习更多创建边的方式，并了解创建边的基础选项。
## 创建边
@ -52,11 +52,11 @@ const rect = graph.addEdge({
})
```
这里的关键是使用 `shape` 来指定图形，默认值为 `'edge'`，其他选项与使用边构造函数创建节点一致。在 X6 内部，我们通过 `shape` 指定的图形找到对应的构造函数来初始化边，并将其添加到画布。内置边构造函数与 `shape` 名称对应关系[参考此表](./cell#内置边)。除了使用[内置边](./cell#内置边)，我们还可以使用注册的自定义边，详情请参考[自定义边]()教程。
这里的关键是使用 `shape` 来指定图形，默认值为 `'edge'`，其他选项与使用边构造函数创建节点一致。在 X6 内部，我们通过 `shape` 指定的图形找到对应的构造函数来初始化边，并将其添加到画布。内置边构造函数与 `shape` 名称对应关系[参考此表](/en/docs/tutorial/basic/cell#内置边)。除了使用[内置边](/en/docs/tutorial/basic/cell#内置边)，我们还可以使用注册的自定义边，详情请参考[自定义边]()教程。
## 选项
上面我们介绍了如何通过构造函数和 `graph.addEdge` 两种方式来创建边，并了解了 `source` 和 `target` 两个基础选项，除了[从 Cell 继承的基础选项](./cell#基础选项)外，还支持以下选项。
上面我们介绍了如何通过构造函数和 `graph.addEdge` 两种方式来创建边，并了解了 `source` 和 `target` 两个基础选项，除了[从 Cell 继承的基础选项](/en/docs/tutorial/basic/cell#基础选项)外，还支持以下选项。
| 属性名 | 类型 | 默认值 | 描述 |
|--------------|-------------------|--------------------------------------------------|-----------------|
@ -66,7 +66,7 @@ const rect = graph.addEdge({
| router | RouterData | undefined | 路由。 |
| connector | ConnectorData | undefined | 连线。 |
| labels | Label[] | undefined | 标签。 |
| defaultLabel | Label | [默认标签](../intermediate/edge-labels#默认标签) | 默认标签。 |
| defaultLabel | Label | [默认标签](/en/docs/tutorial/intermediate/edge-labels#默认标签) | 默认标签。 |
下面分别看看这些选项如何使用。
@ -125,7 +125,7 @@ graph.addEdge({
### router
路由 `router` 将对 `vertices` 进一步处理，并在必要时添加额外的点，然后返回处理后的点。例如，经过 [orth 路由](../../api/registry/router#orth)处理后，边的每一条链接线段都是水平或垂直的。
路由 `router` 将对 `vertices` 进一步处理，并在必要时添加额外的点，然后返回处理后的点。例如，经过 [orth 路由](/en/docs/api/registry/router#orth)处理后，边的每一条链接线段都是水平或垂直的。
```ts
graph.addEdge({
@ -145,7 +145,7 @@ graph.addEdge({
<iframe src="/demos/tutorial/basic/edge/router"></iframe>
路由都是通过[注册的方式](../../api/registry/router#register)注册到 X6 中，使用时只需要提供路由名称 `name` 和 参数 `args` 即可，不需要参数 `args` 时可以使用省略写法。
路由都是通过[注册的方式](/en/docs/api/registry/router#register)注册到 X6 中，使用时只需要提供路由名称 `name` 和 参数 `args` 即可，不需要参数 `args` 时可以使用省略写法。
```ts
graph.addEdge({
@ -165,14 +165,14 @@ graph.addEdge({
X6 默认提供了以下几种路由，点击下面的链接查看每种路由的使用方式。
- [normal](../../api/registry/router#normal)
- [orth](../../api/registry/router#orth)
- [oneSide](../../api/registry/router#oneside)
- [manhattan](../../api/registry/router#manhattan)
- [metro](../../api/registry/router#metro)
- [er](../../api/registry/router#er)
- [normal](/en/docs/api/registry/router#normal)
- [orth](/en/docs/api/registry/router#orth)
- [oneSide](/en/docs/api/registry/router#oneside)
- [manhattan](/en/docs/api/registry/router#manhattan)
- [metro](/en/docs/api/registry/router#metro)
- [er](/en/docs/api/registry/router#er)
另外，我们也可以注册自定义路由，详情请参考[自定义路由](../../api/registry/router#registry)教程。
另外，我们也可以注册自定义路由，详情请参考[自定义路由](/en/docs/api/registry/router#registry)教程。
### connector
@ -275,15 +275,15 @@ edge.appendLabel('edge')
<iframe src="/demos/tutorial/basic/edge/labels"></iframe>
完整的 Label 配置项稍微有点复杂，所以我们在[单独的教程](../intermediate/edge-labels)中介绍。
完整的 Label 配置项稍微有点复杂，所以我们在[单独的教程](/en/docs/tutorial/intermediate/edge-labels)中介绍。
### defaultLabel
默认标签。通默认标签可以简化标签配置项，[labels](#labels) 指定的每一项都将于 `defaultLabel` 进行 [merge](https://www.lodashjs.com/docs/latest#_mergeobject-sources) 后使用。详情请[参考这里](../intermediate/edge-labels#默认标签)。
默认标签。通默认标签可以简化标签配置项，[labels](#labels) 指定的每一项都将于 `defaultLabel` 进行 [merge](https://www.lodashjs.com/docs/latest#_mergeobject-sources) 后使用。详情请[参考这里](/en/docs/tutorial/intermediate/edge-labels#默认标签)。
## 定制样式 Attrs
我们在之前的教程中介绍了[如何通过 attrs 选项来定制样式](./cell#attrs-1)，并且学习了如何通过[选项默认值](./cell#选项默认值)来实现预设选项以及如何通过[自定义选项](./cell#自定义选项)来实现选项扩展，请结合这几个教程来学习如何定制样式。
我们在之前的教程中介绍了[如何通过 attrs 选项来定制样式](/en/docs/tutorial/basic/cell#attrs-1)，并且学习了如何通过[选项默认值](/en/docs/tutorial/basic/cell#选项默认值)来实现预设选项以及如何通过[自定义选项](/en/docs/tutorial/basic/cell#自定义选项)来实现选项扩展，请结合这几个教程来学习如何定制样式。
例如，`Shape.Edge` 边定义了 `'line'`（代表 `<path>` 元素）和 `'wrap'`（代表透明的 `<path>` 元素，用于响应交互）两个选择器。我们在创建边时可以像下面这样定义边的样式。
@ -310,15 +310,15 @@ graph.addEdge({
X6 提供了以下几种内置箭头，使用时只需要指定箭头名和参数（可省略）即可。
- [block](../intermediate/marker#block)
- [classic](../intermediate/marker#classic)
- [diamond](../intermediate/marker#diamond)
- [cross](../intermediate/marker#cross)
- [async](../intermediate/marker#async)
- [path](../intermediate/marker#path)
- [circle](../intermediate/marker#circle)
- [circlePlus](../intermediate/marker#circleplus)
- [ellipse](../intermediate/marker#ellipse)
- [block](/en/docs/tutorial/intermediate/marker#block)
- [classic](/en/docs/tutorial/intermediate/marker#classic)
- [diamond](/en/docs/tutorial/intermediate/marker#diamond)
- [cross](/en/docs/tutorial/intermediate/marker#cross)
- [async](/en/docs/tutorial/intermediate/marker#async)
- [path](/en/docs/tutorial/intermediate/marker#path)
- [circle](/en/docs/tutorial/intermediate/marker#circle)
- [circlePlus](/en/docs/tutorial/intermediate/marker#circleplus)
- [ellipse](/en/docs/tutorial/intermediate/marker#ellipse)
```ts
edge.attr({
@ -361,4 +361,4 @@ edge.attr({
<iframe src="/demos/tutorial/basic/edge/custom-marker"></iframe>
更多箭头的案例和定制技巧请参考[这篇教程](../intermediate/marker)，我们也支持注册自定义的箭头，注册后就可以像使用内置箭头那样来使用箭头，详情请参考[注册箭头教程](../intermediate/marker#注册箭头)。
更多箭头的案例和定制技巧请参考[这篇教程](/en/docs/tutorial/intermediate/marker)，我们也支持注册自定义的箭头，注册后就可以像使用内置箭头那样来使用箭头，详情请参考[注册箭头教程](/en/docs/tutorial/intermediate/marker#注册箭头)。

52
sites/x6-sites/docs/tutorial/basic/edge.zh.md
View File

@ -7,7 +7,7 @@ redirect_from:
- /zh/docs/tutorial/basic
---
在[快速上手](../getting-started)案例中，我们通过 JSON 数据来快速添加两个矩形节点和一条边到画布中，并简单了解了如何定制边样式。接下来我们将学习更多创建边的方式，并了解创建边的基础选项。
在[快速上手](/zh/docs/tutorial/getting-started)案例中，我们通过 JSON 数据来快速添加两个矩形节点和一条边到画布中，并简单了解了如何定制边样式。接下来我们将学习更多创建边的方式，并了解创建边的基础选项。
## 创建边
@ -52,11 +52,11 @@ const rect = graph.addEdge({
})
```
这里的关键是使用 `shape` 来指定图形，默认值为 `'edge'`，其他选项与使用边构造函数创建节点一致。在 X6 内部，我们通过 `shape` 指定的图形找到对应的构造函数来初始化边，并将其添加到画布。内置边构造函数与 `shape` 名称对应关系[参考此表](./cell#内置边)。除了使用[内置边](./cell#内置边)，我们还可以使用注册的自定义边，详情请参考[自定义边]()教程。
这里的关键是使用 `shape` 来指定图形，默认值为 `'edge'`，其他选项与使用边构造函数创建节点一致。在 X6 内部，我们通过 `shape` 指定的图形找到对应的构造函数来初始化边，并将其添加到画布。内置边构造函数与 `shape` 名称对应关系[参考此表](/zh/docs/tutorial/basic/cell#内置边)。除了使用[内置边](/zh/docs/tutorial/basic/cell#内置边)，我们还可以使用注册的自定义边，详情请参考[自定义边]()教程。
## 选项
上面我们介绍了如何通过构造函数和 `graph.addEdge` 两种方式来创建边，并了解了 `source` 和 `target` 两个基础选项，除了[从 Cell 继承的基础选项](./cell#基础选项)外，还支持以下选项。
上面我们介绍了如何通过构造函数和 `graph.addEdge` 两种方式来创建边，并了解了 `source` 和 `target` 两个基础选项，除了[从 Cell 继承的基础选项](/zh/docs/tutorial/basic/cell#基础选项)外，还支持以下选项。
| 属性名 | 类型 | 默认值 | 描述 |
|--------------|-------------------|--------------------------------------------------|-----------------|
@ -66,7 +66,7 @@ const rect = graph.addEdge({
| router | RouterData | undefined | 路由。 |
| connector | ConnectorData | undefined | 连线。 |
| labels | Label[] | undefined | 标签。 |
| defaultLabel | Label | [默认标签](../intermediate/edge-labels#默认标签) | 默认标签。 |
| defaultLabel | Label | [默认标签](/zh/docs/tutorial/intermediate/edge-labels#默认标签) | 默认标签。 |
下面分别看看这些选项如何使用。
@ -125,7 +125,7 @@ graph.addEdge({
### router
路由 `router` 将对 `vertices` 进一步处理，并在必要时添加额外的点，然后返回处理后的点。例如，经过 [orth 路由](../../api/registry/router#orth)处理后，边的每一条链接线段都是水平或垂直的。
路由 `router` 将对 `vertices` 进一步处理，并在必要时添加额外的点，然后返回处理后的点。例如，经过 [orth 路由](/zh/docs/api/registry/router#orth)处理后，边的每一条链接线段都是水平或垂直的。
```ts
graph.addEdge({
@ -145,7 +145,7 @@ graph.addEdge({
<iframe src="/demos/tutorial/basic/edge/router"></iframe>
路由都是通过[注册的方式](../../api/registry/router#register)注册到 X6 中，使用时只需要提供路由名称 `name` 和 参数 `args` 即可，不需要参数 `args` 时可以使用省略写法。
路由都是通过[注册的方式](/zh/docs/api/registry/router#register)注册到 X6 中，使用时只需要提供路由名称 `name` 和 参数 `args` 即可，不需要参数 `args` 时可以使用省略写法。
```ts
graph.addEdge({
@ -165,14 +165,14 @@ graph.addEdge({
X6 默认提供了以下几种路由，点击下面的链接查看每种路由的使用方式。
- [normal](../../api/registry/router#normal)
- [orth](../../api/registry/router#orth)
- [oneSide](../../api/registry/router#oneside)
- [manhattan](../../api/registry/router#manhattan)
- [metro](../../api/registry/router#metro)
- [er](../../api/registry/router#er)
- [normal](/zh/docs/api/registry/router#normal)
- [orth](/zh/docs/api/registry/router#orth)
- [oneSide](/zh/docs/api/registry/router#oneside)
- [manhattan](/zh/docs/api/registry/router#manhattan)
- [metro](/zh/docs/api/registry/router#metro)
- [er](/zh/docs/api/registry/router#er)
另外，我们也可以注册自定义路由，详情请参考[自定义路由](../../api/registry/router#registry)教程。
另外，我们也可以注册自定义路由，详情请参考[自定义路由](/zh/docs/api/registry/router#registry)教程。
### connector
@ -275,15 +275,15 @@ edge.appendLabel('edge')
<iframe src="/demos/tutorial/basic/edge/labels"></iframe>
完整的 Label 配置项稍微有点复杂，所以我们在[单独的教程](../intermediate/edge-labels)中介绍。
完整的 Label 配置项稍微有点复杂，所以我们在[单独的教程](/zh/docs/tutorial/intermediate/edge-labels)中介绍。
### defaultLabel
默认标签。通默认标签可以简化标签配置项，[labels](#labels) 指定的每一项都将于 `defaultLabel` 进行 [merge](https://www.lodashjs.com/docs/latest#_mergeobject-sources) 后使用。详情请[参考这里](../intermediate/edge-labels#默认标签)。
默认标签。通默认标签可以简化标签配置项，[labels](#labels) 指定的每一项都将于 `defaultLabel` 进行 [merge](https://www.lodashjs.com/docs/latest#_mergeobject-sources) 后使用。详情请[参考这里](/zh/docs/tutorial/intermediate/edge-labels#默认标签)。
## 定制样式 Attrs
我们在之前的教程中介绍了[如何通过 attrs 选项来定制样式](./cell#attrs-1)，并且学习了如何通过[选项默认值](./cell#选项默认值)来实现预设选项以及如何通过[自定义选项](./cell#自定义选项)来实现选项扩展，请结合这几个教程来学习如何定制样式。
我们在之前的教程中介绍了[如何通过 attrs 选项来定制样式](/zh/docs/tutorial/basic/cell#attrs-1)，并且学习了如何通过[选项默认值](/zh/docs/tutorial/basic/cell#选项默认值)来实现预设选项以及如何通过[自定义选项](/zh/docs/tutorial/basic/cell#自定义选项)来实现选项扩展，请结合这几个教程来学习如何定制样式。
例如，`Shape.Edge` 边定义了 `'line'`（代表 `<path>` 元素）和 `'wrap'`（代表透明的 `<path>` 元素，用于响应交互）两个选择器。我们在创建边时可以像下面这样定义边的样式。
@ -310,15 +310,15 @@ graph.addEdge({
X6 提供了以下几种内置箭头，使用时只需要指定箭头名和参数（可省略）即可。
- [block](../intermediate/marker#block)
- [classic](../intermediate/marker#classic)
- [diamond](../intermediate/marker#diamond)
- [cross](../intermediate/marker#cross)
- [async](../intermediate/marker#async)
- [path](../intermediate/marker#path)
- [circle](../intermediate/marker#circle)
- [circlePlus](../intermediate/marker#circleplus)
- [ellipse](../intermediate/marker#ellipse)
- [block](/zh/docs/tutorial/intermediate/marker#block)
- [classic](/zh/docs/tutorial/intermediate/marker#classic)
- [diamond](/zh/docs/tutorial/intermediate/marker#diamond)
- [cross](/zh/docs/tutorial/intermediate/marker#cross)
- [async](/zh/docs/tutorial/intermediate/marker#async)
- [path](/zh/docs/tutorial/intermediate/marker#path)
- [circle](/zh/docs/tutorial/intermediate/marker#circle)
- [circlePlus](/zh/docs/tutorial/intermediate/marker#circleplus)
- [ellipse](/zh/docs/tutorial/intermediate/marker#ellipse)
```ts
edge.attr({
@ -361,4 +361,4 @@ edge.attr({
<iframe src="/demos/tutorial/basic/edge/custom-marker"></iframe>
更多箭头的案例和定制技巧请参考[这篇教程](../intermediate/marker)，我们也支持注册自定义的箭头，注册后就可以像使用内置箭头那样来使用箭头，详情请参考[注册箭头教程](../intermediate/marker#注册箭头)。
更多箭头的案例和定制技巧请参考[这篇教程](/zh/docs/tutorial/intermediate/marker)，我们也支持注册自定义的箭头，注册后就可以像使用内置箭头那样来使用箭头，详情请参考[注册箭头教程](/zh/docs/tutorial/intermediate/marker#注册箭头)。

6
sites/x6-sites/docs/tutorial/basic/graph.en.md
View File

@ -13,7 +13,7 @@ redirect_from:
### 画布平移
普通画布(未开启 [scroller](./scroller) 模式)通过开启 `panning` 选项来支持拖拽平移。
普通画布(未开启 [scroller](/en/docs/tutorial/basic/scroller) 模式)通过开启 `panning` 选项来支持拖拽平移。
```ts
const graph = new Graph({
@ -41,7 +41,7 @@ const graph = new Graph({
### 画布缩放
普通画布(未开启 [scroller](./scroller) 模式)通过开启 [mousewheel](./mousewheel) 选项来支持画布缩放。这里说明怎么通过代码来进行画布缩放：
普通画布(未开启 [scroller](/en/docs/tutorial/basic/scroller) 模式)通过开启 [mousewheel](/en/docs/tutorial/basic/mousewheel) 选项来支持画布缩放。这里说明怎么通过代码来进行画布缩放：
```ts
graph.zoom() // 获取缩放级别
@ -57,7 +57,7 @@ graph.zoom(-0.2) // 在原来缩放级别上减少 0.2
graph.centerContent()
```
更多的居中方法可以查看 [Transform](../../api/graph/transform)
更多的居中方法可以查看 [Transform](/en/docs/api/graph/transform)
## 导出

6
sites/x6-sites/docs/tutorial/basic/graph.zh.md
View File

@ -13,7 +13,7 @@ redirect_from:
### 画布平移
普通画布(未开启 [scroller](./scroller) 模式)通过开启 `panning` 选项来支持拖拽平移。
普通画布(未开启 [scroller](/zh/docs/tutorial/basic/scroller) 模式)通过开启 `panning` 选项来支持拖拽平移。
```ts
const graph = new Graph({
@ -41,7 +41,7 @@ const graph = new Graph({
### 画布缩放
普通画布(未开启 [scroller](./scroller) 模式)通过开启 [mousewheel](./mousewheel) 选项来支持画布缩放。这里说明怎么通过代码来进行画布缩放：
普通画布(未开启 [scroller](/zh/docs/tutorial/basic/scroller) 模式)通过开启 [mousewheel](/zh/docs/tutorial/basic/mousewheel) 选项来支持画布缩放。这里说明怎么通过代码来进行画布缩放：
```ts
graph.zoom() // 获取缩放级别
@ -57,7 +57,7 @@ graph.zoom(-0.2) // 在原来缩放级别上减少 0.2
graph.centerContent()
```
更多的居中方法可以查看 [Transform](../../api/graph/transform)
更多的居中方法可以查看 [Transform](/zh/docs/api/graph/transform)
## 导出

2
sites/x6-sites/docs/tutorial/basic/group.en.md
View File

@ -9,7 +9,7 @@ redirect_from:
## 基础嵌套
我们可以通过父子嵌套来实现群组，并提供了一系列获取和设置嵌套关系的[方法](../../api/model/cell#父子关系-parentchildren)。
我们可以通过父子嵌套来实现群组，并提供了一系列获取和设置嵌套关系的[方法](/en/docs/api/model/cell#父子关系-parentchildren)。
```ts
const child = graph.addNode({

2
sites/x6-sites/docs/tutorial/basic/group.zh.md
View File

@ -9,7 +9,7 @@ redirect_from:
## 基础嵌套
我们可以通过父子嵌套来实现群组，并提供了一系列获取和设置嵌套关系的[方法](../../api/model/cell#父子关系-parentchildren)。
我们可以通过父子嵌套来实现群组，并提供了一系列获取和设置嵌套关系的[方法](/zh/docs/api/model/cell#父子关系-parentchildren)。
```ts
const child = graph.addNode({

2
sites/x6-sites/docs/tutorial/basic/minimap.en.md
View File

@ -7,7 +7,7 @@ redirect_from:
- /en/docs/tutorial/basic
---
启用 [Scroller](./scroller) 后可开启小地图，小地图是完整画布的预览，支持通过平移缩放小地图的视口来平移缩放画布。
启用 [Scroller](/en/docs/tutorial/basic/scroller) 后可开启小地图，小地图是完整画布的预览，支持通过平移缩放小地图的视口来平移缩放画布。
```ts
const graph = new Graph({

2
sites/x6-sites/docs/tutorial/basic/minimap.zh.md
View File

@ -7,7 +7,7 @@ redirect_from:
- /zh/docs/tutorial/basic
---
启用 [Scroller](./scroller) 后可开启小地图，小地图是完整画布的预览，支持通过平移缩放小地图的视口来平移缩放画布。
启用 [Scroller](/zh/docs/tutorial/basic/scroller) 后可开启小地图，小地图是完整画布的预览，支持通过平移缩放小地图的视口来平移缩放画布。
```ts
const graph = new Graph({

2
sites/x6-sites/docs/tutorial/basic/mousewheel.en.md
View File

@ -7,7 +7,7 @@ redirect_from:
- /en/docs/tutorial/basic
---
鼠标滚轮的默认行为是滚动页面，启用 [Scroller](./scroller) 后用于滚动画布，但在某些场景下我们需要用滚轮来缩放画布，所为了避免交互冲突，通常配合修饰键来实现滚轮缩放画布，参考下面配置。
鼠标滚轮的默认行为是滚动页面，启用 [Scroller](/en/docs/tutorial/basic/scroller) 后用于滚动画布，但在某些场景下我们需要用滚轮来缩放画布，所为了避免交互冲突，通常配合修饰键来实现滚轮缩放画布，参考下面配置。
```ts
const graph = new Graph({

2
sites/x6-sites/docs/tutorial/basic/mousewheel.zh.md
View File

@ -7,7 +7,7 @@ redirect_from:
- /zh/docs/tutorial/basic
---
鼠标滚轮的默认行为是滚动页面，启用 [Scroller](./scroller) 后用于滚动画布，但在某些场景下我们需要用滚轮来缩放画布，所为了避免交互冲突，通常配合修饰键来实现滚轮缩放画布，参考下面配置。
鼠标滚轮的默认行为是滚动页面，启用 [Scroller](/zh/docs/tutorial/basic/scroller) 后用于滚动画布，但在某些场景下我们需要用滚轮来缩放画布，所为了避免交互冲突，通常配合修饰键来实现滚轮缩放画布，参考下面配置。
```ts
const graph = new Graph({

8
sites/x6-sites/docs/tutorial/basic/node.en.md
View File

@ -7,13 +7,13 @@ redirect_from:
- /en/docs/tutorial/basic
---
在[快速上手](../getting-started)案例中，我们通过 JSON 数据来快速添加两个矩形节点和一条边到画布中，并简单介绍了如何定制节点样式。接下来我们将学习更多创建节点的方式，并了解创建节点的基础选项。
在[快速上手](/en/docs/tutorial/getting-started)案例中，我们通过 JSON 数据来快速添加两个矩形节点和一条边到画布中，并简单介绍了如何定制节点样式。接下来我们将学习更多创建节点的方式，并了解创建节点的基础选项。
## 创建节点
### 选项
节点都有共同的基类 [Cell](./cell)，除了[从 Cell 继承的选项](./cell#基础选项)外，还支持以下选项。
节点都有共同的基类 [Cell](/en/docs/tutorial/basic/cell)，除了[从 Cell 继承的选项](/en/docs/tutorial/basic/cell#基础选项)外，还支持以下选项。
| 属性名 | 类型 | 默认值 | 描述 |
|--------|--------|--------|----------------------------|
@ -108,11 +108,11 @@ const rect = graph.addNode({
})
```
这里的关键是使用 `shape` 来指定节点图形，默认值为 `'rect'`，其他选项与使用节点构造函数创建节点的选项一致。在 X6 内部，我们通过 `shape` 指定的图形找到对应的构造函数来初始化节点，并将其添加到画布。内置节点构造函数与 `shape` 名称对应关系[参考此表](./cell#内置节点)。除了使用[内置节点](./cell#内置节点)，我们还可以使用注册的自定义节点，详情请参考[自定义节点](../intermediate/custom-node)教程。
这里的关键是使用 `shape` 来指定节点图形，默认值为 `'rect'`，其他选项与使用节点构造函数创建节点的选项一致。在 X6 内部，我们通过 `shape` 指定的图形找到对应的构造函数来初始化节点，并将其添加到画布。内置节点构造函数与 `shape` 名称对应关系[参考此表](/en/docs/tutorial/basic/cell#内置节点)。除了使用[内置节点](/en/docs/tutorial/basic/cell#内置节点)，我们还可以使用注册的自定义节点，详情请参考[自定义节点](/en/docs/tutorial/intermediate/custom-node)教程。
## 定制样式 Attrs
我们在之前的教程中介绍了[如何通过 attrs 选项来定制样式](./cell#attrs-1)，并且简单学习了如何通过[选项默认值](./cell#选项默认值)和[自定义选项](./cell#自定义选项)来定制节点，请结合这几个教程学习如何定制节点样式。
我们在之前的教程中介绍了[如何通过 attrs 选项来定制样式](/en/docs/tutorial/basic/cell#attrs-1)，并且简单学习了如何通过[选项默认值](/en/docs/tutorial/basic/cell#选项默认值)和[自定义选项](/en/docs/tutorial/basic/cell#自定义选项)来定制节点，请结合这几个教程学习如何定制节点样式。
例如 `Shape.Rect` 节点定义了 `'body'`（代表 `<rect>` 元素）和 `'label'`（代表 `<text>` 元素）两个选择器。我们在创建矩形节点时可以像下面这样定义节点样式。

8
sites/x6-sites/docs/tutorial/basic/node.zh.md
View File

@ -7,13 +7,13 @@ redirect_from:
- /zh/docs/tutorial/basic
---
在[快速上手](../getting-started)案例中，我们通过 JSON 数据来快速添加两个矩形节点和一条边到画布中，并简单介绍了如何定制节点样式。接下来我们将学习更多创建节点的方式，并了解创建节点的基础选项。
在[快速上手](/zh/docs/tutorialgetting-started)案例中，我们通过 JSON 数据来快速添加两个矩形节点和一条边到画布中，并简单介绍了如何定制节点样式。接下来我们将学习更多创建节点的方式，并了解创建节点的基础选项。
## 创建节点
### 选项
节点都有共同的基类 [Cell](./cell)，除了[从 Cell 继承的选项](./cell#基础选项)外，还支持以下选项。
节点都有共同的基类 [Cell](/zh/docs/tutorial/basic/cell)，除了[从 Cell 继承的选项](/zh/docs/tutorial/basic/cell#基础选项)外，还支持以下选项。
| 属性名 | 类型 | 默认值 | 描述 |
|--------|--------|--------|----------------------------|
@ -108,11 +108,11 @@ const rect = graph.addNode({
})
```
这里的关键是使用 `shape` 来指定节点图形，默认值为 `'rect'`，其他选项与使用节点构造函数创建节点的选项一致。在 X6 内部，我们通过 `shape` 指定的图形找到对应的构造函数来初始化节点，并将其添加到画布。内置节点构造函数与 `shape` 名称对应关系[参考此表](./cell#内置节点)。除了使用[内置节点](./cell#内置节点)，我们还可以使用注册的自定义节点，详情请参考[自定义节点](../intermediate/custom-node)教程。
这里的关键是使用 `shape` 来指定节点图形，默认值为 `'rect'`，其他选项与使用节点构造函数创建节点的选项一致。在 X6 内部，我们通过 `shape` 指定的图形找到对应的构造函数来初始化节点，并将其添加到画布。内置节点构造函数与 `shape` 名称对应关系[参考此表](/zh/docs/tutorial/basic/cell#内置节点)。除了使用[内置节点](/zh/docs/tutorial/basic/cell#内置节点)，我们还可以使用注册的自定义节点，详情请参考[自定义节点](/zh/docs/tutorial/intermediate/custom-node)教程。
## 定制样式 Attrs
我们在之前的教程中介绍了[如何通过 attrs 选项来定制样式](./cell#attrs-1)，并且简单学习了如何通过[选项默认值](./cell#选项默认值)和[自定义选项](./cell#自定义选项)来定制节点，请结合这几个教程学习如何定制节点样式。
我们在之前的教程中介绍了[如何通过 attrs 选项来定制样式](/zh/docs/tutorial/basic/cell#attrs-1)，并且简单学习了如何通过[选项默认值](/zh/docs/tutorial/basic/cell#选项默认值)和[自定义选项](/zh/docs/tutorial/basic/cell#自定义选项)来定制节点，请结合这几个教程学习如何定制节点样式。
例如 `Shape.Rect` 节点定义了 `'body'`（代表 `<rect>` 元素）和 `'label'`（代表 `<text>` 元素）两个选择器。我们在创建矩形节点时可以像下面这样定义节点样式。

52
sites/x6-sites/docs/tutorial/basic/port.en.md
View File

@ -49,9 +49,9 @@ graph.addNode({
<iframe src="/demos/tutorial/basic/port/default-port"></iframe>
左侧的三个圆就是我们添加的链接桩，这里使用了节点的 [`portMarkup`](../../api/model/node#portmarkup) 选项指定的默认的链接桩（如下）。
左侧的三个圆就是我们添加的链接桩，这里使用了节点的 [`portMarkup`](/en/docs/api/model/node#portmarkup) 选项指定的默认的链接桩（如下）。
链接桩 Markup 可以在单个链接桩、链接桩群组和节点的 [`portMarkup`](../../api/model/node#portmarkup) 选项三个位置指定，优先级从高到低。
链接桩 Markup 可以在单个链接桩、链接桩群组和节点的 [`portMarkup`](/en/docs/api/model/node#portmarkup) 选项三个位置指定，优先级从高到低。
```ts
{
@ -118,7 +118,7 @@ graph.addNode({
<iframe src="/demos/tutorial/basic/port/default-port-style"></iframe>
[[warning]]
| 值得注意的是，我们给 `circle` 指定了 [`magnet: true`](../../api/registry/attr#magnet) 这个特殊属性，使链接桩在连线交互时可以被连接上。
| 值得注意的是，我们给 `circle` 指定了 [`magnet: true`](/en/docs/api/registry/attr#magnet) 这个特殊属性，使链接桩在连线交互时可以被连接上。
上面代码中每个链接桩的样式都一样，显得有点冗长，我们可以通过 `group` 选项来设置链接桩分组，使该组中的链接桩具有相同的行为和样式。
@ -221,9 +221,9 @@ graph.addNode({
})
```
这里使用了节点的 [`portLabelMarkup`](../../api/model/node#portlabelmarkup) 选项指定的默认标签（如下）。
这里使用了节点的 [`portLabelMarkup`](/en/docs/api/model/node#portlabelmarkup) 选项指定的默认标签（如下）。
链接桩标签的 Markup 可以在单个链接桩、链接桩群组和节点的 [`portLabelMarkup`](../../api/model/node#portlabelmarkup) 选项三个位置指定，优先级从高到低。
链接桩标签的 Markup 可以在单个链接桩、链接桩群组和节点的 [`portLabelMarkup`](/en/docs/api/model/node#portlabelmarkup) 选项三个位置指定，优先级从高到低。
```ts
{
@ -423,16 +423,16 @@ const node = new Node({
链接桩布局算法只能通过 `groups` 中的 `position` 选项来指定，因为布局算法在计算链接桩位置是需要考虑到群组中的所有连接桩，我们在单个链接桩中可以通过 `args` 选项来影响该链接桩的布局结果。
我们默认提供了下面几种链接桩布局算法，同时支持[自定义链接桩布局算法并注册使用](../../api/registry/port-layout#registry)，点击下面的链接可以了解每种布局算法的使用方法。
我们默认提供了下面几种链接桩布局算法，同时支持[自定义链接桩布局算法并注册使用](/en/docs/api/registry/port-layout#registry)，点击下面的链接可以了解每种布局算法的使用方法。
- [`'absolute'`](../../api/registry/port-layout#absolute) 绝对定位。
- [`'left'`](../../api/registry/port-layout#left-right-top-bottom) 矩形节点左侧均匀分布。
- [`'right'`](../../api/registry/port-layout#left-right-top-bottom) 矩形节点右侧均匀分布。
- [`'top'`](../../api/registry/port-layout#left-right-top-bottom) 矩形节点顶部均匀分布。
- [`'bottom'`](../../api/registry/port-layout#left-right-top-bottom) 矩形节点底部均匀分布。
- [`'line'`](../../api/registry/port-layout#line) 沿指定的线均匀分布。
- [`'ellipse'`](../../api/registry/port-layout#ellipse) 沿椭圆圆弧分布。
- [`'ellipseSpread'`](../../api/registry/port-layout#ellipsespread) 沿椭圆均匀分布。
- [`'absolute'`](/en/docs/api/registry/port-layout#absolute) 绝对定位。
- [`'left'`](/en/docs/api/registry/port-layout#left-right-top-bottom) 矩形节点左侧均匀分布。
- [`'right'`](/en/docs/api/registry/port-layout#left-right-top-bottom) 矩形节点右侧均匀分布。
- [`'top'`](/en/docs/api/registry/port-layout#left-right-top-bottom) 矩形节点顶部均匀分布。
- [`'bottom'`](/en/docs/api/registry/port-layout#left-right-top-bottom) 矩形节点底部均匀分布。
- [`'line'`](/en/docs/api/registry/port-layout#line) 沿指定的线均匀分布。
- [`'ellipse'`](/en/docs/api/registry/port-layout#ellipse) 沿椭圆圆弧分布。
- [`'ellipseSpread'`](/en/docs/api/registry/port-layout#ellipsespread) 沿椭圆均匀分布。
下面我们就来定制一个具有输入和输出链接桩的节点。
@ -505,18 +505,18 @@ graph.addNode({
在 `groups` 的 `label.position` 选项和节点的 `label.position` 选项中都可以指定标签的位置。
我们默认提供了下面几种标签位置，也支持[自定义标签位置并注册使用](../../api/registry/port-label-layout#registry)，点击下面的链接了解每种标签位置的使用方法。
我们默认提供了下面几种标签位置，也支持[自定义标签位置并注册使用](/en/docs/api/registry/port-label-layout#registry)，点击下面的链接了解每种标签位置的使用方法。
- [`left`](../../api/registry/port-label-layout#side) 标签位于链接桩左侧。
- [`right`](../../api/registry/port-label-layout#side) 标签位于链接桩右侧。
- [`top`](../../api/registry/port-label-layout#side) 标签位于链接桩上方。
- [`bottom`](../../api/registry/port-label-layout#side) 标签位于链接桩下方。
- [`inside`](../../api/registry/port-label-layout#insideoutside) 标签位于节点内围（靠近边线的内侧）。
- [`outside`](../../api/registry/port-label-layout#insideoutside) 标签位于节点外围（靠近边线的外侧）。
- [`insideOriented`](../../api/registry/port-label-layout#insideoutside) 标签位于节点内围，而且根据所在方位自动调整文本的方向。
- [`outsideOriented`](../../api/registry/port-label-layout#insideoutside) 标签位于节点外围，而且根据所在方位自动调整文本的方向。
- [`radial`](../../api/registry/port-label-layout#radial) 标签位于圆形或椭圆形节点的外围。
- [`radialOriented`](../../api/registry/port-label-layout#radial) 标签位于圆形或椭圆形节点的外围，并使标签文本自动沿圆弧方向旋转。
- [`left`](/en/docs/api/registry/port-label-layout#side) 标签位于链接桩左侧。
- [`right`](/en/docs/api/registry/port-label-layout#side) 标签位于链接桩右侧。
- [`top`](/en/docs/api/registry/port-label-layout#side) 标签位于链接桩上方。
- [`bottom`](/en/docs/api/registry/port-label-layout#side) 标签位于链接桩下方。
- [`inside`](/en/docs/api/registry/port-label-layout#insideoutside) 标签位于节点内围（靠近边线的内侧）。
- [`outside`](/en/docs/api/registry/port-label-layout#insideoutside) 标签位于节点外围（靠近边线的外侧）。
- [`insideOriented`](/en/docs/api/registry/port-label-layout#insideoutside) 标签位于节点内围，而且根据所在方位自动调整文本的方向。
- [`outsideOriented`](/en/docs/api/registry/port-label-layout#insideoutside) 标签位于节点外围，而且根据所在方位自动调整文本的方向。
- [`radial`](/en/docs/api/registry/port-label-layout#radial) 标签位于圆形或椭圆形节点的外围。
- [`radialOriented`](/en/docs/api/registry/port-label-layout#radial) 标签位于圆形或椭圆形节点的外围，并使标签文本自动沿圆弧方向旋转。
下面我们为刚刚创建的输入、输出连接桩指定一下标签和标签位置。
@ -691,4 +691,4 @@ graph.addNode({
<iframe src="/demos/tutorial/advanced/react/react-port"></iframe>
详细使用见[渲染链接桩](../advanced/react#渲染链接桩)
详细使用见[渲染链接桩](/en/docs/tutorial/advanced/react#渲染链接桩)

52
sites/x6-sites/docs/tutorial/basic/port.zh.md
View File

@ -49,9 +49,9 @@ graph.addNode({
<iframe src="/demos/tutorial/basic/port/default-port"></iframe>
左侧的三个圆就是我们添加的链接桩，这里使用了节点的 [`portMarkup`](../../api/model/node#portmarkup) 选项指定的默认的链接桩（如下）。
左侧的三个圆就是我们添加的链接桩，这里使用了节点的 [`portMarkup`](/zh/docs/api/model/node#portmarkup) 选项指定的默认的链接桩（如下）。
链接桩 Markup 可以在单个链接桩、链接桩群组和节点的 [`portMarkup`](../../api/model/node#portmarkup) 选项三个位置指定，优先级从高到低。
链接桩 Markup 可以在单个链接桩、链接桩群组和节点的 [`portMarkup`](/zh/docs/api/model/node#portmarkup) 选项三个位置指定，优先级从高到低。
```ts
{
@ -118,7 +118,7 @@ graph.addNode({
<iframe src="/demos/tutorial/basic/port/default-port-style"></iframe>
[[warning]]
| 值得注意的是，我们给 `circle` 指定了 [`magnet: true`](../../api/registry/attr#magnet) 这个特殊属性，使链接桩在连线交互时可以被连接上。
| 值得注意的是，我们给 `circle` 指定了 [`magnet: true`](/zh/docs/api/registry/attr#magnet) 这个特殊属性，使链接桩在连线交互时可以被连接上。
上面代码中每个链接桩的样式都一样，显得有点冗长，我们可以通过 `group` 选项来设置链接桩分组，使该组中的链接桩具有相同的行为和样式。
@ -221,9 +221,9 @@ graph.addNode({
})
```
这里使用了节点的 [`portLabelMarkup`](../../api/model/node#portlabelmarkup) 选项指定的默认标签（如下）。
这里使用了节点的 [`portLabelMarkup`](/zh/docs/api/model/node#portlabelmarkup) 选项指定的默认标签（如下）。
链接桩标签的 Markup 可以在单个链接桩、链接桩群组和节点的 [`portLabelMarkup`](../../api/model/node#portlabelmarkup) 选项三个位置指定，优先级从高到低。
链接桩标签的 Markup 可以在单个链接桩、链接桩群组和节点的 [`portLabelMarkup`](/zh/docs/api/model/node#portlabelmarkup) 选项三个位置指定，优先级从高到低。
```ts
{
@ -423,16 +423,16 @@ const node = new Node({
链接桩布局算法只能通过 `groups` 中的 `position` 选项来指定，因为布局算法在计算链接桩位置是需要考虑到群组中的所有连接桩，我们在单个链接桩中可以通过 `args` 选项来影响该链接桩的布局结果。
我们默认提供了下面几种链接桩布局算法，同时支持[自定义链接桩布局算法并注册使用](../../api/registry/port-layout#registry)，点击下面的链接可以了解每种布局算法的使用方法。
我们默认提供了下面几种链接桩布局算法，同时支持[自定义链接桩布局算法并注册使用](/zh/docs/api/registry/port-layout#registry)，点击下面的链接可以了解每种布局算法的使用方法。
- [`'absolute'`](../../api/registry/port-layout#absolute) 绝对定位。
- [`'left'`](../../api/registry/port-layout#left-right-top-bottom) 矩形节点左侧均匀分布。
- [`'right'`](../../api/registry/port-layout#left-right-top-bottom) 矩形节点右侧均匀分布。
- [`'top'`](../../api/registry/port-layout#left-right-top-bottom) 矩形节点顶部均匀分布。
- [`'bottom'`](../../api/registry/port-layout#left-right-top-bottom) 矩形节点底部均匀分布。
- [`'line'`](../../api/registry/port-layout#line) 沿指定的线均匀分布。
- [`'ellipse'`](../../api/registry/port-layout#ellipse) 沿椭圆圆弧分布。
- [`'ellipseSpread'`](../../api/registry/port-layout#ellipsespread) 沿椭圆均匀分布。
- [`'absolute'`](/zh/docs/api/registry/port-layout#absolute) 绝对定位。
- [`'left'`](/zh/docs/api/registry/port-layout#left-right-top-bottom) 矩形节点左侧均匀分布。
- [`'right'`](/zh/docs/api/registry/port-layout#left-right-top-bottom) 矩形节点右侧均匀分布。
- [`'top'`](/zh/docs/api/registry/port-layout#left-right-top-bottom) 矩形节点顶部均匀分布。
- [`'bottom'`](/zh/docs/api/registry/port-layout#left-right-top-bottom) 矩形节点底部均匀分布。
- [`'line'`](/zh/docs/api/registry/port-layout#line) 沿指定的线均匀分布。
- [`'ellipse'`](/zh/docs/api/registry/port-layout#ellipse) 沿椭圆圆弧分布。
- [`'ellipseSpread'`](/zh/docs/api/registry/port-layout#ellipsespread) 沿椭圆均匀分布。
下面我们就来定制一个具有输入和输出链接桩的节点。
@ -505,18 +505,18 @@ graph.addNode({
在 `groups` 的 `label.position` 选项和节点的 `label.position` 选项中都可以指定标签的位置。
我们默认提供了下面几种标签位置，也支持[自定义标签位置并注册使用](../../api/registry/port-label-layout#registry)，点击下面的链接了解每种标签位置的使用方法。
我们默认提供了下面几种标签位置，也支持[自定义标签位置并注册使用](/zh/docs/api/registry/port-label-layout#registry)，点击下面的链接了解每种标签位置的使用方法。
- [`left`](../../api/registry/port-label-layout#side) 标签位于链接桩左侧。
- [`right`](../../api/registry/port-label-layout#side) 标签位于链接桩右侧。
- [`top`](../../api/registry/port-label-layout#side) 标签位于链接桩上方。
- [`bottom`](../../api/registry/port-label-layout#side) 标签位于链接桩下方。
- [`inside`](../../api/registry/port-label-layout#insideoutside) 标签位于节点内围（靠近边线的内侧）。
- [`outside`](../../api/registry/port-label-layout#insideoutside) 标签位于节点外围（靠近边线的外侧）。
- [`insideOriented`](../../api/registry/port-label-layout#insideoutside) 标签位于节点内围，而且根据所在方位自动调整文本的方向。
- [`outsideOriented`](../../api/registry/port-label-layout#insideoutside) 标签位于节点外围，而且根据所在方位自动调整文本的方向。
- [`radial`](../../api/registry/port-label-layout#radial) 标签位于圆形或椭圆形节点的外围。
- [`radialOriented`](../../api/registry/port-label-layout#radial) 标签位于圆形或椭圆形节点的外围，并使标签文本自动沿圆弧方向旋转。
- [`left`](/zh/docs/api/registry/port-label-layout#side) 标签位于链接桩左侧。
- [`right`](/zh/docs/api/registry/port-label-layout#side) 标签位于链接桩右侧。
- [`top`](/zh/docs/api/registry/port-label-layout#side) 标签位于链接桩上方。
- [`bottom`](/zh/docs/api/registry/port-label-layout#side) 标签位于链接桩下方。
- [`inside`](/zh/docs/api/registry/port-label-layout#insideoutside) 标签位于节点内围（靠近边线的内侧）。
- [`outside`](/zh/docs/api/registry/port-label-layout#insideoutside) 标签位于节点外围（靠近边线的外侧）。
- [`insideOriented`](/zh/docs/api/registry/port-label-layout#insideoutside) 标签位于节点内围，而且根据所在方位自动调整文本的方向。
- [`outsideOriented`](/zh/docs/api/registry/port-label-layout#insideoutside) 标签位于节点外围，而且根据所在方位自动调整文本的方向。
- [`radial`](/zh/docs/api/registry/port-label-layout#radial) 标签位于圆形或椭圆形节点的外围。
- [`radialOriented`](/zh/docs/api/registry/port-label-layout#radial) 标签位于圆形或椭圆形节点的外围，并使标签文本自动沿圆弧方向旋转。
下面我们为刚刚创建的输入、输出连接桩指定一下标签和标签位置。
@ -691,4 +691,4 @@ graph.addNode({
<iframe src="/demos/tutorial/advanced/react/react-port"></iframe>
详细使用见[渲染链接桩](../advanced/react#渲染链接桩)
详细使用见[渲染链接桩](/zh/docs/tutorial/advanced/react#渲染链接桩)

2
sites/x6-sites/docs/tutorial/epilog.en.md
View File

@ -34,7 +34,7 @@ X6 的核心能力和框架无关，在 X6 的基础上我们有 [x6-react-shape
### 怎么兼容 IE
X6 是支持 `IE 11` 的，支持 [cdn](../getting-started#安装) 和模块化引入方式：
X6 是支持 `IE 11` 的，支持 [cdn](/en/docs/tutorial/getting-started#安装) 和模块化引入方式：
```ts
import { Graph } from '@antv/x6/dist/x6'

2
sites/x6-sites/docs/tutorial/epilog.zh.md
View File

@ -34,7 +34,7 @@ X6 的核心能力和框架无关，在 X6 的基础上我们有 [x6-react-shape
### 怎么兼容 IE
X6 是支持 `IE 11` 的，支持 [cdn](../getting-started#安装) 和模块化引入方式：
X6 是支持 `IE 11` 的，支持 [cdn](/zh/docs/tutorial/getting-started#安装) 和模块化引入方式：
```ts
import { Graph } from '@antv/x6/dist/x6'

34
sites/x6-sites/docs/tutorial/getting-started.en.md
View File

@ -353,23 +353,23 @@ const data = {
本章仅仅介绍了如何安装以及最简单的使用场景，在后续的教程中你可以了解到更多内容。
- [画布 Graph](./basic/graph)
- [基类 Cell](./basic/cell)
- [节点 Node](./basic/node)
- [边 Edge](./basic/edge)
- [群组 Group](./basic/group)
- [链接桩 Port](./basic/port)
- [画布网格 Grid](./basic/grid)
- [画布背景 Background](./basic/background)
- [剪切板 Clipboard](./basic/clipboard)
- [撤销/重做 Redo/Undo](./basic/history)
- [点选/框选 Selection](./basic/selection)
- [对齐线 Snapline](./basic/snapline)
- [滚动 Scroller](./basic/scroller)
- [小地图 Minimap](./basic/minimap)
- [拖拽 Dnd](./basic/dnd)
- [快捷键 Keyboard](./basic/keyboard)
- [鼠标滚轮缩放 MouseWheel](./basic/mousewheel)
- [画布 Graph](/en/docs/tutorial/basic/graph)
- [基类 Cell](/en/docs/tutorial/basic/cell)
- [节点 Node](/en/docs/tutorial/basic/node)
- [边 Edge](/en/docs/tutorial/basic/edge)
- [群组 Group](/en/docs/tutorial/basic/group)
- [链接桩 Port](/en/docs/tutorial/basic/port)
- [画布网格 Grid](/en/docs/tutorial/basic/grid)
- [画布背景 Background](/en/docs/tutorial/basic/background)
- [剪切板 Clipboard](/en/docs/tutorial/basic/clipboard)
- [撤销/重做 Redo/Undo](/en/docs/tutorial/basic/history)
- [点选/框选 Selection](/en/docs/tutorial/basic/selection)
- [对齐线 Snapline](/en/docs/tutorial/basic/snapline)
- [滚动 Scroller](/en/docs/tutorial/basic/scroller)
- [小地图 Minimap](/en/docs/tutorial/basic/minimap)
- [拖拽 Dnd](/en/docs/tutorial/basic/dnd)
- [快捷键 Keyboard](/en/docs/tutorial/basic/keyboard)
- [鼠标滚轮缩放 MouseWheel](/en/docs/tutorial/basic/mousewheel)
更多教程，请参见 [进阶实战](intermediate/serialization) 和 [高级指引](advanced/animation)。

34
sites/x6-sites/docs/tutorial/getting-started.zh.md
View File

@ -353,23 +353,23 @@ const data = {
本章仅仅介绍了如何安装以及最简单的使用场景，在后续的教程中你可以了解到更多内容。
- [画布 Graph](./basic/graph)
- [基类 Cell](./basic/cell)
- [节点 Node](./basic/node)
- [边 Edge](./basic/edge)
- [群组 Group](./basic/group)
- [链接桩 Port](./basic/port)
- [画布网格 Grid](./basic/grid)
- [画布背景 Background](./basic/background)
- [剪切板 Clipboard](./basic/clipboard)
- [撤销/重做 Redo/Undo](./basic/history)
- [点选/框选 Selection](./basic/selection)
- [对齐线 Snapline](./basic/snapline)
- [滚动 Scroller](./basic/scroller)
- [小地图 Minimap](./basic/minimap)
- [拖拽 Dnd](./basic/dnd)
- [快捷键 Keyboard](./basic/keyboard)
- [鼠标滚轮缩放 MouseWheel](./basic/mousewheel)
- [画布 Graph](/zh/docs/tutorial/basic/graph)
- [基类 Cell](/zh/docs/tutorial/basic/cell)
- [节点 Node](/zh/docs/tutorial/basic/node)
- [边 Edge](/zh/docs/tutorial/basic/edge)
- [群组 Group](/zh/docs/tutorial/basic/group)
- [链接桩 Port](/zh/docs/tutorial/basic/port)
- [画布网格 Grid](/zh/docs/tutorial/basic/grid)
- [画布背景 Background](/zh/docs/tutorial/basic/background)
- [剪切板 Clipboard](/zh/docs/tutorial/basic/clipboard)
- [撤销/重做 Redo/Undo](/zh/docs/tutorial/basic/history)
- [点选/框选 Selection](/zh/docs/tutorial/basic/selection)
- [对齐线 Snapline](/zh/docs/tutorial/basic/snapline)
- [滚动 Scroller](/zh/docs/tutorial/basic/scroller)
- [小地图 Minimap](/zh/docs/tutorial/basic/minimap)
- [拖拽 Dnd](/zh/docs/tutorial/basic/dnd)
- [快捷键 Keyboard](/zh/docs/tutorial/basic/keyboard)
- [鼠标滚轮缩放 MouseWheel](/zh/docs/tutorial/basic/mousewheel)
更多教程，请参见 [进阶实战](intermediate/serialization) 和 [高级指引](advanced/animation)。

24
sites/x6-sites/docs/tutorial/intermediate/attrs.en.md
View File

@ -7,7 +7,7 @@ redirect_from:
- /en/docs/tutorial/intermediate
---
在之前教程中我们介绍了[如何通过 `attrs` 定制样式](../basic/cell#attrs-1)，同时在[使用箭头教程](../basic/edge#使用箭头-marker)中看到了 `sourceMarker` 和 `targetMarker` 两个特殊属性的强大作用，并了解到 `attrs` 在[节点样式](../basic/node#定制样式-attrs)、[边样式](../basic/edge#定制样式-attrs)、[标签样式](./edge-labels#标签样式)等多处被广泛使用，所以有必要对属性相关概念作更详细的介绍。
在之前教程中我们介绍了[如何通过 `attrs` 定制样式](/en/docs/tutorial/basic/cell#attrs-1)，同时在[使用箭头教程](/en/docs/tutorial/basic/edge#使用箭头-marker)中看到了 `sourceMarker` 和 `targetMarker` 两个特殊属性的强大作用，并了解到 `attrs` 在[节点样式](/en/docs/tutorial/basic/node#定制样式-attrs)、[边样式](/en/docs/tutorial/basic/edge#定制样式-attrs)、[标签样式](/en/docs/tutorial/intermediate/edge-labels#标签样式)等多处被广泛使用，所以有必要对属性相关概念作更详细的介绍。
对于原生 SVG 属性，网上有很多教程可以参考，例如 MDN 提供的 [SVG 属性参考](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute)，这里我们将更多聚焦到如何定义和使用特殊属性。特殊属性提供了比[原生 SVG 属性](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute)更加灵活和强大的功能，在应用属性时，原生属性被直接传递给对应的元素，特殊属性则被进一步加工处理，转换为浏览器认识的原生属性后，再传递给对应的元素。
@ -15,11 +15,11 @@ redirect_from:
在定制节点或边时，设置元素的相对大小是一个非常常见需求，我们在 X6 中提供了一系列以 `ref` 为前缀特殊属性，可以通过这些属性来为元素设置相对大小，同时这些属性的计算都是基于节点/边的数据大小，也就是说所有计算都不依赖浏览器的 bbox 计算，所以不存在任何性能问题。
- [`refWidth`](../../api/registry/attr#refwidth) 和 [`refHeight`](../../api/registry/attr#refheight) 元素大小。
- [`refX`](../../api/registry/attr#refx) 和 [`refY`](../../api/registry/attr#refy) 元素位置。
- [`refCx`](../../api/registry/attr#refcx) 和 [`refCy`](../../api/registry/attr#refcy) 椭圆 `<ellipse>` 和圆 `<circle>` 中心位置。
- [`refRx`](../../api/registry/attr#refrx) 和 [`refRy`](../../api/registry/attr#refry) 椭圆 `<ellipse>` 半径。
- [`refR`](../../api/registry/attr#refr) 圆 `<circle>` 半径。
- [`refWidth`](/en/docs/api/registry/attr#refwidth) 和 [`refHeight`](/en/docs/api/registry/attr#refheight) 元素大小。
- [`refX`](/en/docs/api/registry/attr#refx) 和 [`refY`](/en/docs/api/registry/attr#refy) 元素位置。
- [`refCx`](/en/docs/api/registry/attr#refcx) 和 [`refCy`](/en/docs/api/registry/attr#refcy) 椭圆 `<ellipse>` 和圆 `<circle>` 中心位置。
- [`refRx`](/en/docs/api/registry/attr#refrx) 和 [`refRy`](/en/docs/api/registry/attr#refry) 椭圆 `<ellipse>` 半径。
- [`refR`](/en/docs/api/registry/attr#refr) 圆 `<circle>` 半径。
接下来我们一起来看看如何使用这些相对属性。下面案例中，我们定一个红色椭圆 `e`、一个绿色矩形 `r`、和蓝色圆形 `c` 和一个表示节点大小的矩形 `outline`。
@ -108,11 +108,11 @@ graph.addNode({
我们提供了下面几个属性来设置边以及相对于边的位置。
- [`connection`](../../api/registry/attr#connection) 仅适用于边的 `<path>` 元素，当该属性为 `true` 时，表示将在该元素上渲染边。
- [`atConnectionLength`](../../api/registry/attr#atconnectionlengthkeepgradient) 是 [`atConnectionLengthKeepGradient`](../../api/registry/attr#atconnectionlengthkeepgradient) 属性的简称，表示将指定元素移动到指定的偏移量的位置处，并自动旋转元素，使其方向与所在位置边的斜率保持一致。
- [`atConnectionRatio`](../../api/registry/attr#atconnectionratiokeepgradient) 是 [`atConnectionRatioKeepGradient`](../../api/registry/attr#atconnectionratiokeepgradient) 属性的简称，表示将指定元素移动到指定比例 `[0, 1]` 位置处，并自动旋转元素，使其方向与所在位置边的斜率保持一致。
- [`atConnectionLengthIgnoreGradient`](../../api/registry/attr#atconnectionlengthignoregradient) 将指定元素移动到指定偏移量的位置处，忽略边的斜率，即不会跟随边自动旋转。
- [`atConnectionRatioIgnoreGradient`](../../api/registry/attr#atconnectionratioignoregradient)，将指定元素移动到指定比例 `[0, 1]` 位置处，忽略边的斜率，即不会跟随边自动旋转。
- [`connection`](/en/docs/api/registry/attr#connection) 仅适用于边的 `<path>` 元素，当该属性为 `true` 时，表示将在该元素上渲染边。
- [`atConnectionLength`](/en/docs/api/registry/attr#atconnectionlengthkeepgradient) 是 [`atConnectionLengthKeepGradient`](/en/docs/api/registry/attr#atconnectionlengthkeepgradient) 属性的简称，表示将指定元素移动到指定的偏移量的位置处，并自动旋转元素，使其方向与所在位置边的斜率保持一致。
- [`atConnectionRatio`](/en/docs/api/registry/attr#atconnectionratiokeepgradient) 是 [`atConnectionRatioKeepGradient`](/en/docs/api/registry/attr#atconnectionratiokeepgradient) 属性的简称，表示将指定元素移动到指定比例 `[0, 1]` 位置处，并自动旋转元素，使其方向与所在位置边的斜率保持一致。
- [`atConnectionLengthIgnoreGradient`](/en/docs/api/registry/attr#atconnectionlengthignoregradient) 将指定元素移动到指定偏移量的位置处，忽略边的斜率，即不会跟随边自动旋转。
- [`atConnectionRatioIgnoreGradient`](/en/docs/api/registry/attr#atconnectionratioignoregradient)，将指定元素移动到指定比例 `[0, 1]` 位置处，忽略边的斜率，即不会跟随边自动旋转。
```ts
graph.addEdge({
@ -205,4 +205,4 @@ graph.addEdge({
## 使用箭头
我们可以使用 [`sourceMarker`](../../api/registry/attr#sourcemarker) 和 [`targetMarker`](../../api/registry/attr#targetmarker) 两个特殊属性来为边指定起始箭头和终止箭头，详情请参考[这篇教程](./marker)。
我们可以使用 [`sourceMarker`](/en/docs/api/registry/attr#sourcemarker) 和 [`targetMarker`](/en/docs/api/registry/attr#targetmarker) 两个特殊属性来为边指定起始箭头和终止箭头，详情请参考[这篇教程](/en/docs/tutorial/intermediate/marker)。

24
sites/x6-sites/docs/tutorial/intermediate/attrs.zh.md
View File

@ -7,7 +7,7 @@ redirect_from:
- /zh/docs/tutorial/intermediate
---
在之前教程中我们介绍了[如何通过 `attrs` 定制样式](../basic/cell#attrs-1)，同时在[使用箭头教程](../basic/edge#使用箭头-marker)中看到了 `sourceMarker` 和 `targetMarker` 两个特殊属性的强大作用，并了解到 `attrs` 在[节点样式](../basic/node#定制样式-attrs)、[边样式](../basic/edge#定制样式-attrs)、[标签样式](./edge-labels#标签样式)等多处被广泛使用，所以有必要对属性相关概念作更详细的介绍。
在之前教程中我们介绍了[如何通过 `attrs` 定制样式](/zh/docs/tutorial/basic/cell#attrs-1)，同时在[使用箭头教程](/zh/docs/tutorial/basic/edge#使用箭头-marker)中看到了 `sourceMarker` 和 `targetMarker` 两个特殊属性的强大作用，并了解到 `attrs` 在[节点样式](/zh/docs/tutorial/basic/node#定制样式-attrs)、[边样式](/zh/docs/tutorial/basic/edge#定制样式-attrs)、[标签样式](/zh/docs/tutorial/intermediate/edge-labels#标签样式)等多处被广泛使用，所以有必要对属性相关概念作更详细的介绍。
对于原生 SVG 属性，网上有很多教程可以参考，例如 MDN 提供的 [SVG 属性参考](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute)，这里我们将更多聚焦到如何定义和使用特殊属性。特殊属性提供了比[原生 SVG 属性](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute)更加灵活和强大的功能，在应用属性时，原生属性被直接传递给对应的元素，特殊属性则被进一步加工处理，转换为浏览器认识的原生属性后，再传递给对应的元素。
@ -15,11 +15,11 @@ redirect_from:
在定制节点或边时，设置元素的相对大小是一个非常常见需求，我们在 X6 中提供了一系列以 `ref` 为前缀特殊属性，可以通过这些属性来为元素设置相对大小，同时这些属性的计算都是基于节点/边的数据大小，也就是说所有计算都不依赖浏览器的 bbox 计算，所以不存在任何性能问题。
- [`refWidth`](../../api/registry/attr#refwidth) 和 [`refHeight`](../../api/registry/attr#refheight) 元素大小。
- [`refX`](../../api/registry/attr#refx) 和 [`refY`](../../api/registry/attr#refy) 元素位置。
- [`refCx`](../../api/registry/attr#refcx) 和 [`refCy`](../../api/registry/attr#refcy) 椭圆 `<ellipse>` 和圆 `<circle>` 中心位置。
- [`refRx`](../../api/registry/attr#refrx) 和 [`refRy`](../../api/registry/attr#refry) 椭圆 `<ellipse>` 半径。
- [`refR`](../../api/registry/attr#refr) 圆 `<circle>` 半径。
- [`refWidth`](/zh/docs/api/registry/attr#refwidth) 和 [`refHeight`](/zh/docs/api/registry/attr#refheight) 元素大小。
- [`refX`](/zh/docs/api/registry/attr#refx) 和 [`refY`](/zh/docs/api/registry/attr#refy) 元素位置。
- [`refCx`](/zh/docs/api/registry/attr#refcx) 和 [`refCy`](/zh/docs/api/registry/attr#refcy) 椭圆 `<ellipse>` 和圆 `<circle>` 中心位置。
- [`refRx`](/zh/docs/api/registry/attr#refrx) 和 [`refRy`](/zh/docs/api/registry/attr#refry) 椭圆 `<ellipse>` 半径。
- [`refR`](/zh/docs/api/registry/attr#refr) 圆 `<circle>` 半径。
接下来我们一起来看看如何使用这些相对属性。下面案例中，我们定一个红色椭圆 `e`、一个绿色矩形 `r`、和蓝色圆形 `c` 和一个表示节点大小的矩形 `outline`。
@ -108,11 +108,11 @@ graph.addNode({
我们提供了下面几个属性来设置边以及相对于边的位置。
- [`connection`](../../api/registry/attr#connection) 仅适用于边的 `<path>` 元素，当该属性为 `true` 时，表示将在该元素上渲染边。
- [`atConnectionLength`](../../api/registry/attr#atconnectionlengthkeepgradient) 是 [`atConnectionLengthKeepGradient`](../../api/registry/attr#atconnectionlengthkeepgradient) 属性的简称，表示将指定元素移动到指定的偏移量的位置处，并自动旋转元素，使其方向与所在位置边的斜率保持一致。
- [`atConnectionRatio`](../../api/registry/attr#atconnectionratiokeepgradient) 是 [`atConnectionRatioKeepGradient`](../../api/registry/attr#atconnectionratiokeepgradient) 属性的简称，表示将指定元素移动到指定比例 `[0, 1]` 位置处，并自动旋转元素，使其方向与所在位置边的斜率保持一致。
- [`atConnectionLengthIgnoreGradient`](../../api/registry/attr#atconnectionlengthignoregradient) 将指定元素移动到指定偏移量的位置处，忽略边的斜率，即不会跟随边自动旋转。
- [`atConnectionRatioIgnoreGradient`](../../api/registry/attr#atconnectionratioignoregradient)，将指定元素移动到指定比例 `[0, 1]` 位置处，忽略边的斜率，即不会跟随边自动旋转。
- [`connection`](/zh/docs/api/registry/attr#connection) 仅适用于边的 `<path>` 元素，当该属性为 `true` 时，表示将在该元素上渲染边。
- [`atConnectionLength`](/zh/docs/api/registry/attr#atconnectionlengthkeepgradient) 是 [`atConnectionLengthKeepGradient`](/zh/docs/api/registry/attr#atconnectionlengthkeepgradient) 属性的简称，表示将指定元素移动到指定的偏移量的位置处，并自动旋转元素，使其方向与所在位置边的斜率保持一致。
- [`atConnectionRatio`](/zh/docs/api/registry/attr#atconnectionratiokeepgradient) 是 [`atConnectionRatioKeepGradient`](/zh/docs/api/registry/attr#atconnectionratiokeepgradient) 属性的简称，表示将指定元素移动到指定比例 `[0, 1]` 位置处，并自动旋转元素，使其方向与所在位置边的斜率保持一致。
- [`atConnectionLengthIgnoreGradient`](/zh/docs/api/registry/attr#atconnectionlengthignoregradient) 将指定元素移动到指定偏移量的位置处，忽略边的斜率，即不会跟随边自动旋转。
- [`atConnectionRatioIgnoreGradient`](/zh/docs/api/registry/attr#atconnectionratioignoregradient)，将指定元素移动到指定比例 `[0, 1]` 位置处，忽略边的斜率，即不会跟随边自动旋转。
```ts
graph.addEdge({
@ -205,4 +205,4 @@ graph.addEdge({
## 使用箭头
我们可以使用 [`sourceMarker`](../../api/registry/attr#sourcemarker) 和 [`targetMarker`](../../api/registry/attr#targetmarker) 两个特殊属性来为边指定起始箭头和终止箭头，详情请参考[这篇教程](./marker)。
我们可以使用 [`sourceMarker`](/zh/docs/api/registry/attr#sourcemarker) 和 [`targetMarker`](/zh/docs/api/registry/attr#targetmarker) 两个特殊属性来为边指定起始箭头和终止箭头，详情请参考[这篇教程](/zh/docs/tutorial/intermediate/marker)。

10
sites/x6-sites/docs/tutorial/intermediate/custom-edge.en.md
View File

@ -7,7 +7,7 @@ redirect_from:
- /en/docs/tutorial/intermediate
---
我们在 X6 中内置了 `Edge`、`DoubleEdge` 和 `ShadowEdge` 三种基础边，虽然 `Edge` 就能满足常见需求，但也避免不了偶然的定制需求。定制边与[定制节点](./custom-node)类似，但也有一些不同。
我们在 X6 中内置了 `Edge`、`DoubleEdge` 和 `ShadowEdge` 三种基础边，虽然 `Edge` 就能满足常见需求，但也避免不了偶然的定制需求。定制边与[定制节点](/en/docs/tutorial/intermediate/custom-node)类似，但也有一些不同。
## 原理
@ -29,13 +29,13 @@ class Edge extends BaseEdge {
#### 第二步：配置
调用继承的静态方法 `config(options)` 来配置[边选项](../basic/edge/#选项)的默认值、[自定义选项](../basic/cell#自定义选项)和[自定义属性]()，例如通过 [markup](../basic/cell#markup) 来指定边默认的 SVG/HTML 结构，通过 [attrs](../basic/cell#attrs-1) 来指定边的默认属性样式，通过 [defaultlabel](../basic/edge#defaultlabel) 来指定边的默认标签样式。
调用继承的静态方法 `config(options)` 来配置[边选项](/en/docs/tutorial/basic/edge/#选项)的默认值、[自定义选项](/en/docs/tutorial/basic/cell#自定义选项)和[自定义属性]()，例如通过 [markup](/en/docs/tutorial/basic/cell#markup) 来指定边默认的 SVG/HTML 结构，通过 [attrs](/en/docs/tutorial/basic/cell#attrs-1) 来指定边的默认属性样式，通过 [defaultlabel](/en/docs/tutorial/basic/edge#defaultlabel) 来指定边的默认标签样式。
| 名称 | 类型 | 是否必选 | 默认值 | 说明 |
|-----------|----------------------------------|----------|-----------|-------------------------------------------|
| propHooks | Function \| Function[] \| Object | 否 | undefined | [自定义选项](../basic/cell#自定义选项)钩子。 |
| propHooks | Function \| Function[] \| Object | 否 | undefined | [自定义选项](/en/docs/tutorial/basic/cell#自定义选项)钩子。 |
| attrHooks | Object | 否 | undefined | [自定义属性]()钩子。 |
| ...others | Object | | | [边选项](../basic/edge/#选项)。 |
| ...others | Object | | | [边选项](/en/docs/tutorial/basic/edge/#选项)。 |
看下面 `Edge` 的默认配置。
@ -83,7 +83,7 @@ Edge.config({
上面代码中，我们通过 `markup` 定义了两个 `<path>` 元素，分别指定了 `wrap` 和 `line` 选择器，并通过 `markup` 内部的 `attrs` 指定了基础样式（交互响应）：`wrap` 指代的 `<path>` 元素默认透明不可见，用于响应用户交互，而 `line` 指代的 `<path>` 元素仅仅做视觉渲染，不响应用户交互。
然后在 `attrs` 上定义了边的默认属性样式：`line` 指代的 `<path>` 元素代表了边的主体，我们为其指定了 `2px` 宽度的黑色边框，并通过 `targetMarker` [特殊属性](./marker)为其指定了一个终止箭头；`wrap` 指代的 `<path>` 元素用于响应用户交互，为了让鼠标更容易捕获到连线，我们为其指定了 `10px` 的边框。两者的 `connection` 特殊属性都为 `true`，表示两个 `<path>` 元素的 `d` 属性值都将根据边的 [vertices](../basic/edge#vertices)、[router](../basic/edge#router)、[connector](../basic/edge#connector) 选项计算得到。
然后在 `attrs` 上定义了边的默认属性样式：`line` 指代的 `<path>` 元素代表了边的主体，我们为其指定了 `2px` 宽度的黑色边框，并通过 `targetMarker` [特殊属性](/en/docs/tutorial/intermediate/marker)为其指定了一个终止箭头；`wrap` 指代的 `<path>` 元素用于响应用户交互，为了让鼠标更容易捕获到连线，我们为其指定了 `10px` 的边框。两者的 `connection` 特殊属性都为 `true`，表示两个 `<path>` 元素的 `d` 属性值都将根据边的 [vertices](/en/docs/tutorial/basic/edge#vertices)、[router](/en/docs/tutorial/basic/edge#router)、[connector](/en/docs/tutorial/basic/edge#connector) 选项计算得到。
#### 第三步：注册

10
sites/x6-sites/docs/tutorial/intermediate/custom-edge.zh.md
View File

@ -7,7 +7,7 @@ redirect_from:
- /zh/docs/tutorial/intermediate
---
我们在 X6 中内置了 `Edge`、`DoubleEdge` 和 `ShadowEdge` 三种基础边，虽然 `Edge` 就能满足常见需求，但也避免不了偶然的定制需求。定制边与[定制节点](./custom-node)类似，但也有一些不同。
我们在 X6 中内置了 `Edge`、`DoubleEdge` 和 `ShadowEdge` 三种基础边，虽然 `Edge` 就能满足常见需求，但也避免不了偶然的定制需求。定制边与[定制节点](/zh/docs/tutorial/intermediate/custom-node)类似，但也有一些不同。
## 原理
@ -29,13 +29,13 @@ class Edge extends BaseEdge {
#### 第二步：配置
调用继承的静态方法 `config(options)` 来配置[边选项](../basic/edge/#选项)的默认值、[自定义选项](../basic/cell#自定义选项)和[自定义属性]()，例如通过 [markup](../basic/cell#markup) 来指定边默认的 SVG/HTML 结构，通过 [attrs](../basic/cell#attrs-1) 来指定边的默认属性样式，通过 [defaultlabel](../basic/edge#defaultlabel) 来指定边的默认标签样式。
调用继承的静态方法 `config(options)` 来配置[边选项](/zh/docs/tutorial/basic/edge/#选项)的默认值、[自定义选项](/zh/docs/tutorial/basic/cell#自定义选项)和[自定义属性]()，例如通过 [markup](/zh/docs/tutorial/basic/cell#markup) 来指定边默认的 SVG/HTML 结构，通过 [attrs](/zh/docs/tutorial/basic/cell#attrs-1) 来指定边的默认属性样式，通过 [defaultlabel](/zh/docs/tutorial/basic/edge#defaultlabel) 来指定边的默认标签样式。
| 名称 | 类型 | 是否必选 | 默认值 | 说明 |
|-----------|----------------------------------|----------|-----------|-------------------------------------------|
| propHooks | Function \| Function[] \| Object | 否 | undefined | [自定义选项](../basic/cell#自定义选项)钩子。 |
| propHooks | Function \| Function[] \| Object | 否 | undefined | [自定义选项](/zh/docs/tutorial/basic/cell#自定义选项)钩子。 |
| attrHooks | Object | 否 | undefined | [自定义属性]()钩子。 |
| ...others | Object | | | [边选项](../basic/edge/#选项)。 |
| ...others | Object | | | [边选项](/zh/docs/tutorial/basic/edge/#选项)。 |
看下面 `Edge` 的默认配置。
@ -83,7 +83,7 @@ Edge.config({
上面代码中，我们通过 `markup` 定义了两个 `<path>` 元素，分别指定了 `wrap` 和 `line` 选择器，并通过 `markup` 内部的 `attrs` 指定了基础样式（交互响应）：`wrap` 指代的 `<path>` 元素默认透明不可见，用于响应用户交互，而 `line` 指代的 `<path>` 元素仅仅做视觉渲染，不响应用户交互。
然后在 `attrs` 上定义了边的默认属性样式：`line` 指代的 `<path>` 元素代表了边的主体，我们为其指定了 `2px` 宽度的黑色边框，并通过 `targetMarker` [特殊属性](./marker)为其指定了一个终止箭头；`wrap` 指代的 `<path>` 元素用于响应用户交互，为了让鼠标更容易捕获到连线，我们为其指定了 `10px` 的边框。两者的 `connection` 特殊属性都为 `true`，表示两个 `<path>` 元素的 `d` 属性值都将根据边的 [vertices](../basic/edge#vertices)、[router](../basic/edge#router)、[connector](../basic/edge#connector) 选项计算得到。
然后在 `attrs` 上定义了边的默认属性样式：`line` 指代的 `<path>` 元素代表了边的主体，我们为其指定了 `2px` 宽度的黑色边框，并通过 `targetMarker` [特殊属性](/zh/docs/tutorial/intermediate/marker)为其指定了一个终止箭头；`wrap` 指代的 `<path>` 元素用于响应用户交互，为了让鼠标更容易捕获到连线，我们为其指定了 `10px` 的边框。两者的 `connection` 特殊属性都为 `true`，表示两个 `<path>` 元素的 `d` 属性值都将根据边的 [vertices](/zh/docs/tutorial/basic/edge#vertices)、[router](/zh/docs/tutorial/basic/edge#router)、[connector](/zh/docs/tutorial/basic/edge#connector) 选项计算得到。
#### 第三步：注册

8
sites/x6-sites/docs/tutorial/intermediate/custom-node.en.md
View File

@ -29,13 +29,13 @@ class Rect extends Node {
#### 第二步：配置
调用继承的静态方法 `config(options)` 来配置[节点选项](../basic/node/#选项)的默认值、[自定义选项](../basic/cell#自定义选项)和[自定义属性]()，最常用选项的是通过 [markup](../basic/cell#markup) 来指定节点默认的 SVG/HTML 结构，通过 [attrs](../basic/cell#attrs-1) 来指定节点的默认属性样式。
调用继承的静态方法 `config(options)` 来配置[节点选项](/en/docs/tutorial/basic/node/#选项)的默认值、[自定义选项](/en/docs/tutorial/basic/cell#自定义选项)和[自定义属性]()，最常用选项的是通过 [markup](/en/docs/tutorial/basic/cell#markup) 来指定节点默认的 SVG/HTML 结构，通过 [attrs](/en/docs/tutorial/basic/cell#attrs-1) 来指定节点的默认属性样式。
| 名称 | 类型 | 是否必选 | 默认值 | 说明 |
|-----------|----------------------------------|----------|-----------|-------------------------------------------|
| propHooks | Function \| Function[] \| Object | 否 | undefined | [自定义选项](../basic/cell#自定义选项)钩子。 |
| propHooks | Function \| Function[] \| Object | 否 | undefined | [自定义选项](/en/docs/tutorial/basic/cell#自定义选项)钩子。 |
| attrHooks | Object | 否 | undefined | [自定义属性]()钩子。 |
| ...others | Object | | | [节点选项](../basic/node/#选项)。 |
| ...others | Object | | | [节点选项](/en/docs/tutorial/basic/node/#选项)。 |
看下面 `Rect` 节点的默认配置。
@ -79,7 +79,7 @@ Rect.config({
})
```
上面代码中，我们通过 `width` 和 `height` 指定了节点的默认大小，然后通过 `markup` 定义了节点由 `<rect>` 和 `<text>` 两个 SVG 元素构成，并分别指定了 `body` 和 `label` 两个选择器，接着就可以在 `attrs` 中通过这两个选择器来指定节点的默认样式。最后通过 `propHooks` 定义了一个[自定义选项](../basic/cell#自定义选项) `label`，这样我们就可以通过 label 设置标签文本。
上面代码中，我们通过 `width` 和 `height` 指定了节点的默认大小，然后通过 `markup` 定义了节点由 `<rect>` 和 `<text>` 两个 SVG 元素构成，并分别指定了 `body` 和 `label` 两个选择器，接着就可以在 `attrs` 中通过这两个选择器来指定节点的默认样式。最后通过 `propHooks` 定义了一个[自定义选项](/en/docs/tutorial/basic/cell#自定义选项) `label`，这样我们就可以通过 label 设置标签文本。
#### 第三步：注册

8
sites/x6-sites/docs/tutorial/intermediate/custom-node.zh.md
View File

@ -29,13 +29,13 @@ class Rect extends Node {
#### 第二步：配置
调用继承的静态方法 `config(options)` 来配置[节点选项](../basic/node/#选项)的默认值、[自定义选项](../basic/cell#自定义选项)和[自定义属性]()，最常用选项的是通过 [markup](../basic/cell#markup) 来指定节点默认的 SVG/HTML 结构，通过 [attrs](../basic/cell#attrs-1) 来指定节点的默认属性样式。
调用继承的静态方法 `config(options)` 来配置[节点选项](/zh/docs/tutorial/basic/node/#选项)的默认值、[自定义选项](/zh/docs/tutorial/basic/cell#自定义选项)和[自定义属性]()，最常用选项的是通过 [markup](/zh/docs/tutorial/basic/cell#markup) 来指定节点默认的 SVG/HTML 结构，通过 [attrs](/zh/docs/tutorial/basic/cell#attrs-1) 来指定节点的默认属性样式。
| 名称 | 类型 | 是否必选 | 默认值 | 说明 |
|-----------|----------------------------------|----------|-----------|-------------------------------------------|
| propHooks | Function \| Function[] \| Object | 否 | undefined | [自定义选项](../basic/cell#自定义选项)钩子。 |
| propHooks | Function \| Function[] \| Object | 否 | undefined | [自定义选项](/zh/docs/tutorial/basic/cell#自定义选项)钩子。 |
| attrHooks | Object | 否 | undefined | [自定义属性]()钩子。 |
| ...others | Object | | | [节点选项](../basic/node/#选项)。 |
| ...others | Object | | | [节点选项](/zh/docs/tutorial/basic/node/#选项)。 |
看下面 `Rect` 节点的默认配置。
@ -79,7 +79,7 @@ Rect.config({
})
```
上面代码中，我们通过 `width` 和 `height` 指定了节点的默认大小，然后通过 `markup` 定义了节点由 `<rect>` 和 `<text>` 两个 SVG 元素构成，并分别指定了 `body` 和 `label` 两个选择器，接着就可以在 `attrs` 中通过这两个选择器来指定节点的默认样式。最后通过 `propHooks` 定义了一个[自定义选项](../basic/cell#自定义选项) `label`，这样我们就可以通过 label 设置标签文本。
上面代码中，我们通过 `width` 和 `height` 指定了节点的默认大小，然后通过 `markup` 定义了节点由 `<rect>` 和 `<text>` 两个 SVG 元素构成，并分别指定了 `body` 和 `label` 两个选择器，接着就可以在 `attrs` 中通过这两个选择器来指定节点的默认样式。最后通过 `propHooks` 定义了一个[自定义选项](/zh/docs/tutorial/basic/cell#自定义选项) `label`，这样我们就可以通过 label 设置标签文本。
#### 第三步：注册

20
sites/x6-sites/docs/tutorial/intermediate/edge-labels.en.md
View File

@ -7,19 +7,19 @@ redirect_from:
- /en/docs/tutorial/intermediate
---
在之前的[教程](../basic/edge#labels)中我们简单介绍了如何为边配置标签，由于 X6 中边的标签配置非常灵活，所以这里用单独的篇幅来详细介绍如何使用边的标签。
在之前的[教程](/en/docs/tutorial/basic/edge#labels)中我们简单介绍了如何为边配置标签，由于 X6 中边的标签配置非常灵活，所以这里用单独的篇幅来详细介绍如何使用边的标签。
开始之前，我们先简单了解一下 Edge 实例上操作标签的几个方法。
| 方法签名 | 说明 |
|---------------------------------------------------------------|-------------------|
| [edge.getLabels()](../../api/model/edge#getlabels) | 获取所有标签。 |
| [edge.setLabels(...)](../../api/model/edge#setlabels) | 设置标签。 |
| [edge.insertLabel(...)](../../api/model/edge#insertlabel) | 在指定位置插入标签。 |
| [edge.appendLabel(...)](../../api/model/edge#appendlabel) | 在末尾追加标签。 |
| [edge.setLabelAt(...)](../../api/model/edge#setlabelat) | 设置指定位置的标签。 |
| [edge.getLabelAt(...)](../../api/model/edge#getlabelat) | 获取指定位置的标签。 |
| [edge.removeLabelAt(...)](../../api/model/edge#removelabelat) | 删除指定位置的标签。 |
| [edge.getLabels()](/en/docs/api/model/edge#getlabels) | 获取所有标签。 |
| [edge.setLabels(...)](/en/docs/api/model/edge#setlabels) | 设置标签。 |
| [edge.insertLabel(...)](/en/docs/api/model/edge#insertlabel) | 在指定位置插入标签。 |
| [edge.appendLabel(...)](/en/docs/api/model/edge#appendlabel) | 在末尾追加标签。 |
| [edge.setLabelAt(...)](/en/docs/api/model/edge#setlabelat) | 设置指定位置的标签。 |
| [edge.getLabelAt(...)](/en/docs/api/model/edge#getlabelat) | 获取指定位置的标签。 |
| [edge.removeLabelAt(...)](/en/docs/api/model/edge#removelabelat) | 删除指定位置的标签。 |
## 标签定义
@ -56,7 +56,7 @@ interface Label {
## 默认标签
创建 Edge 时可以通过 [defaultLabel 选项](../basic/edge#defaultlabel) 来设置默认标签，其默认值如下：
创建 Edge 时可以通过 [defaultLabel 选项](/en/docs/tutorial/basic/edge#defaultlabel) 来设置默认标签，其默认值如下：
```ts
{
@ -518,7 +518,7 @@ Edge.parseStringLabel = (label: string) => {
## 单标签
大多数边都只拥有最多一个标签，所以我们为 `Edge` 定义了一个[自定义选项](../basic/cell#自定义选项) `label` 来支持传入单标签。
大多数边都只拥有最多一个标签，所以我们为 `Edge` 定义了一个[自定义选项](/en/docs/tutorial/basic/cell#自定义选项) `label` 来支持传入单标签。
```ts
graph.addEdge({

20
sites/x6-sites/docs/tutorial/intermediate/edge-labels.zh.md
View File

@ -7,19 +7,19 @@ redirect_from:
- /zh/docs/tutorial/intermediate
---
在之前的[教程](../basic/edge#labels)中我们简单介绍了如何为边配置标签，由于 X6 中边的标签配置非常灵活，所以这里用单独的篇幅来详细介绍如何使用边的标签。
在之前的[教程](/zh/docs/tutorial/basic/edge#labels)中我们简单介绍了如何为边配置标签，由于 X6 中边的标签配置非常灵活，所以这里用单独的篇幅来详细介绍如何使用边的标签。
开始之前，我们先简单了解一下 Edge 实例上操作标签的几个方法。
| 方法签名 | 说明 |
|---------------------------------------------------------------|-------------------|
| [edge.getLabels()](../../api/model/edge#getlabels) | 获取所有标签。 |
| [edge.setLabels(...)](../../api/model/edge#setlabels) | 设置标签。 |
| [edge.insertLabel(...)](../../api/model/edge#insertlabel) | 在指定位置插入标签。 |
| [edge.appendLabel(...)](../../api/model/edge#appendlabel) | 在末尾追加标签。 |
| [edge.setLabelAt(...)](../../api/model/edge#setlabelat) | 设置指定位置的标签。 |
| [edge.getLabelAt(...)](../../api/model/edge#getlabelat) | 获取指定位置的标签。 |
| [edge.removeLabelAt(...)](../../api/model/edge#removelabelat) | 删除指定位置的标签。 |
| [edge.getLabels()](/en/docs/api/model/edge#getlabels) | 获取所有标签。 |
| [edge.setLabels(...)](/en/docs/api/model/edge#setlabels) | 设置标签。 |
| [edge.insertLabel(...)](/en/docs/api/model/edge#insertlabel) | 在指定位置插入标签。 |
| [edge.appendLabel(...)](/en/docs/api/model/edge#appendlabel) | 在末尾追加标签。 |
| [edge.setLabelAt(...)](/en/docs/api/model/edge#setlabelat) | 设置指定位置的标签。 |
| [edge.getLabelAt(...)](/en/docs/api/model/edge#getlabelat) | 获取指定位置的标签。 |
| [edge.removeLabelAt(...)](/en/docs/api/model/edge#removelabelat) | 删除指定位置的标签。 |
## 标签定义
@ -56,7 +56,7 @@ interface Label {
## 默认标签
创建 Edge 时可以通过 [defaultLabel 选项](../basic/edge#defaultlabel) 来设置默认标签，其默认值如下：
创建 Edge 时可以通过 [defaultLabel 选项](/zh/docs/tutorial/basic/edge#defaultlabel) 来设置默认标签，其默认值如下：
```ts
{
@ -518,7 +518,7 @@ Edge.parseStringLabel = (label: string) => {
## 单标签
大多数边都只拥有最多一个标签，所以我们为 `Edge` 定义了一个[自定义选项](../basic/cell#自定义选项) `label` 来支持传入单标签。
大多数边都只拥有最多一个标签，所以我们为 `Edge` 定义了一个[自定义选项](/zh/docs/tutorial/basic/cell#自定义选项) `label` 来支持传入单标签。
```ts
graph.addEdge({

10
sites/x6-sites/docs/tutorial/intermediate/interacting.en.md
View File

@ -233,7 +233,7 @@ const graph = new Graph({
#### anchor
当连接到节点时，通过 [`anchor`](../../api/registry/node-anchor) 来指定被连接的节点的锚点，默认值为 `center`。
当连接到节点时，通过 [`anchor`](/en/docs/api/registry/node-anchor) 来指定被连接的节点的锚点，默认值为 `center`。
#### sourceAnchor
@ -245,7 +245,7 @@ const graph = new Graph({
#### edgeAnchor
当连接到边时，通过 [`edgeAnchor`](../../api/registry/edge-anchor) 来指定被连接的边的锚点，默认值为 `ratio`。
当连接到边时，通过 [`edgeAnchor`](/en/docs/api/registry/edge-anchor) 来指定被连接的边的锚点，默认值为 `ratio`。
#### sourceEdgeAnchor
@ -257,7 +257,7 @@ const graph = new Graph({
#### connectionPoint
指定[连接点](../../api/registry/connector)，默认值为 `boundary`。
指定[连接点](/en/docs/api/registry/connector)，默认值为 `boundary`。
#### sourceConnectionPoint
@ -269,11 +269,11 @@ const graph = new Graph({
#### router
[路由](../../api/registry/router)将边的路径点 `vertices` 做进一步转换处理，并在必要时添加额外的点，然后返回处理后的点，默认值为 `normal`。
[路由](/en/docs/api/registry/router)将边的路径点 `vertices` 做进一步转换处理，并在必要时添加额外的点，然后返回处理后的点，默认值为 `normal`。
#### connector
[连接器](../../api/registry/connector)将起点、路由返回的点、终点加工为 <path> 元素的 d 属性，决定了边渲染到画布后的样式，默认值为 `normal`。
[连接器](/en/docs/api/registry/connector)将起点、路由返回的点、终点加工为 <path> 元素的 d 属性，决定了边渲染到画布后的样式，默认值为 `normal`。
#### validateMagnet

10
sites/x6-sites/docs/tutorial/intermediate/interacting.zh.md
View File

@ -233,7 +233,7 @@ const graph = new Graph({
#### anchor
当连接到节点时，通过 [`anchor`](../../api/registry/node-anchor) 来指定被连接的节点的锚点，默认值为 `center`。
当连接到节点时，通过 [`anchor`](/zh/docs/api/registry/node-anchor) 来指定被连接的节点的锚点，默认值为 `center`。
#### sourceAnchor
@ -245,7 +245,7 @@ const graph = new Graph({
#### edgeAnchor
当连接到边时，通过 [`edgeAnchor`](../../api/registry/edge-anchor) 来指定被连接的边的锚点，默认值为 `ratio`。
当连接到边时，通过 [`edgeAnchor`](/zh/docs/api/registry/edge-anchor) 来指定被连接的边的锚点，默认值为 `ratio`。
#### sourceEdgeAnchor
@ -257,7 +257,7 @@ const graph = new Graph({
#### connectionPoint
指定[连接点](../../api/registry/connector)，默认值为 `boundary`。
指定[连接点](/zh/docs/api/registry/connector)，默认值为 `boundary`。
#### sourceConnectionPoint
@ -269,11 +269,11 @@ const graph = new Graph({
#### router
[路由](../../api/registry/router)将边的路径点 `vertices` 做进一步转换处理，并在必要时添加额外的点，然后返回处理后的点，默认值为 `normal`。
[路由](/zh/docs/api/registry/router)将边的路径点 `vertices` 做进一步转换处理，并在必要时添加额外的点，然后返回处理后的点，默认值为 `normal`。
#### connector
[连接器](../../api/registry/connector)将起点、路由返回的点、终点加工为 <path> 元素的 d 属性，决定了边渲染到画布后的样式，默认值为 `normal`。
[连接器](/zh/docs/api/registry/connector)将起点、路由返回的点、终点加工为 <path> 元素的 d 属性，决定了边渲染到画布后的样式，默认值为 `normal`。
#### validateMagnet

2
sites/x6-sites/docs/tutorial/intermediate/marker.en.md
View File

@ -7,7 +7,7 @@ redirect_from:
- /en/docs/tutorial/intermediate
---
在之前的[教程](../basic/edge#使用箭头-marker)中，我们简单介绍了如何使用 [`sourceMarker`](../../api/registry/attr#sourcemarker) 和 [`targetMarker`](../../api/registry/attr#targetmarker) 两个特殊属性来为边指定起始箭头和终止箭头，并演示了如何使用内置箭头和自定义箭头，接下来我们将详细介绍如何使用各种 SVG 元素来自定义箭头，并详细列举了每个内置箭头的参数项，最后介绍如何将自定义箭头注册为内置箭头。
在之前的[教程](/en/docs/tutorial/basic/edge#使用箭头-marker)中，我们简单介绍了如何使用 [`sourceMarker`](/en/docs/api/registry/attr#sourcemarker) 和 [`targetMarker`](/en/docs/api/registry/attr#targetmarker) 两个特殊属性来为边指定起始箭头和终止箭头，并演示了如何使用内置箭头和自定义箭头，接下来我们将详细介绍如何使用各种 SVG 元素来自定义箭头，并详细列举了每个内置箭头的参数项，最后介绍如何将自定义箭头注册为内置箭头。
## 自定义箭头

2
sites/x6-sites/docs/tutorial/intermediate/marker.zh.md
View File

@ -7,7 +7,7 @@ redirect_from:
- /zh/docs/tutorial/intermediate
---
在之前的[教程](../basic/edge#使用箭头-marker)中，我们简单介绍了如何使用 [`sourceMarker`](../../api/registry/attr#sourcemarker) 和 [`targetMarker`](../../api/registry/attr#targetmarker) 两个特殊属性来为边指定起始箭头和终止箭头，并演示了如何使用内置箭头和自定义箭头，接下来我们将详细介绍如何使用各种 SVG 元素来自定义箭头，并详细列举了每个内置箭头的参数项，最后介绍如何将自定义箭头注册为内置箭头。
在之前的[教程](/zh/docs/tutorial/basic/edge#使用箭头-marker)中，我们简单介绍了如何使用 [`sourceMarker`](/zh/docs/api/registry/attr#sourcemarker) 和 [`targetMarker`](/zh/docs/api/registry/attr#targetmarker) 两个特殊属性来为边指定起始箭头和终止箭头，并演示了如何使用内置箭头和自定义箭头，接下来我们将详细介绍如何使用各种 SVG 元素来自定义箭头，并详细列举了每个内置箭头的参数项，最后介绍如何将自定义箭头注册为内置箭头。
## 自定义箭头

2
sites/x6-sites/docs/tutorial/intermediate/serialization.en.md
View File

@ -47,7 +47,7 @@ redirect_from:
}
```
另外，我们可以 `diff` 参数 `graph.toJSON({ diff: true })` 来导出节点和边的差异数据（与节点和边的[默认配置](../basic/cell#选项默认值)不同的部分）。
另外，我们可以 `diff` 参数 `graph.toJSON({ diff: true })` 来导出节点和边的差异数据（与节点和边的[默认配置](/en/docs/tutorial/basic/cell#选项默认值)不同的部分）。
例如，我们先为矩形和椭圆设置一些默认值：

2
sites/x6-sites/docs/tutorial/intermediate/serialization.zh.md
View File

@ -47,7 +47,7 @@ redirect_from:
}
```
另外，我们可以 `diff` 参数 `graph.toJSON({ diff: true })` 来导出节点和边的差异数据（与节点和边的[默认配置](../basic/cell#选项默认值)不同的部分）。
另外，我们可以 `diff` 参数 `graph.toJSON({ diff: true })` 来导出节点和边的差异数据（与节点和边的[默认配置](/zh/docs/tutorial/basic/cell#选项默认值)不同的部分）。
例如，我们先为矩形和椭圆设置一些默认值：

Some files were not shown because too many files have changed in this diff Show More