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

Browse Source
This commit is contained in:
Yanyan-Wang 2023-09-01 10:05:25 +08:00
parent 181d7c0987
commit 90ccdc4ad1
14 changed files with 201 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/site/docs/manual/new-features.en.md
View File

@ -15,6 +15,14 @@ Compared to G6 v4, G6 v5 introduces new capabilities in the following areas:
- 🌠 **Multiple Renderers** that can be switched at runtime.
- 📦 Reduced package size with support for **TreeShaking**.
And more small and wonderful changes:
- Hull supports text configuration.
- Polyline supports automatic obstacle avoidance.
- Text automatically adapts to width.
- Improved interactive performance by using a temporary layer canvas.
- Legend automatically retrieves styles from the canvas.
The official version is coming soon. If these features are what you have been waiting for, you can now try the G6 5.0 Beta version! If you encounter any upgrade issues, please leave us a message on GitHub.
To support these new capabilities, there are significant Breaking Changes in G6 5.0 compared to v4, which may require some effort to upgrade. We hope that the benefits brought by the new capabilities outweigh the upgrade costs.

36
packages/site/docs/manual/new-features.zh.md
View File

@ -15,6 +15,14 @@ order: 2
- 🌠 **多渲染器**，可运行时切换；
- 📦 **包体积减少**，支持 TreeShaking。
还有其他一些微小而美好的改变：
- 轮廓包裹 Hull 支持文本配置；
- 折线支持自动避障；
- 文本自动适配宽度；
- 采用临时层画布提升交互性能；
- 图例自动从画布中获取样式。
正式版即将来袭。如果上面 Feature 是您所期待的，现在就可以使用 G6 5.0 Beta 版本进行尝鲜！若遇到任何升级问题，请在 GitHub 给我们留言。
为了支持上述全新能力，G6 v5 相比于 v4 有比较大的 Breaking Change，这可能带来一定的升级成本。希望上面全新能力带来的收益远大于升级成本。
@ -590,3 +598,31 @@ const stdLib = {
},
};
```
## 9️⃣. 其他微小而美好的改变
- 轮廓包裹 Hull 支持文本配置：
[Hull 支持文本 DEMO](https://g6-next.antv.antgroup.com/examples/interaction/hull/#hull)
<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*eXzfTbFrYjMAAAAAAAAAAAAADmJ7AQ/original" />
- 折线支持自动避障：
[Polyline 避障 DEMO](https://g6-next.antv.antgroup.com/examples/item/defaultEdges/#polyline3)
<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Giy7R4jheawAAAAAAAAAAAAADmJ7AQ/original" />
- 文本自动适配宽度：
[文本自适应 DEMO](https://g6-next.antv.antgroup.com/examples/item/label/#copyLabel)
<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*LGuRR7itiQ8AAAAAAAAAAAAADmJ7AQ/original" />
- 采用临时层画布提升交互性能：
<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*VkT7T4Qzt2gAAAAAAAAAAAAADmJ7AQ/original" />
- 图例自动从画布中获取样式：
<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*53oGRpdKpwsAAAAAAAAAAAAADmJ7AQ/original" />

52
packages/site/docs/manual/upgrade.en.md
View File

@ -15,6 +15,14 @@ Compared to G6 v4, G6 v5 introduces new capabilities in the following areas:
- 🌠 **Multiple Renderers** that can be switched at runtime.
- 📦 Reduced package size with support for **TreeShaking**.
And more small and wonderful changes:
- Hull supports text configuration.
- Polyline supports automatic obstacle avoidance.
- Text automatically adapts to width.
- Improved interactive performance by using a temporary layer canvas.
- Legend automatically retrieves styles from the canvas.
The official version is coming soon. If these features are what you have been waiting for, you can now try the G6 5.0 Beta version! If you encounter any upgrade issues, please leave us a message on GitHub.
To support these new capabilities, there are significant Breaking Changes in G6 5.0 compared to v4, which may require some effort to upgrade. We hope that the benefits brought by the new capabilities outweigh the upgrade costs.
@ -684,3 +692,47 @@ It should be noted that the coordinate systems in v5 (four sets) have different
| Coordinates relative to the browser coordinate system | { clientX, clientY } | client: { x: number; y: number; z: number } |
| Coordinates relative to the Canvas DOM coordinate system 系 | { canvasX, canvasY } | viewport: { x: number; y: number; z: number } |
| Coordinates relative to the entire screen <img src="https://cdn.nlark.com/yuque/0/2023/png/156681/1686301904342-082076d7-62f7-45a3-8ab3-5f83ec1b8102.png" width=100> | none | screen: { x: number; y: number; z: number } |
## 🌸. More small and wonderful changes
- Hull supports text configuration:
You only need to configure the labelShape for the Hull instance, and you can specify its relative position (`position`) in four directions: above, below, left, or right of the hull.
[Hull with Label DEMO](https://g6-next.antv.antgroup.com/examples/interaction/hull/#hull)
<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*eXzfTbFrYjMAAAAAAAAAAAAADmJ7AQ/original" />
- Polyline supports automatic obstacle avoidance:
Set `keyShape.routeCfg.obstacleAvoidance: true` for the edge to automatically avoid nodes.
[Polyline Obstacle Avoidance DEMO](https://g6-next.antv.antgroup.com/examples/item/defaultEdges/#polyline3)
<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Giy7R4jheawAAAAAAAAAAAAADmJ7AQ/original" />
- Text automatically adapts to width:
Setting the `maxWidth` of the node's text shape allows you to specify the maximum width in pixels as a number or as a percentage of the keyShape. For example:
```javascript
const graph = new Graph({
node: {
labelShape: {
maxWidth: '120%',
},
},
});
```
[Label Fit Width DEMO](https://g6-next.antv.antgroup.com/examples/item/label/#copyLabel)
<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*LGuRR7itiQ8AAAAAAAAAAAAADmJ7AQ/original" />
- Improved interactive performance by using a temporary layer canvas:
<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*VkT7T4Qzt2gAAAAAAAAAAAAADmJ7AQ/original" />
- Legend automatically retrieves styles from the canvas:
<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*53oGRpdKpwsAAAAAAAAAAAAADmJ7AQ/original" />

52
packages/site/docs/manual/upgrade.zh.md
View File

@ -15,6 +15,14 @@ order: 3
- 🌠 **多渲染器**，可运行时切换；
- 📦 **包体积减少**，支持 TreeShaking。
还有其他一些微小而美好的改变：
- 轮廓包裹 Hull 支持文本配置；
- 折线支持自动避障；
- 文本自动适配宽度；
- 采用临时层画布提升交互性能；
- 图例自动从画布中获取样式。
正式版即将来袭。如果上面 Feature 是您所期待的，现在就可以使用 G6 5.0 Beta 版本进行尝鲜！若遇到任何升级问题，请在 GitHub 给我们留言。
为了支持上述全新能力，G6 5.0 相比于 v4 有比较大的 Breaking Change，这可能带来一定的升级成本。希望上面全新能力带来的收益远大于升级成本。
@ -731,3 +739,47 @@ v4 的坐标系统（三套）见文档：https://g6.antv.antgroup.com/manual/ad
| 相对于浏览器的坐标系 | { clientX, clientY } | client: { x: number; y: number; z: number } |
| 相对于 Canvas DOM 的坐标系 | { canvasX, canvasY } | viewport: { x: number; y: number; z: number } |
| 相对于整个屏幕的坐标系 <img src="https://cdn.nlark.com/yuque/0/2023/png/156681/1686301904342-082076d7-62f7-45a3-8ab3-5f83ec1b8102.png" width=100> | 无 | screen: { x: number; y: number; z: number } |
## 🌸. 其他微小而美好的改变
- 轮廓包裹 Hull 支持文本配置：
只需要为 Hull 实例配置 labelShape 即可，可以指定其相对位置(`position`)在 hull 的上、下、左、右四个方向。
[Hull 支持文本 DEMO](https://g6-next.antv.antgroup.com/examples/interaction/hull/#hull)
<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*eXzfTbFrYjMAAAAAAAAAAAAADmJ7AQ/original" />
- 折线支持自动避障：
设置边的 `keyShape.routeCfg.obstacleAvoidance: true` 即可自动躲避节点。
[Polyline 避障 DEMO](https://g6-next.antv.antgroup.com/examples/item/defaultEdges/#polyline3)
<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*Giy7R4jheawAAAAAAAAAAAAADmJ7AQ/original" />
- 文本自动适配宽度：
设置节点文本图形的 `maxWidth`，可以为数字代表允许的最大宽度的像素值，也可以是百分比字符串代表占 keyShape 的比例。例如：
```javascript
const graph = new Graph({
node: {
labelShape: {
maxWidth: '120%',
},
},
});
```
[文本自适应 DEMO](https://g6-next.antv.antgroup.com/examples/item/label/#copyLabel)
<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*LGuRR7itiQ8AAAAAAAAAAAAADmJ7AQ/original" />
- 采用临时层画布提升交互性能：
<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*VkT7T4Qzt2gAAAAAAAAAAAAADmJ7AQ/original" />
- 图例自动从画布中获取样式：
<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*53oGRpdKpwsAAAAAAAAAAAAADmJ7AQ/original" />

45
packages/site/examples/interaction/hull/demo/hull.js
View File

@ -1,4 +1,13 @@
import G6, { Extensions } from '@antv/g6';
import { Graph, extend, Extensions } from '@antv/g6';
const ExtGraph = extend(Graph, {
behaviors: {
'lasso-select': Extensions.LassoSelect,
},
plugins: {
hull: Extensions.Hull,
},
});
const data = {
nodes: [
@ -51,35 +60,23 @@ const hullPlugin = new Extensions.Hull({
key: 'hull-plugin1',
});
const graph = new G6.Graph({
const graph = new ExtGraph({
container: 'container',
width,
height,
plugins: [hullPlugin],
modes: {
default: ['drag-canvas', 'zoom-canvas', 'drag-node', 'lasso-select'],
default: ['drag-canvas', 'zoom-canvas', 'drag-node', 'lasso-select', 'drag-canvas'],
},
layout: {
type: 'force',
preventOverlap: true,
workerEnabled: true,
animated: true,
linkDistance: (d) => {
if (d.source === 'node0') {
return 300;
if (d.source === 'node0' || d.target === 'node0') {
return 200;
}
return 60;
},
nodeStrength: (d) => {
if (d.data.isLeaf) {
return -50;
}
return -10;
},
edgeStrength: (d) => {
if (d.source === 'node1' || d.source === 'node2' || d.source === 'node3') {
return 0.7;
}
return 0.1;
return 80;
},
},
data,
@ -117,6 +114,11 @@ graph.on('afterlayout', () => {
fill: 'lightgreen',
stroke: 'green',
},
labelShape: {
text: 'leafNode-hull-1',
position: 'top',
offsetY: -2,
},
});
hullPlugin.addHull({
@ -126,6 +128,11 @@ graph.on('afterlayout', () => {
fill: 'lightgreen',
stroke: 'green',
},
labelShape: {
text: 'leafNode-hull-2',
position: 'right',
offsetY: -2,
},
});
});

2
packages/site/examples/interaction/hull/demo/meta.json
View File

@ -10,7 +10,7 @@
"zh": "用轮廓包裹节点集合",
"en": "Use hulls to wrap the node sets."
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*krsJQb6tH-oAAAAAAAAAAAAAARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*eXzfTbFrYjMAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "changeMembers.js",

2
packages/site/examples/item/defaultEdges/demo/meta.json
View File

@ -10,7 +10,7 @@
"zh": "折线",
"en": "Polyline"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*tGX6S5r94wkAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*snNhSbjzg9EAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "polyline2.js",

5
packages/site/examples/item/label/demo/labelLen.js
View File

@ -57,7 +57,12 @@ const graph = new Graph({
fields: ['label'],
formatter: (model) => model.data.label,
},
maxWidth: '80%',
},
labelBackgroundShape: {},
},
edge: {
labelBackgroundShape: {},
},
data,
});

6
packages/site/examples/item/label/demo/labelLen1.js
View File

@ -45,10 +45,11 @@ const graph = new Graph({
default: ['drag-node'],
},
node: {
type: 'rect-node',
keyShape: {
r: {
width: {
fields: ['size'],
formatter: (model) => model.data.size / 2,
formatter: (model) => model.data.size,
},
},
labelShape: {
@ -58,6 +59,7 @@ const graph = new Graph({
fields: ['label'],
formatter: (model) => model.data.label,
},
maxWidth: '80%',
},
},
edge: {

4
packages/site/examples/item/label/demo/meta.json
View File

@ -18,7 +18,7 @@
"zh": "文本超长",
"en": "Long Label"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*FNzAQKvcW1kAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*LsGJTIaynVwAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "labelLen1.js",
@ -26,7 +26,7 @@
"zh": "多行显示超长文本",
"en": "Break Line for Long Label"
},
"screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*EC0-R7tAn0MAAAAAAAAAAABkARQnAQ"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*UlYDSaAlGLkAAAAAAAAAAAAADmJ7AQ/original"
}
]
}

5
packages/site/examples/tool/legend/demo/legend.ts
View File

@ -110,7 +110,7 @@ const legend = {
key: 'default-legend',
type: 'legend',
size: [250, 'fit-content'],
background: '#ccc',
background: 'rgba(0,0,0,0.05)',
node: {
enable: true,
padding: [20, 20],
@ -137,6 +137,9 @@ new Graph({
height,
data,
plugins: [legend],
layout: {
type: 'force',
},
theme: {
type: 'spec',
specification: {

5
packages/site/examples/tool/legend/demo/legendCustomMarker.ts
View File

@ -110,7 +110,7 @@ const legend = {
key: 'default-legend',
type: 'legend',
size: [250, 'fit-content'],
background: '#ccc',
background: 'rgba(0,0,0,0.05)',
node: {
enable: true,
padding: [20, 20],
@ -157,6 +157,9 @@ new Graph({
width,
height,
data,
layout: {
type: 'force',
},
plugins: [legend],
node: {
labelShape: {

5
packages/site/examples/tool/legend/demo/legendSVG.ts
View File

@ -111,7 +111,7 @@ const legend = {
type: 'legend',
renderer: 'svg',
size: [250, 'fit-content'],
background: '#ccc',
background: 'rgba(0,0,0,0.05)',
node: {
enable: true,
padding: [20, 20],
@ -138,6 +138,9 @@ new Graph({
height,
data,
plugins: [legend],
layout: {
type: 'force',
},
theme: {
type: 'spec',
specification: {

4
packages/site/examples/tool/legend/demo/meta.json
View File

@ -10,7 +10,7 @@
"zh": "图例-点击与 hover 筛选",
"en": "Filtering legend by clicking and hovering"
},
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*wuTqSLayaUoAAAAAAAAAAAAADmJ7AQ/original"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*53oGRpdKpwsAAAAAAAAAAAAADmJ7AQ/original"
},
{
"filename": "legendCustomMarker.ts",
@ -26,7 +26,7 @@
"zh": "图例-使用 SVG 绘制图例",
"en": "Render legend with SVG"
},
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*wuTqSLayaUoAAAAAAAAAAAAADmJ7AQ/original"
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*53oGRpdKpwsAAAAAAAAAAAAADmJ7AQ/original"
}
]
}