mirror of
https://gitee.com/antv/g6.git
synced 2024-12-03 04:08:32 +08:00
docs: the new arrow system docs.
This commit is contained in:
Yanyan-Wang
Yanyan Wang
parent
44baf9cd8a
commit
a98c035f26
@ -194,7 +194,7 @@ graph.on('edge:mouseleave', ev => {
|
||||
|
||||
<br />
|
||||
|
||||
## 4. Register Edge with Custom Arrow
|
||||
## 4. Custom Arrow
|
||||
|
||||
The default end arrows might not meet the requirements sometimes. You can register an edge with a custom arrow by the custom mechanism of G6.<br />
|
||||
|
||||
@ -202,6 +202,74 @@ The default end arrows might not meet the requirements sometimes. You can regist
|
||||
|
||||
> (Left) Built-in arrow of G6. (Right) A custom edge with custom arrow.
|
||||
|
||||
|
||||
|
||||
<span style="background-color: rgb(251, 233, 231); color: rgb(139, 53, 56)"><strong>⚠️ Attention:</strong></span> The coordinate system of custom arrow is changed by G6 3.4.1. In the figure below, the left one is the demonstration of the custom arrow before v3.4.1, and the right one illustates v3.4.1 and its later versions. The pointed direction is changed from negative direction to positive direction of x-axis. In the same time, the dirrection of the offset `d` is changed. In both versions, the origin of the self coordinate system of the custom arrow is on the end point of the corresponding edge or path, and the slope of the arrow is the same as the slope of edge or path at the end point.
|
||||
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*gN_NSqjLRo0AAAAAAAAAAABkARQnAQ' width=565 />
|
||||
|
||||
> (Left) Illustration for the coordinate system of custom arrow before v3.4.1. (Right) Illustration for v3.4.1 and its later versions.
|
||||
|
||||
There are three ways to configure a custom arrow to an edge in G6:
|
||||
- Configuring on the graph to global edges;
|
||||
- Configuring in data for single edge;
|
||||
- Configuring in a custom edge type.
|
||||
|
||||
### 1. Global Configuration
|
||||
|
||||
```javascript
|
||||
const graph = new Graph({
|
||||
// ... Other configurations for graph
|
||||
defaultEdge: {
|
||||
style: {
|
||||
endArrow: {
|
||||
// The custom arrow is a path points at (0, 0), and its tail points to the positive direction of x-axis
|
||||
path: 'M 0,0 L 20,10 L 20,-10 Z',
|
||||
// the offset of the arrow, nagtive value means the arrow is moved alone the positive direction of x-axis
|
||||
// d: -10
|
||||
// styles are supported after v3.4.1
|
||||
fill: '#333',
|
||||
stroke: '#666',
|
||||
opacity: 0.8,
|
||||
// ...
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### 2. Configuring in Data
|
||||
```javascript
|
||||
const data = {
|
||||
nodes: [
|
||||
{ id: 'node1' },
|
||||
{ id: 'node2' },
|
||||
// ... other nodes
|
||||
],
|
||||
edges: [{
|
||||
source: 'node1',
|
||||
target: 'node2',
|
||||
style: {
|
||||
endArrow: {
|
||||
// The custom arrow is a path points at (0, 0), and its tail points to the positive direction of x-axis
|
||||
path: 'M 0,0 L 20,10 L 20,-10 Z',
|
||||
// the offset of the arrow, nagtive value means the arrow is moved alone the positive direction of x-axis
|
||||
// d: -10
|
||||
// styles are supported after v3.4.1
|
||||
fill: '#333',
|
||||
stroke: '#666',
|
||||
opacity: 0.8,
|
||||
// ...
|
||||
},
|
||||
}
|
||||
},
|
||||
//... other edges
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### 3. Configuring in a Custom Edge
|
||||
|
||||
```javascript
|
||||
G6.registerEdge('line-arrow', {
|
||||
draw(cfg, group) {
|
||||
@ -233,4 +301,4 @@ G6.registerEdge('line-arrow', {
|
||||
return keyShape;
|
||||
},
|
||||
});
|
||||
```
|
||||
```
|
||||
@ -193,15 +193,81 @@ graph.on('edge:mouseleave', ev => {
|
||||
|
||||
<br />
|
||||
|
||||
## 4. 自定义带箭头的边
|
||||
## 4. 自定义箭头
|
||||
|
||||
很多时候，G6 默认提供的箭头并不能满足业务上的需求，这个时候，就需要我们自定义箭头。当然了，G6 也支持箭头样式的自定义。<br />
|
||||
很多时候，G6 默认提供的箭头并不能满足业务上的需求，这个时候，就需要我们自定义箭头。<br />
|
||||
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*f1G9RJ5dE2oAAAAAAAAAAABkARQnAQ' alt='img' width='250'/>
|
||||
|
||||
> （左）G6 内置箭头。（右）自定义边带有自定义箭头。
|
||||
|
||||
<span style="background-color: rgb(251, 233, 231); color: rgb(139, 53, 56)"><strong>⚠️ 注意:</strong></span> G6 3.4.1 后的自定义箭头坐标系有所变化。如下图所事，左图为 G6 3.4.1 之前版本的演示，右图为 G6 3.4.1 及之后版本的演示。箭头由指向 x 轴负方向更正为指向 x 轴正方向。同时，偏移量 `d` 的方向也发生响应变化。不变的是，自定义箭头本身坐标系的原点都与相应边 / path 的端点重合，且自定义箭头的斜率与相应边 / path 端点处的微分斜率相同。
|
||||
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*gN_NSqjLRo0AAAAAAAAAAABkARQnAQ' width=565 />
|
||||
|
||||
> （左）v3.4.1 之前的自定义箭头坐标系演示。（右）v3.4.1 及之后版本的自定义箭头坐标系演示。
|
||||
|
||||
|
||||
G6 中有三种途径在边上配置自定义箭头：
|
||||
- 配置自定义箭头到边的全局配置中；
|
||||
- 在数据中为单条边配置；
|
||||
- 在自定义边中配置。
|
||||
|
||||
### 方法 1: 全局配置
|
||||
```javascript
|
||||
const graph = new Graph({
|
||||
// ... 图的其他配置项
|
||||
defaultEdge: {
|
||||
style: {
|
||||
endArrow: {
|
||||
// 自定义箭头指向(0, 0)，尾部朝向 x 轴正方向的 path
|
||||
path: 'M 0,0 L 20,10 L 20,-10 Z',
|
||||
// 箭头的偏移量，负值代表向 x 轴正方向移动
|
||||
// d: -10,
|
||||
// v3.4.1 后支持各样式属性
|
||||
fill: '#333',
|
||||
stroke: '#666',
|
||||
opacity: 0.8,
|
||||
// ...
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### 方法 2: 在数据中配置
|
||||
```javascript
|
||||
const data = {
|
||||
nodes: [
|
||||
{ id: 'node1' },
|
||||
{ id: 'node2' },
|
||||
// ... 其他节点
|
||||
],
|
||||
edges: [{
|
||||
source: 'node1',
|
||||
target: 'node2',
|
||||
style: {
|
||||
endArrow: {
|
||||
// 自定义箭头指向(0, 0)，尾部朝向 x 轴正方向的 path
|
||||
path: 'M 0,0 L 20,10 L 20,-10 Z',
|
||||
// 箭头的偏移量，负值代表向 x 轴正方向移动
|
||||
// d: -10,
|
||||
// v3.4.1 后支持各样式属性
|
||||
fill: '#333',
|
||||
stroke: '#666',
|
||||
opacity: 0.8,
|
||||
// ...
|
||||
},
|
||||
}
|
||||
},
|
||||
//... 其他边
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### 方法 3: 自定义边中配置
|
||||
```javascript
|
||||
// 使用方法二：自定义边，并带有自定义箭头
|
||||
G6.registerEdge('line-arrow', {
|
||||
draw(cfg, group) {
|
||||
const { startPoint, endPoint } = cfg;
|
||||
@ -218,12 +284,22 @@ G6.registerEdge('line-arrow', {
|
||||
path: 'M 0,0 L 20,10 L 20,-10 Z',
|
||||
// 箭头的偏移量，负值代表向 x 轴正方向移动
|
||||
// d: -10,
|
||||
// v3.4.1 后支持各样式属性
|
||||
fill: '#333',
|
||||
stroke: '#666',
|
||||
opacity: 0.8,
|
||||
// ...
|
||||
},
|
||||
endArrow: {
|
||||
// 自定义箭头指向(0, 0)，尾部朝向 x 轴正方向的 path
|
||||
path: 'M 0,0 L 20,10 L 20,-10 Z',
|
||||
// 箭头的偏移量，负值代表向 x 轴正方向移动
|
||||
// d: -10,
|
||||
// v3.4.1 后支持各样式属性
|
||||
fill: '#333',
|
||||
stroke: '#666',
|
||||
opacity: 0.8,
|
||||
// ...
|
||||
},
|
||||
},
|
||||
// must be assigned in G6 3.3 and later versions. it can be any value you want
|
||||
@ -232,4 +308,4 @@ G6.registerEdge('line-arrow', {
|
||||
return keyShape;
|
||||
},
|
||||
});
|
||||
```
|
||||
```
|
||||
Loading…
Reference in New Issue
Block a user