test/g6
1
0
Fork 0
mirror of https://gitee.com/antv/g6.git synced 2024-11-29 18:28:19 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

fix: links in doc

Browse Source
This commit is contained in:
chenluli 2020-07-09 14:31:50 +08:00 committed by Moyee
parent 461c73f424
commit 2d7d0bf611
27 changed files with 29 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/api/nodeEdge/itemProperties.zh.md
View File

@ -31,7 +31,7 @@ G6 图上的元素包括节点、边、节点分组 Combo。每一个元素是
- [内置边的通用属性](/zh/docs/manual/middle/elements/edges/defaultEdge#边的通用属性)；
- [内置边的通用样式属性](/zh/docs/manual/middle/elements/edges/defaultEdge#样式属性-style)；
- [内置边的通用文本标签配置](zh/docs/manual/middle/elements/edges/defaultEdge#标签文本-label-及其配置-labelcfg)。
- [内置边的通用文本标签配置](/zh/docs/manual/middle/elements/edges/defaultEdge#标签文本-label-及其配置-labelcfg)。
各个内置边的特有属性见 [内置边](/zh/docs/manual/middle/elements/edges/defaultEdge) 目录下各文档。

2
docs/manual/advanced/custom-combo.en.md
View File

@ -16,7 +16,7 @@ In this document, we will introduce the custom combo mechanism by two examples:
## The API of Register Combo
As stated in [Shape](/en/docs/manual/middle/keyconcept/shape-keyshape), there are two points should be satisfied when customize a combo:
As stated in [Shape](/en/docs/manual/middle/elements/shape-keyshape), there are two points should be satisfied when customize a combo:
- Controll the life cycle of the combo;
- Analyze the input data and show it by graphics.

2
docs/manual/advanced/custom-combo.zh.md
View File

@ -9,7 +9,7 @@ G6 提供了一系列[内置 Combo](/zh/docs/manual/middle/elements/combos/defau
## Combo 接口
通过 [图形 Shape](/zh/docs/manual/middle/keyconcept/shape-keyshape) 章节的学习，我们应该已经知道了自定义 Combo 时需要满足以下两点：
通过 [图形 Shape](/zh/docs/manual/middle/elements/shape-keyshape) 章节的学习，我们应该已经知道了自定义 Combo 时需要满足以下两点：
- 控制 Combo 的生命周期；
- 解析用户输入的数据，在图形上展示。

2
docs/manual/advanced/keyconcept/graphics-group.en.md
View File

@ -12,7 +12,7 @@ order: 1
## What
Graphics Group (hereinafter referred to as Group) in G6 is similar to <a href='https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/g' target='_blank'> `<g>` tag in SVG </a>: Group a container of a group of graphics. The transformations on a Group such as clipping, rotating, zooming, and translating will be applied to all the children of the Group. The properties like color and position will also be inherited by its children. Besides, Group can be nested for complicated objects.
Graphics Group (hereinafter referred to as Group) in G6 is similar to <a href='https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g' target='_blank'> `<g>` tag in SVG </a>: Group a container of a group of graphics. The transformations on a Group such as clipping, rotating, zooming, and translating will be applied to all the children of the Group. The properties like color and position will also be inherited by its children. Besides, Group can be nested for complicated objects.
In G6, all the nodes instances in a Graph is grouped by a Group named `nodeGroup`, all the edges instances are grouped by `edgeGroup`. And the visual level (zIndex) of `nodeGroup` is higher than `edgeGroup`, which means all the nodes will be drawed on the top of all the edges.

2
docs/manual/middle/Plugins.en.md
View File

@ -74,7 +74,7 @@ In complex graph with large number of edges, edge bundling can help you to impro
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*z9iXQq_kcrYAAAAAAAAAAABkARQnAQ' width=600 alt='img'/>
> Edge bundling on American airline graph. <a href='http://antv-2018.alipay.com/zh-cn/g6/3.x/demo/case/american-migration-bundling.html' target='_blank'>Demo Link</a>. <a href='https://g6.antv.vision/zh/docs/manual/cases/edgeBundling' target='_blank'>Demo Document</a>.
> Edge bundling on American airline graph. <a href='/en/examples/case/edgeBundling' target='_blank'>Demo Link</a>. <a href='/en/docs/manual/cases/edgeBundling' target='_blank'>Demo Document</a>.
The edge bundling plugin can be configured to adjust the styles and functions.

2
docs/manual/middle/Plugins.zh.md
View File

@ -75,7 +75,7 @@ Minimap 是用于快速预览和探索图的工具。
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*z9iXQq_kcrYAAAAAAAAAAABkARQnAQ' width=600 alt='img'/>
> 美国航线图边绑定。<a href='http://antv-2018.alipay.com/zh-cn/g6/3.x/demo/case/american-migration-bundling.html' target='_blank'>Demo 链接</a>。该 <a href='https://g6.antv.vision/zh/docs/manual/cases/edgeBundling' target='_blank'>Demo 教程</a>。
> 美国航线图边绑定。<a href='/zh-cn/g6/3.x/demo/case/american-migration-bundling.html' target='_blank'>Demo 链接</a>。该 <a href='/zh/docs/manual/cases/edgeBundling' target='_blank'>Demo 教程</a>。
实例化时可以通过配置项调整边绑定的功能。

6
docs/manual/middle/combo.en.md
View File

@ -3,7 +3,7 @@ title: Node Combo
order: 8
---
Node Combo is a new feature for V3.5. The [node group](/zh/docs/manual/middle/nodeGroup) is also available. We recommend to use Combo for node grouping. <a href='/en/examples/item/defaultCombos' target='_blank'>Demo</a>.
Node Combo is a new feature for V3.5. The [node group](/en/docs/manual/middle/nodeGroup) is also available. We recommend to use Combo for node grouping. <a href='/en/examples/item/defaultCombos' target='_blank'>Demo</a>.
<br /><img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*AngFRpOo4SAAAAAAAAAAAABkARQnAQ' width=600 alt='img'/>
@ -133,13 +133,13 @@ graph.data(data);
graph.render();
```
There is no layout configuration in the code above, so the sizes and positions of combos are automatically calculate according the the child nodes' positions in their data. If you need auto layout, we suggest to configure the `'comboForce'` layout which is designed for combo graph. See [Combo Force Doc](/zh/docs/manual/middle/layout#combo-force) for detail.
There is no layout configuration in the code above, so the sizes and positions of combos are automatically calculate according the the child nodes' positions in their data. If you need auto layout, we suggest to configure the `'comboForce'` layout which is designed for combo graph. See [Combo Force Doc](/en/docs/manual/middle/layout#combo-force) for detail.
The result:
<br /><img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*ltsuTbIkG48AAAAAAAAAAABkARQnAQ' width=400 alt='img'/>
The example above uses the default [Circle Combo](/en/docs/manual/middle/elements/combos/circle), G6 also has [Rect Combo](/en/docs/manual/middle/elements/combos/rect). The configurations can be found in their docs. You can also customize a type of combo by [Custom Combo](/en/docs/manual/advanced/custom-combo) mechanism. <a href='/zh/examples/item/customCombo' target='_blank'>Custom Combo Demo</a>。
The example above uses the default [Circle Combo](/en/docs/manual/middle/elements/combos/circle), G6 also has [Rect Combo](/en/docs/manual/middle/elements/combos/rect). The configurations can be found in their docs. You can also customize a type of combo by [Custom Combo](/en/docs/manual/advanced/custom-combo) mechanism. <a href='/en/examples/item/customCombo' target='_blank'>Custom Combo Demo</a>。
<br />Now, users are not able to interact with the combos and nodes. We are going to introduce how to enable the interactions on combos next.

2
docs/manual/middle/elements/anchorpoint.en.md
View File

@ -3,7 +3,7 @@ title: AnchorPoint
order: 7
---
The anchorPoint of a node is the link point where the related edges link to. In other words, it is the intersection of a node and its related edges. anchorPoints is a 2d array, each element represents the position of one anchor point. The positions of the anchor points in a [Shape](/en/docs/manual/middle/keyconcept/shape-keyshape) are shown below, the range of each x and y is [0, 1]:<br /> <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*EJTyR4j9VN4AAAAAAAAAAABkARQnAQ' width='600' height='300' alt='img'/>
The anchorPoint of a node is the link point where the related edges link to. In other words, it is the intersection of a node and its related edges. anchorPoints is a 2d array, each element represents the position of one anchor point. The positions of the anchor points in a [Shape](/en/docs/manual/middle/elements/shape-keyshape) are shown below, the range of each x and y is [0, 1]:<br /> <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*EJTyR4j9VN4AAAAAAAAAAABkARQnAQ' width='600' height='300' alt='img'/>
You can select the link points for an edge by `sourceAnchor` and `targetAnchor` if there are anchorPoints in the source and target node. Where This `sourceAnchor` and `targetAnchor` indicate the index of the array of anchorPoints. mechanism beautifies the graphs when there are multiple edges between two nodes.

2
docs/manual/middle/elements/anchorpoint.zh.md
View File

@ -3,7 +3,7 @@ title: 节点的连接点 anchorPoint
order: 7
---
节点的连接点 anchorPoint 指的是边连入节点的相对位置，即节点与其相关边的交点位置。anchorPoints 是一个二维数组，每一项表示一个连接点的位置，在一个[图形 Shape](/zh/docs/manual/middle/keyconcept/shape-keyshape) 中，连接点的位置如下图所示，x 和 y 方向上范围都是 [0, 1]：<br /> <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*EJTyR4j9VN4AAAAAAAAAAABkARQnAQ' width='600' height='300' alt='img'/>
节点的连接点 anchorPoint 指的是边连入节点的相对位置，即节点与其相关边的交点位置。anchorPoints 是一个二维数组，每一项表示一个连接点的位置，在一个[图形 Shape](/zh/docs/manual/middle/elements/shape-keyshape) 中，连接点的位置如下图所示，x 和 y 方向上范围都是 [0, 1]：<br /> <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*EJTyR4j9VN4AAAAAAAAAAABkARQnAQ' width='600' height='300' alt='img'/>
节点中有了 anchorPoints 之后，相关边可以分别选择连入起始点、结束点的哪一个 anchorPoint。当需要在节点之间连多条线时，这种机制能够使边的连入更美观。

2
docs/manual/middle/elements/edges/arc.zh.md
View File

@ -50,7 +50,7 @@ const data = {
## 配置项说明
arc 边支持 [边通用配置项](zh/docs/manual/middle/elements/edges/defaultEdge/#边的通用属性)，以下表格对部分常用配置项进行说明。其中 `curveOffset` 属性是 `arc` 特有的属性，它控制了圆弧的大小以及弯曲的方向。
arc 边支持 [边通用配置项](/zh/docs/manual/middle/elements/edges/defaultEdge/#边的通用属性)，以下表格对部分常用配置项进行说明。其中 `curveOffset` 属性是 `arc` 特有的属性，它控制了圆弧的大小以及弯曲的方向。
```javascript
color: '#87e8de',

2
docs/manual/middle/elements/edges/cubic.zh.md
View File

@ -50,7 +50,7 @@ const data = {
## 配置项说明
cubic 边支持 [边通用配置项](zh/docs/manual/middle/elements/edges/defaultEdge/#边的通用属性)，以下表格对部分常用配置项进行说明。对于 Object 类型的配置项将在后面有详细讲解：
cubic 边支持 [边通用配置项](/zh/docs/manual/middle/elements/edges/defaultEdge/#边的通用属性)，以下表格对部分常用配置项进行说明。对于 Object 类型的配置项将在后面有详细讲解：
| 名称 | 含义 | 类型 | 备注 |
| --- | --- | --- | --- |

2
docs/manual/middle/elements/edges/line.zh.md
View File

@ -50,7 +50,7 @@ const data = {
## 配置项说明
line 边支持 [边通用配置项](zh/docs/manual/middle/elements/edges/defaultEdge/#边的通用属性)，以下表格对部分常用配置项进行说明。对于 Object 类型的配置项将在后面有详细讲解：
line 边支持 [边通用配置项](/zh/docs/manual/middle/elements/edges/defaultEdge/#边的通用属性)，以下表格对部分常用配置项进行说明。对于 Object 类型的配置项将在后面有详细讲解：
| 名称 | 含义 | 类型 | 备注 |
| -------- | -------------- | ------ | -------------------------------- |

2
docs/manual/middle/elements/edges/loop.zh.md
View File

@ -52,7 +52,7 @@ const data = {
## 配置项说明
自环是指连接单个节点自身的边，是一种边的特殊情况。支持 [边通用配置项](zh/docs/manual/middle/elements/edges/defaultEdge/#边的通用属性)，以下表格对部分常用配置项进行说明。在通用属性基础上，支持了特殊的配置 `loopCfg`。
自环是指连接单个节点自身的边，是一种边的特殊情况。支持 [边通用配置项](/zh/docs/manual/middle/elements/edges/defaultEdge/#边的通用属性)，以下表格对部分常用配置项进行说明。在通用属性基础上，支持了特殊的配置 `loopCfg`。
loop 边支持以下的配置项，对于 Object 类型的配置项将在后面有详细讲解：

2
docs/manual/middle/elements/edges/polyline.zh.md
View File

@ -50,7 +50,7 @@ const data = {
## 配置项说明
polyline 边支持 [边通用配置项](zh/docs/manual/middle/elements/edges/defaultEdge/#边的通用属性)，以下表格对部分常用配置项进行说明：
polyline 边支持 [边通用配置项](/zh/docs/manual/middle/elements/edges/defaultEdge/#边的通用属性)，以下表格对部分常用配置项进行说明：
```javascript
color: '#87e8de',

2
docs/manual/middle/elements/edges/quadratic.zh.md
View File

@ -50,7 +50,7 @@ const data = {
## 配置项说明
quadratic 边支持 [边通用配置项](zh/docs/manual/middle/elements/edges/defaultEdge/#边的通用属性)，以下表格对部分常用配置项进行说明。对于 Object 类型的配置项将在后面有详细讲解：
quadratic 边支持 [边通用配置项](/zh/docs/manual/middle/elements/edges/defaultEdge/#边的通用属性)，以下表格对部分常用配置项进行说明。对于 Object 类型的配置项将在后面有详细讲解：
| 名称 | 含义 | 类型 | 备注 |
| --- | --- | --- | --- |

2
docs/manual/middle/graph.en.md
View File

@ -100,7 +100,7 @@ Type: Number. THe width and the height of the graph.
### Commonly used Configuration
There are some commonly used configurations. For complete configurations, please refer to [Graph API](/zh/docs/api/Graph).
There are some commonly used configurations. For complete configurations, please refer to [Graph API](/en/docs/api/Graph).
#### Rendering

2
docs/manual/middle/nodeGroup.en.md
View File

@ -5,7 +5,7 @@ order: 9
> The title of Node Group is supported from G6 V3.1.2.
Node Group is a practical function for graph visualization. It is supported from G6 V3.0.5. Refer to the demo <a href='/zh/examples/interaction/nodeGroup' target='_blank'>Demo</a>. <br /><img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*G1OBSJf672QAAAAAAAAAAABkARQnAQ' width=400 alt='img'/>
Node Group is a practical function for graph visualization. It is supported from G6 V3.0.5. Refer to the demo <a href='/en/examples/interaction/nodeGroup' target='_blank'>Demo</a>. <br /><img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*G1OBSJf672QAAAAAAAAAAABkARQnAQ' width=400 alt='img'/>
### Data Structure

2
docs/manual/middle/svg.en.md
View File

@ -14,4 +14,4 @@ const graph = new G6.Graph({
SVG rendering in G6 supports all the functions in Canvas rendering. We all known that the performance of SVG is not good as canvas. So use Canvas rendering in the case of large data instead.
Expect for default nodes and edges and graphics shapes used in custom node and edge as Canvas version, SVG also supports `'dom'` shape when customing node or edge. Detials are in [Custom Node with Dom](/zh/docs/manual/advanced/custom-node/#5-custom-node-with-dom).
Expect for default nodes and edges and graphics shapes used in custom node and edge as Canvas version, SVG also supports `'dom'` shape when customing node or edge. Detials are in [Custom Node with Dom](/en/docs/manual/advanced/custom-node/#5-custom-node-with-dom).

2
examples/interaction/customBehavior/index.en.md
View File

@ -7,4 +7,4 @@ Custom a behavior when the [built-in behaviors](/en/docs/manual/middle/states/de
## Usage
Custom a behavior with `graph.registerBehavior`, refer to [Custom Behavior Doc](en/docs/manual/advanced/custom-behavior).
Custom a behavior with `graph.registerBehavior`, refer to [Custom Behavior Doc](/en/docs/manual/advanced/custom-behavior).

2
examples/interaction/customBehavior/index.zh.md
View File

@ -7,4 +7,4 @@ order: 10
## 使用指南
使用 `graph.registerBehavior` 自定义交互，教程参见 [自定义交互](zh/docs/manual/advanced/custom-behavior)。
使用 `graph.registerBehavior` 自定义交互，教程参见 [自定义交互](/zh/docs/manual/advanced/custom-behavior)。

2
examples/interaction/moveSubtree/index.zh.md
View File

@ -7,4 +7,4 @@ order: 1
## 使用指南
通过拖拽子树的跟节点，靠近新的父节点后放下，可将该子树从原来位置删除，追加到新父节点下，从而改变树的结构。若新父节点是被拖拽子树中的一个节点，则拖拽改变结构将不会生效。
通过拖拽子树的根节点，靠近新的父节点后放下，可将该子树从原来位置删除，追加到新父节点下，从而改变树的结构。若新父节点是被拖拽子树中的一个节点，则拖拽改变结构将不会生效。

2
examples/net/circular/index.en.md
View File

@ -7,7 +7,7 @@ Circular layout orders the nodes according to the configuration, and then places
## Usage
As the demo below, you can deploy it in `layout` while instantiating Graph. it can also be used for [Subgraph Layout](/zh/docs/manual/middle/layout/#%E5%AD%90%E5%9B%BE%E5%B8%83%E5%B1%80). By tuning the configurations, you can adjust the radius, start angle, end angle, nodes' order method, divisions, spiral style, and so on.
As the demo below, you can deploy it in `layout` while instantiating Graph. it can also be used for [Subgraph Layout](/en/docs/manual/middle/layout/#subgraph-layout). By tuning the configurations, you can adjust the radius, start angle, end angle, nodes' order method, divisions, spiral style, and so on.
- Example 1 : Basic Circular Layout, the nodes are placed on the circle clockwise in the data order.
- Example 2 : The nodes are placed on the circle clockwise according to their degrees.

2
examples/net/concentricLayout/index.en.md
View File

@ -7,4 +7,4 @@ Concentric Layout places the nodes on concentric circles.
## Usage
As the demo below, you can deploy it in `layout` while instantiating Graph. it can also be used for [Subgraph Layout](/zh/docs/manual/middle/layout/#%E5%AD%90%E5%9B%BE%E5%B8%83%E5%B1%80). This algorithm will order the nodes according to the parameters first, then the node in the front of the order will be placed on the center of the concentric circles.
As the demo below, you can deploy it in `layout` while instantiating Graph. it can also be used for [Subgraph Layout](/en/docs/manual/middle/layout/#subgraph-layout). This algorithm will order the nodes according to the parameters first, then the node in the front of the order will be placed on the center of the concentric circles.

2
examples/net/dagreFlow/index.en.md
View File

@ -7,7 +7,7 @@ Dagre Layout is an appropriate layout method for directed flow graph. It will ca
## Usage
As the demo below, you can deploy it in `layout` while instantiating Graph. it can also be used for [Subgraph Layout](/zh/docs/manual/middle/layout/#%E5%AD%90%E5%9B%BE%E5%B8%83%E5%B1%80). By tuning the parameters, you can adjust the layout direction, node alignment, node separation, level separation, and so on.
As the demo below, you can deploy it in `layout` while instantiating Graph. it can also be used for [Subgraph Layout](/en/docs/manual/middle/layout/#subgraph-layout). By tuning the parameters, you can adjust the layout direction, node alignment, node separation, level separation, and so on.
- Example 1 : Simple dagre layout.
- Example 2 : Dagre Layout with combos.

2
examples/net/forceDirected/index.en.md
View File

@ -7,7 +7,7 @@ Force-directed layout is a set of algorithms which are imporved and extended by
## Usage
The classical force-directed layout in G6 comes from d3.js. As the demo below, you can deploy it in `layout` while instantiating Graph. it can also be used for [Subgraph Layout](/zh/docs/manual/middle/layout/#%E5%AD%90%E5%9B%BE%E5%B8%83%E5%B1%80).
The classical force-directed layout in G6 comes from d3.js. As the demo below, you can deploy it in `layout` while instantiating Graph. it can also be used for [Subgraph Layout](/en/docs/manual/middle/layout/#subgraph-layout).
- Example 1 : Basic force-directed layout and dragging interactions.
- Example 2 : Prevent node overlappings.

2
examples/net/furchtermanLayout/index.en.md
View File

@ -7,7 +7,7 @@ Fruchterman Reingold Layout is a kind of force-directed layout in theory. The di
## Usage
As the demo below, you can deploy it in `layout` while instantiating Graph. it can also be used for [Subgraph Layout](/zh/docs/manual/middle/layout/#%E5%AD%90%E5%9B%BE%E5%B8%83%E5%B1%80). By tuning the parameters, you can adjust the iteration number, layout compactness, layout by clusters, and so on.
As the demo below, you can deploy it in `layout` while instantiating Graph. it can also be used for [Subgraph Layout](/en/docs/manual/middle/layout/#subgraph-layout). By tuning the parameters, you can adjust the iteration number, layout compactness, layout by clusters, and so on.
- Example 1 : Basic Fruchterman layout.
- Example 2 : Fruchterman clustering layout.

2
examples/net/gridLayout/index.en.md
View File

@ -7,7 +7,7 @@ Grid Layout will order the nodes according to the parameters, and then place the
## Usage
As the demo below, you can deploy it in `layout` while instantiating Graph. it can also be used for [Subgraph Layout](/zh/docs/manual/middle/layout/#%E5%AD%90%E5%9B%BE%E5%B8%83%E5%B1%80). By tuning the parameters, you can adjust the iteration number, compact degree, layout buy cluster, and so on. By tuning the parameters, you can adjust the ordering method, rows, cols, prevent node overlappings, and so on.
As the demo below, you can deploy it in `layout` while instantiating Graph. it can also be used for [Subgraph Layout](/en/docs/manual/middle/layout/#subgraph-layout). By tuning the parameters, you can adjust the iteration number, compact degree, layout buy cluster, and so on. By tuning the parameters, you can adjust the ordering method, rows, cols, prevent node overlappings, and so on.
- Example 1 : Basic Grid Layout, the nodes are ordered according to the data.
- Example 2 : Order the nodes according to the property `cluster`.