test/g6
1
0
Fork 0
mirror of https://gitee.com/antv/g6.git synced 2024-11-30 02:38:20 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

docs: update the url of docs.

Browse Source
This commit is contained in:
Yanyan-Wang 2020-09-01 18:43:11 +08:00 committed by Yanyan Wang
parent 35bce616f7
commit 17567b37bf
35 changed files with 52 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.md
View File

@ -111,7 +111,7 @@
#### 3.5.6
- feat: dropCap for intended TreeGraph layout.
- feat: dropCap for indented TreeGraph layout.
#### 3.5.5

2
README-zh_CN.md
View File

@ -130,7 +130,7 @@ $ npm run demos
- <a href='https://g6.antv.vision/zh/docs/manual/tutorial/preface' target='_blank'>入门教程</a>
- <a href='https://g6.antv.vision/zh/docs/manual/middle/overview' target='_blank'>核心概念</a>
- <a href='https://g6.antv.vision/zh/docs/manual/middle/elements/shape/shape-and-properties' target='_blank'>高级指引</a>
- <a href='https://g6.antv.vision/zh/docs/manual/advanced/coordinate-system' target='_blank'>扩展阅读</a>
- <a href='https://g6.antv.vision/zh/docs/api/Graph/' target='_blank'>API</a>
## G6 图可视化交流群

2
README.md
View File

@ -130,7 +130,7 @@ $ npm run demos
- <a href='https://g6.antv.vision/en/docs/manual/tutorial/preface' target='_blank'>Tutorial</a>
- <a href='https://g6.antv.vision/en/docs/manual/middle/overview' target='_blank'>Middle Guides</a>
- <a href='https://g6.antv.vision/en/docs/manual/middle/elements/shape/shape-and-properties' target='_blank'>Advanced Guides</a>
- <a href='https://g6.antv.vision/en/docs/manual/advanced/coordinate-system' target='_blank'>Further Reading</a>
- <a href='https://g6.antv.vision/en/docs/api/Graph/' target='_blank'>API Reference</a>
## G6 Communication Group

2
docs/api/Graph.en.md
View File

@ -788,7 +788,7 @@ graph.hideItem('nodeId');
Set the item's state.
v3.4 and futher versions support multiple values for a state, refer to [Take Use of State Mechanism](/en/docs/manual/middle/states/state/#using-state).
v3.4 and futher versions support multiple values for a state, refer to [Take Use of State Mechanism](/en/docs/manual/middle/states/state#using-state).
This function will emit events `beforitemstatechange` and `afteritemstatechange`.

6
docs/api/Graph.zh.md
View File

@ -796,11 +796,7 @@ graph.hideItem('nodeId');
### setItemState(item, state, value)
<<<<<<< HEAD
设置元素状态。支持单个状态多值的情况，详情参考 [G6 状态管理最佳实践](/zh/docs/manual/middle/advanced/state-new)。
=======
设置元素状态。支持单个状态多值的情况，详情参考 [G6 状态管理最佳实践](/zh/docs/manual/advanced/state-new)。
>>>>>>> docs: update url in api and demos.
设置元素状态。支持单个状态多值的情况，详情参考 [G6 状态管理最佳实践](/zh/docs/manual/middle/states/state#设置-state)。
该方法在执行过程中会触发 `beforitemstatechange`，`afteritemstatechange` 事件。

2
docs/api/Plugins.en.md
View File

@ -143,7 +143,7 @@ In complex graph with large number of edges, edge bundling helps you to improve
<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='http://g6.antv.vision/zh/examples/case/edgeBundling' target='_blank'>Demo Link</a>. <a href='https://g6.antv.vision/zh/docs/manual/cases/edgeBundling' target='_blank'>Demo Document</a>.
The edge bundling plugin can be configured to adjust the styles and functions.

2
docs/api/Plugins.zh.md
View File

@ -143,7 +143,7 @@ imageMinimap.updateGraphImg(img); // 使用新的图片（用户自己生成）
<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='http://g6.antv.vision/zh/examples/case/edgeBundling' target='_blank'>Demo 链接</a>。该 <a href='https://g6.antv.vision/zh/docs/manual/cases/edgeBundling' target='_blank'>Demo 教程</a>。
实例化时可以通过配置项调整边绑定的功能。

4
docs/manual/FAQ/supportIE.en.md
View File

@ -3,9 +3,7 @@ title: Using G6 with IE
order: 10
---
## Problem
Recently, we received some feedbacks about usage of G6 in IE. Some users found there are some display problems when using G6 in IE. In this section, we will introduce the usage of G6 in IE.
In this section, we will introduce the usage of G6 in IE.
## Solution

4
docs/manual/FAQ/supportIE.zh.md
View File

@ -3,9 +3,7 @@ title: 如何让 IE 支持 G6
order: 10
---
## 问题
最近 [G6 图可视化交流群](/zh/docs/manual/introduction/#g6-图可视化交流群) 里有同学反馈 G6 不支持 IE。本文将介绍如何在 IE 中使用 G6。
本文将介绍如何在 IE 中使用 G6。
## 解决方案

2
docs/manual/getting-started.en.md
View File

@ -197,4 +197,4 @@ In this chapter, we only briefly introduce the installation and usage. In G6 Tut
- Configure the animation;
- The usage of components.
For more advanced functions, please refer to [Key Concepts](/en/docs/manual/middle/graph) and [Advanced Guides](/en/docs/manual/middle/elements/shape/shape-and-properties).
For more advanced functions, please refer to [Key Concepts](/en/docs/manual/middle/graph) and [Further Reading](/en/docs/manual/advanced/coordinate-system).

2
docs/manual/getting-started.zh.md
View File

@ -197,4 +197,4 @@ graph.render(); // 渲染图
- 增加动画；
- 使用辅助组件。
想了解更高阶的功能，请参见 [G6 核心概念](/zh/docs/manual/middle/graph)，[G6 高级指引](/zh/docs/manual/middle/elements/shape/shape-and-properties)。
想了解更高阶的功能，请参见 [G6 核心概念](/zh/docs/manual/middle/graph)，[G6 扩展阅读](/zh/docs/manual/advanced/coordinate-system)。

2
docs/manual/introduction.en.md
View File

@ -101,7 +101,7 @@ For more information about the usage, please refer to [Getting Started](/en/docs
- [Tutorial](/en/docs/manual/tutorial/preface)
- [Key Concepts](/en/docs/manual/middle/graph)
- [Advanced Guides](/en/docs/manual/middle/elements/shape/shape-and-properties)
- [Further Reading](/en/docs/manual/advanced/coordinate-system)
- [API Reference](/en/docs/api/Graph)
## Links

2
docs/manual/introduction.zh.md
View File

@ -52,7 +52,7 @@ G6 作为一款专业的图可视化引擎，具有以下特性：
- [G6 入门教程](/zh/docs/manual/tutorial/preface)
- [G6 核心概念](/zh/docs/manual/middle/graph)
- [G6 高级指引](/zh/docs/manual/middle/elements/shape/shape-and-properties)
- [G6 扩展阅读](/zh/docs/manual/advanced/coordinate-system)
- [API](/zh/docs/api/Graph)
- [G6 Blog](https://www.yuque.com/antv/g6-blog)

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

@ -76,7 +76,7 @@ Minimap 是用于快速预览和探索图的工具。
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*z9iXQq_kcrYAAAAAAAAAAABkARQnAQ' width=600 alt='img'/>
> 美国航线图边绑定。<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>。
> 美国航线图边绑定。<a href='/zh/examples/case/edgeBundling' target='_blank'>Demo 链接</a>。该 <a href='/zh/docs/manual/cases/edgeBundling' target='_blank'>Demo 教程</a>。
实例化时可以通过配置项调整边绑定的功能。

10
docs/manual/middle/animation.zh.md
View File

@ -185,7 +185,7 @@ G6.registerNode('background-animate', {
#### 部分图形旋转动画
这一例也是在 `afterDraw` 方法中为已有节点添加额外的 shape （本例中为 image），并为这些新增的图形设置旋转动画。旋转动画较为复杂，需要通过矩阵的操作实现。`animate` 函数的第一个参数是返回每一帧需要变化的参数集的函数，其参数 `ratio` 是当前正在进行的一次动画的进度，范围 [0, 1]；第二个参数是动画的参数，动画参数的具体配置参见 [animateCfg](#animateCfg)<br />
这一例也是在 `afterDraw` 方法中为已有节点添加额外的 shape （本例中为 image），并为这些新增的图形设置旋转动画。旋转动画较为复杂，需要通过矩阵的操作实现。`animate` 函数的第一个参数是返回每一帧需要变化的参数集的函数，其参数 `ratio` 是当前正在进行的一次动画的进度，范围 [0, 1]；第二个参数是动画的参数，动画参数的具体配置参见 [animateCfg](#animateCfg)。<br />
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*uFQsQqxIa_QAAAAAAAAAAABkARQnAQ' alt='download' width='150'/>
@ -251,7 +251,7 @@ G6.registerNode(
#### 圆点运动
本例通过在 `afterDraw` 方法中为边增加了一个 circle 图形，该图形沿着线运动。沿着线运动的原理：设定每一帧中，该 circle 在线上的相对位置。`animate` 函数的第一个参数是返回每一帧需要变化的参数集的函数，其参数 `ratio` 是当前正在进行的一次动画的进度，范围 [0, 1]；第二个参数是动画的参数，动画参数的具体配置参见 [animateCfg](#animateCfg)<br />
本例通过在 `afterDraw` 方法中为边增加了一个 circle 图形，该图形沿着线运动。沿着线运动的原理：设定每一帧中，该 circle 在线上的相对位置。`animate` 函数的第一个参数是返回每一帧需要变化的参数集的函数，其参数 `ratio` 是当前正在进行的一次动画的进度，范围 [0, 1]；第二个参数是动画的参数，动画参数的具体配置参见 [animateCfg](#animateCfg)。<br />
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*OAGPRZbYpw4AAAAAAAAAAABkARQnAQ' alt='download' width='150'/>
@ -302,7 +302,7 @@ G6.registerEdge(
#### 虚线运动的效果
虚线运动的效果是通过计算线的 `lineDash` ，并在每一帧中不断修改实现。`animate` 函数的第一个参数是返回每一帧需要变化的参数集的函数，其参数 `ratio` 是当前正在进行的一次动画的进度，范围 [0, 1]；第二个参数是动画的参数，动画参数的具体配置参见 [animateCfg](#animateCfg)<br />
虚线运动的效果是通过计算线的 `lineDash` ，并在每一帧中不断修改实现。`animate` 函数的第一个参数是返回每一帧需要变化的参数集的函数，其参数 `ratio` 是当前正在进行的一次动画的进度，范围 [0, 1]；第二个参数是动画的参数，动画参数的具体配置参见 [animateCfg](#animateCfg)。<br />
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*VUgETK6aMzcAAAAAAAAAAABkARQnAQ' alt='download' width='150'/>
@ -343,7 +343,7 @@ G6.registerEdge(
#### 线从无到有
线从无到有的动画效果，同样可以通过计算 `lineDash` 来实现。`animate` 函数的第一个参数是返回每一帧需要变化的参数集的函数，其参数 `ratio` 是当前正在进行的一次动画的进度，范围 [0, 1]；第二个参数是动画的参数，动画参数的具体配置参见 [animateCfg](#animateCfg)<br />
线从无到有的动画效果，同样可以通过计算 `lineDash` 来实现。`animate` 函数的第一个参数是返回每一帧需要变化的参数集的函数，其参数 `ratio` 是当前正在进行的一次动画的进度，范围 [0, 1]；第二个参数是动画的参数，动画参数的具体配置参见 [animateCfg](#animateCfg)。<br />
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*-l9lQ7Ck1QcAAAAAAAAAAABkARQnAQ' alt='download' width='150'/>
@ -383,7 +383,7 @@ G6.registerEdge(
- 自定义边中复写 `setState` 方法监听该边的状态，以及某状态下的动画效果；
- 监听中间的节点的 `mouseenter` 和 `mouseleave` 事件，触发相关边的状态变化。
下面代码节选自 demo <a href='/zh/examples/scatter/stateChange' target='_blank'>状态切换动画</a>，请注意省略了部分代码，只展示了交互相关以及边动画相关的代码。`animate` 函数的第一个参数是返回每一帧需要变化的参数集的函数，其参数 `ratio` 是当前正在进行的一次动画的进度，范围 [0, 1]；第二个参数是动画的参数，动画参数的具体配置参见 [animateCfg](#animateCfg)
下面代码节选自 demo <a href='/zh/examples/scatter/stateChange' target='_blank'>状态切换动画</a>，请注意省略了部分代码，只展示了交互相关以及边动画相关的代码。`animate` 函数的第一个参数是返回每一帧需要变化的参数集的函数，其参数 `ratio` 是当前正在进行的一次动画的进度，范围 [0, 1]；第二个参数是动画的参数，动画参数的具体配置参见 [animateCfg](#animateCfg)。
```javascript
// const data = ...

2
docs/manual/middle/elements/combos/defaultCombo.en.md
View File

@ -82,7 +82,7 @@ The table below shows the built-in Combos and their special properties:
| Name | Description | Default |
| --- | --- | --- |
| circle | Circle Combo: <br />- `size` is a number representing the diameter<br />- The circle is centered at the combo position<br />- `color` takes effect on the stroke<br />- The label is placed on the top of the circle by default<br />- More properties are described in [circle](/en/docs/manual/middle/elements/combos/built-in/circle)<br />- <a href='/en/examples/item/defaultCombos#circle' target='_blank'>Demo</a> | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*ijeuQoiH0JUAAAAAAAAAAABkARQnAQ' width=150 alt='img'/> |
| rect | Rect Combo: <br />- `size` is an array, e.g. [100, 50]<br />- The rect in centered at the combo position<br />- `color` takes effect on the stroke<br />- The label is placed on the left top of the circle by default<br />- More properties are described in [rect](/zh/docs/manual/middle/elements/combos/built-in/rect)<br />- <a href='/en/examples/item/defaultCombos#rect' target='_blank'>Demo</a> | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Khp4QpxXVlQAAAAAAAAAAABkARQnAQ' width=150 alt='img'/> |
| rect | Rect Combo: <br />- `size` is an array, e.g. [100, 50]<br />- The rect in centered at the combo position<br />- `color` takes effect on the stroke<br />- The label is placed on the left top of the circle by default<br />- More properties are described in [rect](/en/docs/manual/middle/elements/combos/built-in/rect)<br />- <a href='/en/examples/item/defaultCombos#rect' target='_blank'>Demo</a> | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Khp4QpxXVlQAAAAAAAAAAABkARQnAQ' width=150 alt='img'/> |
## Common Property

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

@ -146,7 +146,7 @@ const graph = new G6.Graph({
### 标签文本配置  labelCfg
Object 类型。支持 [边通用标签配置](/zh/docs/manual/middle/elements/edges/defaultEdge/#标签文本-label-及其配置-labelcfg)。基于上面  [弧度 curveOffset](/zh/docs/manual/middle/elements/edges/arc/#特殊属性：弧度-curveoffset) 中的代码，下面代码在 `defaultEdge` 中增加了  `labelCfg`  配置项进行文本的配置，使之达到如下图效果。<br /> <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*xu0FSKNxQNUAAAAAAAAAAABkARQnAQ' width=150 alt='img'/>
Object 类型。支持 [边通用标签配置](/zh/docs/manual/middle/elements/edges/defaultEdge/#标签文本-label-及其配置-labelcfg)。基于上面  [弧度 curveOffset](/zh/docs/manual/middle/elements/edges/built-in/arc/#特殊属性：弧度-curveoffset) 中的代码，下面代码在 `defaultEdge` 中增加了  `labelCfg`  配置项进行文本的配置，使之达到如下图效果。<br /> <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*xu0FSKNxQNUAAAAAAAAAAABkARQnAQ' width=150 alt='img'/>
```javascript
const data = {

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

@ -7,7 +7,7 @@ G6 内置了  quadratic  边，其默认样式如下。<br /> <img src='https:
## 使用方法
如 [内置边](/zh/docs/manual/middle/elements/edges/defaultEdgee)  一节所示，配置边的方式有两种：实例化图时全局配置，在数据中动态配置。
如 [内置边](/zh/docs/manual/middle/elements/edges/defaultEdge)  一节所示，配置边的方式有两种：实例化图时全局配置，在数据中动态配置。
### 1 实例化图时全局配置

2
docs/manual/middle/elements/nodes/built-in/circle.zh.md
View File

@ -119,7 +119,7 @@ const graph = new G6.Graph({
Object 类型。可以指定节点周围「上、下、左、右」四个方向上的四个小圆点。
<span style="background-color: rgb(251, 233, 231); color: rgb(139, 53, 56)"><strong>⚠️ 注意:</strong></span> 区分于 `anchorPoints`： `anchorPoints` 是真正用于指定该节点相关边的连入位置的「**数组**」，见 [anchorPoints](/zh/docs/manual/middle/keyconcept/elements/anchorpoint)；而 `linkPoints` 仅是指定是否「**绘制**」出四个圆点，不起实际的连接相关边的作用。二者常常配合使用。
<span style="background-color: rgb(251, 233, 231); color: rgb(139, 53, 56)"><strong>⚠️ 注意:</strong></span> 区分于 `anchorPoints`： `anchorPoints` 是真正用于指定该节点相关边的连入位置的「**数组**」，见 [anchorPoints](/zh/docs/manual/middle/elements/nodes/anchorpoint)；而 `linkPoints` 仅是指定是否「**绘制**」出四个圆点，不起实际的连接相关边的作用。二者常常配合使用。
| 名称 | 含义 | 类型 | 备注 |
| --------- | ------------------ | ------- | ------------------ |

2
docs/manual/middle/elements/nodes/built-in/diamond.zh.md
View File

@ -121,7 +121,7 @@ const graph = new G6.Graph({
Object 类型。通过配置 `linkPoints` ，可以指定菱形周围「上、下、左、右」四个小圆点。
<span style="background-color: rgb(251, 233, 231); color: rgb(139, 53, 56)"><strong>⚠️ 注意:</strong></span> 区分于 `anchorPoints`： `anchorPoints` 是真正用于指定该节点相关边的连入位置的「**数组**」，见 [anchorPoints](/zh/docs/manual/middle/keyconcept/elements/anchorpoint)；而 `linkPoints` 仅是指定是否「**绘制**」出四个圆点，不起实际的连接相关边的作用。二者常常配合使用。
<span style="background-color: rgb(251, 233, 231); color: rgb(139, 53, 56)"><strong>⚠️ 注意:</strong></span> 区分于 `anchorPoints`： `anchorPoints` 是真正用于指定该节点相关边的连入位置的「**数组**」，见 [anchorPoints](/zh/docs/manual/middle/elements/nodes/anchorpoint)；而 `linkPoints` 仅是指定是否「**绘制**」出四个圆点，不起实际的连接相关边的作用。二者常常配合使用。
| 名称 | 含义 | 类型 | 备注 |
| --------- | ------------------ | ------- | ------------------ |

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

@ -9,7 +9,7 @@ There are three types of items in a graph in G6: Nodes, Edges and Combos. Each
The properties of an item can be be divided into two categories:
- Style Property: Corresponds to the style of the keyshape, e.g. `fill`, `stroke`.When the [State](/en/docs/manual/middle/states/state) of an item is changed, the style can be updated.
- Other Property: Such as `type`, `id`, they are a kind of properties that will not be changed when the State of the item is changed. They need to be updated manually with [graph.updateItem](en/docs/api/Graph/#updateitemitem-model).
- Other Property: Such as `type`, `id`, they are a kind of properties that will not be changed when the State of the item is changed. They need to be updated manually with [graph.updateItem](/en/docs/api/Graph/#updateitemitem-model).
A complete list of item properties can be found in [Item Properties](/en/docs/api/nodeEdge/itemProperties).
In addition to these common properties shared by all items, each kind of item (node/edge/combo) has its unique properties.

4
docs/manual/middle/elements/overview.zh.md
View File

@ -6,8 +6,8 @@ order: 0
图的元素（Item）包含图上的节点 Node 、边 Edge 和 Combo 三大类。每个图元素由一个或多个 [图形（Shape）](/zh/docs/manual/middle/elements/shape/shape-keyshape) 组成，且都会有自己的唯一关键图形（keyShape）。G6 内置了一系列具有不同基本图形样式的节点/边/ Combo，例如，节点可以是圆形、矩形、图片等。G6 中所有内置的元素样式详见 [内置节点](/zh/docs/manual/middle/elements/nodes/defaultNode)，[内置边](/zh/docs/manual/middle/elements/edges/defaultEdge)，[内置 Combo](/zh/docs/manual/middle/elements/combos/defaultCombo)。除了使用内置的节点/边/ Combo 外，G6 还允许用户通过自己搭配和组合 shape 进行节点/边/ Combo 的自定义，详见 [自定义节点](/zh/docs/manual/middle/elements/nodes/custom-node)，[自定义边](/zh/docs/manual/middle/elements/edges/custom-edge)，[自定义 Combo](/zh/docs/manual/middle/elements/combos/custom-combo)。
图元素具有公共的通用属性和通用方法。图元素的属性包括：
- 样式属性，通过 `style` 字段对象进行配置，和元素的关键图形相关，例如 `fill`，`stroke`。可在[元素状态](zh/docs/manual/middle/states/state)改变时被改变。
- 其他属性，例如 `id`、`type`，不能在元素状态改变是进行改变，可通过[graph.updateItem](zh/docs/api/Graph/#updateitemitem-model)进行手动更新。
- 样式属性，通过 `style` 字段对象进行配置，和元素的关键图形相关，例如 `fill`，`stroke`。可在[元素状态](/zh/docs/manual/middle/states/state)改变时被改变。
- 其他属性，例如 `id`、`type`，不能在元素状态改变是进行改变，可通过 [graph.updateItem](/zh/docs/api/Graph/#updateitemitem-model) 进行手动更新。
完整的元素属性列表参考：[元素配置项](/zh/docs/api/nodeEdge/itemProperties)。除了各类元素共有的通用属性外，每种节点/边/ Combo 都有各自的特有属性。
图元素实例上具有对元素进行更新、销毁、获取属性、修改状态等[通用方法](/zh/docs/api/nodeEdge/Item)，同时，对于实例的变更也可以通过调用 [graph](/zh/docs/api/Graph) 上的方法进行。

2
docs/manual/middle/elements/shape/graphics-group.zh.md
View File

@ -31,7 +31,7 @@ order: 2
## 如何使用图形分组 Group
图形分组一般会在[自定义节点](/zh/docs/manual/middle/elements/nodes/custom-node)、[自定义边](/zh/docs/manual/middle/elements/edges/custom-edge)时用到。Group 的完整实例方法请参考[Graphics Group API](/zh/docs/api/Group)。
图形分组一般会在[自定义节点](/zh/docs/manual/middle/elements/nodes/custom-node)、[自定义边](/zh/docs/manual/middle/elements/edges/custom-edge)时用到。Group 的完整实例方法请参考 [Graphics Group API](/zh/docs/api/Group)。
### 获取元素的 group

2
docs/manual/middle/elements/shape/shape-and-properties.zh.md
View File

@ -3,7 +3,7 @@ title: 图形 Shape 及其属性
order: 1
---
G6 中的元素（节点/边）是**由一个或多个**[**图形 Shape**](/zh/docs/manual/middle/elements/shape/shape-keyshape)**组成**，主要通过自定义节点或自定义边时在 `draw` 方法中使用 `group.addShape` 添加，G6 中支持以下的图形 Shape：
G6 中的元素（节点/边）是**由一个或多个**[**图形 Shape**](/zh/docs/manual/middle/elements/shape/shape-keyshape) **组成**，主要通过自定义节点或自定义边时在 `draw` 方法中使用 `group.addShape` 添加，G6 中支持以下的图形 Shape：
- [circle](#圆图形-circle)：圆；
- [rect](#矩形图形-rect)：矩形；

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

@ -5,7 +5,7 @@ order: 0
## Introduction
Graph layouts are the algorithms arranging the node positions to obtain a understandable visualizaiton. According to the differences of data strucutre, the layouts can be categorized into: general graph layout and tree graph layout. There are several layout algorithms for them respectively. By utilizing the built-in layouts, [Translating the layouts and their configurations, translating the data](#layout-transformation-mechanism) can be achieved. Besides, G6 provides the [Web-Worker](#web-worker) for general graph layout in case layout calculation takes too long to block page interaction.
Graph layouts are the algorithms arranging the node positions to obtain a understandable visualizaiton. According to the differences of data strucutre, the layouts can be categorized into: general graph layout and tree graph layout. There are several layout algorithms for them respectively. By utilizing the built-in layouts, [Translating the layouts and their configurations, translating the data](/en/docs/manual/middle/layout/layout-mechanism) can be achieved. Besides, G6 provides the [Web-Worker](/en/docs/manual/middle/layout/webworker) for general graph layout in case layout calculation takes too long to block page interaction.
Besides, G6 supports [Custom Layout](/en/docs/manual/middle/layout/custom-layout) mechanism for users to design their own layout algorithm.

2
docs/manual/middle/layout/graph-layout.zh.md
View File

@ -5,7 +5,7 @@ order: 0
## 简介
图布局是指图中节点的排布方式，根据图的数据结构不同，布局可以分为两类：一般图布局、树图布局。G6 为这两类图都内置了一些常用的图布局算法。使用内置的图布局可以完成[布局的参数、方法、数据的切换](#布局的切换机制)等。G6 还提供了一般图布局的 [Web-Worker 机制](#使用-web-worker)，在大规模图布局中使用该机制可以使布局计算不阻塞页面。
图布局是指图中节点的排布方式，根据图的数据结构不同，布局可以分为两类：一般图布局、树图布局。G6 为这两类图都内置了一些常用的图布局算法。使用内置的图布局可以完成[布局的参数、方法、数据的切换](/zh/docs/manual/middle/layout/layout-mechanism)等。G6 还提供了一般图布局的 [Web-Worker 机制](/zh/docs/manual/middle/layout/webworker)，在大规模图布局中使用该机制可以使布局计算不阻塞页面。
除了内置布局方法外，一般图布局还支持 [自定义布局](/zh/docs/manual/middle/layout/custom-layout) 机制。

12
docs/manual/middle/layout/tree-graph-layout.en.md
View File

@ -5,7 +5,7 @@ order: 1
## Introduction
Graph layouts are the algorithms arranging the node positions to obtain a understandable visualizaiton. According to the differences of data strucutre, the layouts can be categorized into: general graph layout and tree graph layout. There are several layout algorithms for them respectively. By utilizing the built-in layouts, [Translating the layouts and their configurations, translating the data](#layout-transformation-mechanism) can be achieved. Besides, G6 provides the [Web-Worker](#web-worker) for general graph layout in case layout calculation takes too long to block page interaction.
Graph layouts are the algorithms arranging the node positions to obtain a understandable visualizaiton. According to the differences of data strucutre, the layouts can be categorized into: general graph layout and tree graph layout. There are several layout algorithms for them respectively. By utilizing the built-in layouts, [Translating the layouts and their configurations, translating the data](/en/docs/manual/middle/layout/layout-mechanism) can be achieved. Besides, G6 provides the [Web-Worker](/en/docs/manual/middle/layout/webworker) for general graph layout in case layout calculation takes too long to block page interaction.
Besides, G6 supports [Custom Layout](/en/docs/manual/middle/layout/custom-layout) mechanism for users to design their own layout algorithm.
@ -17,7 +17,7 @@ In order to handle the tree data structure, G6 extends Graph to TreeGraph. Refer
- [CompactBox Layout](#compactbox);
- [Dendrogram Layout](#dendrogram): Arrange the leaves on the same level;
- [Intended Layout](#intended);
- [Indented Layout](#indented);
- [Mindmap Layout](#mindmap).
## Configure the TreeGraph
@ -50,7 +50,7 @@ const graph = new G6.TreeGraph({
### compactBox
**Description**: CompactBox is the default layout for TreeGraph. It will consider the bounding box of each node when layout.<br /><img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*FltbQZAa-nMAAAAAAAAAAABkARQnAQ' width=400 alt='img'/><br />**API**: [CompactBox API](/en/docs/api/layout/TreeGraph/#compactbox)<br />**Configuration**:
**Description**: CompactBox is the default layout for TreeGraph. It will consider the bounding box of each node when layout.<br /><img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*FltbQZAa-nMAAAAAAAAAAABkARQnAQ' width=400 alt='img'/><br />**API**: [CompactBox API](/en/docs/api/layout/TreeGraph#compactbox)<br />**Configuration**:
| Name | Type | Example/Options | Default | Description |
| --- | --- | --- | --- | --- |
@ -64,7 +64,7 @@ const graph = new G6.TreeGraph({
### dendrogram
**Description**: Arranges all the leaves on the same level. It is appropriate for hierarchical clustering. It does not consider the node size, which will be regarded as 1 px.<br /><img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*XehWSKAWdrwAAAAAAAAAAABkARQnAQ' width=300 alt='img'/><br />**API**: [Dendrogram API](/en/docs/api/layout/TreeGraph/#dendrogram)<br />**Configuration**:
**Description**: Arranges all the leaves on the same level. It is appropriate for hierarchical clustering. It does not consider the node size, which will be regarded as 1 px.<br /><img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*XehWSKAWdrwAAAAAAAAAAABkARQnAQ' width=300 alt='img'/><br />**API**: [Dendrogram API](/en/docs/api/layout/TreeGraph#dendrogram)<br />**Configuration**:
| Name | Type | Example/Options | Default | Description |
| --- | --- | --- | --- | --- |
@ -77,7 +77,7 @@ const graph = new G6.TreeGraph({
**Description**: Indented layout represents the hierarchy by indent between them. Each node will take a row/column. It is appropriate for file directory.<br /><img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*zuBlR4oBIE0AAAAAAAAAAABkARQnAQ' width=150 alt='img'/>
**API**: [Indented API](/en/docs/api/layout/TreeGraph/#indented)<br />**Configuration**:
**API**: [Indented API](/en/docs/api/layout/TreeGraph#indented)<br />**Configuration**:
| Name | Type | Example/Options | Default | Description |
| --- | --- | --- | --- | --- |
@ -89,7 +89,7 @@ const graph = new G6.TreeGraph({
### mindmap
**Description**: Mindmap arranged the nodes with same depth on the same level. Different from compactBox, it does not consider the size of nodes while doing layout.<br /><img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*sRi6Q6Qrm-oAAAAAAAAAAABkARQnAQ' width=400 alt='img'/><br />**API**: [Mindmap API](/en/docs/api/layout/TreeGraph/#mindmap)<br />**Configuration**:
**Description**: Mindmap arranged the nodes with same depth on the same level. Different from compactBox, it does not consider the size of nodes while doing layout.<br /><img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*sRi6Q6Qrm-oAAAAAAAAAAABkARQnAQ' width=400 alt='img'/><br />**API**: [Mindmap API](/en/docs/api/layout/TreeGraph#mindmap)<br />**Configuration**:
| Name | Type | Example/Options | Default | Description |
| --- | --- | --- | --- | --- |

12
docs/manual/middle/layout/tree-graph-layout.zh.md
View File

@ -5,7 +5,7 @@ order: 1
## 简介
图布局是指图中节点的排布方式，根据图的数据结构不同，布局可以分为两类：一般图布局、树图布局。G6 为这两类图都内置了一些常用的图布局算法。使用内置的图布局可以完成[布局的参数、方法、数据的切换](#布局的切换机制)等。G6 还提供了一般图布局的 [Web-Worker 机制](#使用-web-worker)，在大规模图布局中使用该机制可以使布局计算不阻塞页面。
图布局是指图中节点的排布方式，根据图的数据结构不同，布局可以分为两类：一般图布局、树图布局。G6 为这两类图都内置了一些常用的图布局算法。使用内置的图布局可以完成[布局的参数、方法、数据的切换](/zh/docs/manual/middle/layout/layout-mechanism)等。G6 还提供了一般图布局的 [Web-Worker 机制](/zh/docs/manual/middle/layout/webworker)，在大规模图布局中使用该机制可以使布局计算不阻塞页面。
除了内置布局方法外，一般图布局还支持 [自定义布局](/zh/docs/manual/middle/layout/custom-layout) 机制。
@ -17,7 +17,7 @@ order: 1
- [CompactBox Layout](#compactbox)：紧凑树布局；
- [Dendrogram Layout](#dendrogram)：树状布局（叶子节点布局对齐到同一层）；
- [Intended Layout](#intended)：缩进布局；
- [Indented Layout](#indented)：缩进布局；
- [Mindmap Layout](#mindmap)：脑图布局。
## 配置树图布局
@ -50,7 +50,7 @@ const graph = new G6.TreeGraph({
### compactBox
**描述**：紧凑树布局。从根节点开始，同一深度的节点在同一层，并且布局时会将节点大小考虑进去。<br /><img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*FltbQZAa-nMAAAAAAAAAAABkARQnAQ' width=400 alt='img'/><br />**API**：[CompactBox API](/zh/docs/api/layout/TreeGraph/#compactbox-紧凑树布局)<br />**参数**：
**描述**：紧凑树布局。从根节点开始，同一深度的节点在同一层，并且布局时会将节点大小考虑进去。<br /><img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*FltbQZAa-nMAAAAAAAAAAABkARQnAQ' width=400 alt='img'/><br />**API**：[CompactBox API](/zh/docs/api/layout/TreeGraph#compactbox-紧凑树布局)<br />**参数**：
| 参数名 | 类型 | 示例/可选值 | 默认值 | 说明 |
| --- | --- | --- | --- | --- |
@ -64,7 +64,7 @@ const graph = new G6.TreeGraph({
### dendrogram
**描述**：生态树布局。不管数据的深度多少，总是叶节点对齐。不考虑节点大小，布局时将节点视为 1 个像素点。<br /><img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*XehWSKAWdrwAAAAAAAAAAABkARQnAQ' width=300 alt='img'/><br />**API**：[Dendrogram API](/zh/docs/api/layout/TreeGraph/#dendrogram-生态树布局)<br />**参数**：
**描述**：生态树布局。不管数据的深度多少，总是叶节点对齐。不考虑节点大小，布局时将节点视为 1 个像素点。<br /><img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*XehWSKAWdrwAAAAAAAAAAABkARQnAQ' width=300 alt='img'/><br />**API**：[Dendrogram API](/zh/docs/api/layout/TreeGraph#dendrogram-生态树布局)<br />**参数**：
| 参数名 | 类型 | 示例/可选值 | 默认值 | 说明 |
| --- | --- | --- | --- | --- |
@ -77,7 +77,7 @@ const graph = new G6.TreeGraph({
**描述**：缩进树布局。每个元素会占一行/一列。<br /><img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*zuBlR4oBIE0AAAAAAAAAAABkARQnAQ' width=150 alt='img'/>
**API**：[Indented API](/zh/docs/api/layout/TreeGraph/#indented-缩进树布局)<br />**参数**：
**API**：[Indented API](/zh/docs/api/layout/TreeGraph#indented-缩进树布局)<br />**参数**：
| 参数名 | 类型 | 示例/可选值 | 默认值 | 说明 |
| --- | --- | --- | --- | --- |
@ -89,7 +89,7 @@ const graph = new G6.TreeGraph({
### mindmap
**描述**：脑图布局。深度相同的节点将会被放置在同一层，与 compactBox 不同的是，布局不会考虑节点的大小。<br /><img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*sRi6Q6Qrm-oAAAAAAAAAAABkARQnAQ' width=400 alt='img'/><br />**API**：[Mindmap API](/zh/docs/api/layout/TreeGraph/#mindmap-脑图树布局)<br />**参数**：
**描述**：脑图布局。深度相同的节点将会被放置在同一层，与 compactBox 不同的是，布局不会考虑节点的大小。<br /><img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*sRi6Q6Qrm-oAAAAAAAAAAABkARQnAQ' width=400 alt='img'/><br />**API**：[Mindmap API](/zh/docs/api/layout/TreeGraph#mindmap-脑图树布局)<br />**参数**：
| 参数名 | 类型 | 示例/可选值 | 默认值 | 说明 |
| --- | --- | --- | --- | --- |

2
docs/manual/tutorial/epilog.en.md
View File

@ -14,6 +14,6 @@ Congratulations! You have created a graph visualization powered by G6. You have
[Complete Code of Tutorial Demo](https://codepen.io/Yanyan-Wang/pen/mdbYZvZ).
If you wish to go further in G6, please check out [Key Concept in G6](/en/docs/manual/middle/graph); For higher level functions and theory of G6, check out [Advanced Guides](/en/docs/manual/middle/elements/shape/shape-and-properties).
If you wish to go further in G6, please check out [Key Concept in G6](/en/docs/manual/middle/graph); For further information, check out [Further Reading](/en/docs/manual/advanced/coordinate-system).
You can also refer to [G6 API](/en/docs/api/Graph) during the process of development.

2
docs/manual/tutorial/epilog.zh.md
View File

@ -14,6 +14,6 @@ order: 7
完整代码见：[Tutorial 案例代码](https://codepen.io/Yanyan-Wang/pen/mdbYZvZ)。
如果你希望继续学习深入的 G6 知识，请查看 [G6 核心概念](/zh/docs/manual/middle/graph)；关于 G6 的更高阶的功能原理介绍和深入探讨，请查看 [G6 高级指引](/zh/docs/manual/middle/elements/shape/shape-and-properties)。
如果你希望继续学习深入的 G6 知识，请查看 [G6 核心概念](/zh/docs/manual/middle/graph)；关于 G6 的扩展内容，请查看 [G6 扩展阅读](/zh/docs/manual/advanced/coordinate-system)。
开发过程中可通过 [G6 API](/zh/docs/api/Graph) 快速查询。

2
docs/manual/tutorial/layout.en.md
View File

@ -25,7 +25,7 @@ When there is no node position information in the data, or the location informat
- Dendrogram Layout;
- CompactBox Layout;
- Mindmap Layout;
- Intended Layout.
- Indented Layout.
For more information about each layout algorithm, please refer to [Layout API](/en/docs/api/layout/Layout). We will utilize Force Layout in the tutorial.

2
docs/manual/tutorial/layout.zh.md
View File

@ -23,7 +23,7 @@ order: 3
- Dendrogram Layout：树状布局（叶子节点布局对齐到同一层）；
- CompactBox Layout：紧凑树布局；
- Mindmap Layout：脑图布局；
- Intended Layout：缩进布局。
- Indented Layout：缩进布局。
各种布局方法的具体介绍及其配置参见 [Layout API](/zh/docs/api/layout/Layout)。本教程中，我们使用的是力导向布局 (Force Layout)。

6
examples/tree/indented/demo/meta.json
View File

@ -8,7 +8,7 @@
"filename": "filesystem.js",
"title": {
"zh": "缩进树-文件系统",
"en": "FileSystem-Intended Layout"
"en": "FileSystem-Indented Layout"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*PJnfTKFRaCAAAAAAAAAAAABkARQnAQ"
},
@ -24,9 +24,9 @@
"filename": "hIntended.js",
"title": {
"zh": "缩进树-子节点两侧分布",
"en": "Two Side Intended Layout"
"en": "Two Side Indented Layout"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*42EXSYyBcTYAAAAAAAAAAABkARQnAQ"
}
]
}
}

2
examples/tree/indented/index.en.md
View File

@ -3,7 +3,7 @@ title: Indented
order: 3
---
In indented tree layout, each node takes a row or a column. <br /> <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*NBUzRonaOYMAAAAAAAAAAABkARQnAQ' alt='intended' width='100'/>
In indented tree layout, each node takes a row or a column. <br /> <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*NBUzRonaOYMAAAAAAAAAAABkARQnAQ' alt='indented' width='100'/>
## Usage

2
examples/tree/indented/index.zh.md
View File

@ -3,7 +3,7 @@ title: 缩进树
order: 3
---
缩进树布局。每个元素会占一行/一列。 <br /> <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*NBUzRonaOYMAAAAAAAAAAABkARQnAQ' alt='intended' width='100'/>
缩进树布局。每个元素会占一行/一列。 <br /> <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*NBUzRonaOYMAAAAAAAAAAABkARQnAQ' alt='indented' width='100'/>
## 使用指南