# 使用教程
## 安装
```js
npm install @antv/g6
npm install welabx-g6
```
## 引入/使用
v0.4.x (不推荐)
```js
import WelabxG6 from 'welabx-g6';
const g6 = new WelabxG6({
// config
});
const graph = g6.instance; // G6实例
graph.read(data);
graph.paint();
// 销毁实例
g6.destroy();
```
## v0.5+ (推荐)
```js
import G6 from '@antv/g6';
import registerFactory from 'welabx-g6';
const config = registerFactory(G6, {
// g6 config
});
const graph = new G6.Graph(config);
graph.read(data);
graph.destory();
```
### 自定义节点和边(边支持设置箭头)
| 非内置节点和边 | type | 宽高/半径属性 |
| ---- | ---- | ---- |
| rect-node | 方形节点 | width, height, radius(圆角) |
| circle-node | 圆形节点 | r (半径) |
| ellipse-node | 椭圆节点 | rx, ry 椭圆焦距 |
| diamond-node | 菱形节点 | size, 默认 [80, 80] |
| triangle-node | 三角形节点 | size, 默认 [60, 100] direction, 默认 'up', 可设为 'down' |
| line-edge | 自定义边 | 默认属性 |
| polyline-edge | 自定义边 | 默认属性 |
| quadratic-edge | 自定义边 | 默认属性 |
| cubic-edge | 自定义边 | 默认属性 |
| hvh-edge | 自定义边 | 单向开口 |
| hvh-h-edge | 自定义边 | 双向开口 |
### 事件监听与通知
> 已支持事件列表
| 事件名称 | 回调参数 | 说明 |
| ---- | ---- | ---- |
| after-node-selected | event 对象 | 节点选中事件 |
| after-edge-selected | event 对象 | 边选中事件 |
| on-canvas-click | event 对象 | 鼠标点击画布事件 |
| on-canvas-dragend | event 对象(内置了画布偏移量dx, dy) | 画布拖拽结束事件 |
| on-node-mouseenter | event 对象 | 鼠标移入节点事件 |
| on-node-mousemove | event 对象 | 鼠标在节点上移动事件(持续触发) |
| on-node-mouseleave | event 对象 | 鼠标从节点上移开事件 |
| on-node-mousedown | event 对象 | 鼠标左键按下节点事件 |
| on-node-mouseup | event 对象 | 鼠标左键抬起节点事件 |
| on-node-dragstart | event 对象 | 节点拖拽开始事件(也是锚点拖拽事件) |
| on-node-drag | event 对象 | 节点拖拽中事件(也是锚点拖拽事件) |
| on-node-dragend | event 对象 | 节点拖拽结束事件(也是锚点拖拽事件) |
| on-node-drop | event 对象 | 在节点上释放事件(e.item 当前拖拽节点, e.target 当前释放节点) |
| on-edge-mouseenter | event 对象 | 同节点事件 |
| on-edge-mousemove | event 对象 | 同节点事件 |
| on-edge-mouseleave | event 对象 | 同节点事件 |
| before-node-removed | event 对象 | 节点移除前的事件 |
| after-node-removed | event 对象 | 节点移除后的事件 |
| after-node-dblclick | event 对象 | 双击节点事件 |
| after-edge-dblclick | event 对象 | 双击边事件 |
| before-edge-add | event 对象 | 添加边之前的事件 |
(回调中有些情况下是空, 有些回调会触发多次, 因为内部也在使用, 如果影响较大, 后期考虑减少空回调和重复回调)
```js
graph.on('after-node-selected', e => {
if(e && e.item) {
console.log(e.item.get('id'));
}
});
graph.on('after-edge-selected', e => {
if(e && e.item) {
console.log(e.item.get('id'));
}
});
graph.on('before-node-removed', ({target, callback}) => {
console.log(target);
setTimeout(() => {
callback(true);
}, 1000);
});
graph.on('before-edge-add', ({ source, target, sourceAnchor, targetAnchor }) => {
setTimeout(() => {
this.graph.addItem('edge', {
source: source.get('id'),
target: target.get('id'),
sourceAnchor,
targetAnchor,
label: 'edge label',
// ... item 其他属性
});
}, 1000);
});
// 自定义事件监听需在 registerFactory 中定义
```
### 添加节点
```js
// 节点 model 中添加 singleEdge 属性时, 拖拽锚点只能生成 1 条边
const model = {
label: 'node',
id: '1', // 非必传
// 形状
type: 'rect-node', // e.target.dataset.shape
// 坐标
x: e.clientX - 50,
y: e.clientY + 200,
singleEdge: true, // 拖拽锚点只能生成 1 条边
};
graph.addItem('node', model);
```
> 自定义的 modes
- canvas-event
- delete-item
- select-node
- hover-node
- drag-node
- active-edge
## 自定义G6实例
```js
import G6 from '@antv/g6';
import registerFactory from 'welabx-g6';
const config = registerFactory(G6, {
// ...
});
const graph = new G6.TreeGraph(config);
graph.read({
nodes: [{
id: 'root',
label: 'Root',
children: [{
id: '1',
data: {
action: '初始化',
},
type: 'modelRect-node',
style: { // 节点样式
// fill: '#39495b',
},
// 左侧方条
preRect: {
show: true, // 是否显示左侧方条
width: 4,
fill: '#40a9ff',
radius: 2,
},
labels: [{
x: -70,
y: -10,
label: '标题,最长10个字符~~',
labelCfg: {
fill: '#666',
fontSize: 14,
maxlength: 10,
},
}, {
x: -70,
y: 7,
label: '描述,最长12个字符~~~',
labelCfg: {
fontSize: 12,
fill: '#999',
maxlength: 12,
},
}, {
x: -70,
y: 24,
label: '第三行,最长16个字符,超出显示省略号~~~',
labelCfg: {
fontSize: 10,
fill: '#ccc',
maxlength: 16,
},
}],
}, {
id: '2',
type: 'modelRect-node',
style: {
width: 230,
height: 60,
fill: '#65b586',
lineWidth: 0,
},
label: '初始化事件和生命周期和其他',
labelCfg: {
stroke: '#ccc',
fill: '#fff',
maxlength: 10,
},
}],
}]
});
```
## 注册自定义节点/边/行为
```js
import G6 from '@antv/g6';
import registerFactory from 'welabx-g6';
G6.registerNode('your-node', {
// your code here
});
// 注册自定义边
G6.registerEdge('your-edge', {
// your code here
});
// 注册自定义行为
G6.registerBehavior('your-behavior', {
// your code here
});
const config = registerFactory(G6, {
// ...
});
const graph = new G6.TreeGraph(config);
graph.read(data);
graph.paint();
// 销毁实例
graph.destroy();
```
## 二次继承
> *-node 支持二次继承扩展状态回调了!
> 先继承 [*-node], 在生命周期中通过 stateApplying 方法进行状态值处理
```js
/* file 1 */
export default G6 => {
G6.registerNode('your-unique-node', {
shapeType: 'rect',
draw (cfg, group) {
return this.drawShape(cfg, group);
},
stateApplying (name, value, item) {
// 继承更多状态回调
},
}, 'rect-node' /* 要继承的 *-node */);
}
```
```js
/* file 2 */
import G6 from '@antv/g6';
import register from 'welabx-g6';
const config = registerFactory(G6, {
// ...
});
const graph = new G6.TreeGraph(config);
graph.read({
// your data
});
```
## 完整案例
```js
import G6 from '@antv/g6';
import registerFactory from 'welabx-g6';
const data = {
node: [
{
id: '1',
data: {
// 业务数据
},
type: 'rect-node', // 对应注册的节点name, 还可以是 ellipse-node / rect-node / diamond-node 等
style: {
// ... 当前节点的样式
r: 40, // 圆形节点半径
fill: 'orange',
lineDash: [1, 2],
shadowOffsetX: 0,
shadowOffsetY: 2,
shadowColor: '#666',
shadowBlur: 10,
hover: {
fill: '#ccc',
},
selected: {
stroke: '#ccc',
},
},
label: 'new Vue()', // 节点上显示的文字
// node 文本默认样式
labelCfg: {
fill: '#fff',
textAlign: 'center',
textBaseline: 'middle',
fontWeight: 'bold',
fontSize: 24,
},
// 当前节点多状态样式, 覆盖全局样式, 仅对当前节点生效
nodeStateStyles: {
'nodeState:default': {
fill: 'orange',
},
'nodeState:hover': {
fill: '#ffbd17',
},
'nodeState:selected': {
fill: '#f1ac00',
},
},
},
{
id: 'node-2',
label: 'beforeCreate',
type: 'rect-node',
style: {
radius: 2,
},
// 自定义锚点数量和位置(二维数组, 含义参见官网)
anchorPoints: [
[0, 0],
[0.5, 0],
[0, 1],
[0.5, 1],
[1, 0],
[1, 1],
],
},
],
edges: [
{
source: '1', // 来源节点 id
target: '2', // 目标节点 id
label: '条件', // 边上的文字 / 当前只支持1个文案
data: { // 当前边的自定义属性
type: 'xxx',
amount: '100,000 元',
date: '2019-08-03',
},
style: {
stroke: '#ccc',
lineDash: [5,5],
lineWidth: 2,
lineAppendWidth: 10,
// 支持引用 G6内置箭头了!
endArrow: {
path: G6.Arrow.rect(10, 10, 3),
fill: '#aab7c1',
stroke: '#aab7c1',
},
},
labelCfg: {
position: 'center', // 其实默认就是 center，这里写出来便于理解
autoRotate: true, // 使文本随边旋转
style: {
stroke: 'white', // 给文本添加白边和白色背景
fill: '#722ed1', // 文本颜色
lineWidth: 5, // 文本白边粗细
},
},
// 边的多状态样式, 会覆盖全局样式, 仅对这条边生效
edgeStateStyles: {
'edgeState:default': {
strokeOpacity: 1,
stroke: '#ccc',
animate: false,
},
'edgeState:hover': {
strokeOpacity: 0.6,
stroke: '#ccc',
animate: true,
animationType: 'ball', // 内置 ball/dash 两种动画, 默认使用 dash
},
'edgeState:selected': {
strokeOpacity: 1,
stroke: '#ccc',
},
},
},
],
}
const minimap = new G6.Minimap({
size: [200, 100],
});
const confg = registerFactory(G6, {
container: 'id',
width: 1000,
height: 300,
renderer: 'canvas', // 默认 canvas, 也可选用 svg, 但有些事件没有兼容, 也不打算兼容了, 只维护canvas版本
// 自定义注册行为, 事件, 交互
plugins: [minimap],
defaultEdge: {
type: 'polyline-edge', // 扩展了内置边, 有边的事件
style: {
radius: 5,
offset: 15,
stroke: '#aab7c3',
lineAppendWidth: 10, // 防止线太细没法点中
/* startArrow: {
path: 'M 0,0 L 8,4 L 7,0 L 8,-4 Z',
fill: '#aab7c3',
}, */
endArrow: {
path: 'M 0,0 L 8,4 L 7,0 L 8,-4 Z',
fill: '#aab7c1',
stroke: '#aab7c1',
},
},
},
// 默认节点不同状态下的样式集合
nodeStateStyles: {
'nodeState:default': {
fill: '#E7F7FE',
stroke: '#1890FF',
},
'nodeState:hover': {
fill: '#d5f1fd',
},
'nodeState:selected': {
fill: '#caebf9',
stroke: '#1890FF',
},
},
// 默认边不同状态下的样式集合
edgeStateStyles: {
'edgeState:default': {
stroke: '#aab7c3',
},
'edgeState:selected': {
stroke: '#1890FF',
},
'edgeState:hover': {
stroke: '#1890FF',
},
},
// ... 其他G6参数
});
const graph = new G6.Graph(config);
graph.read(data);
```
## modelRect-node 与树图配置
```js
// 树形结构
data = {
id: 'root',
label: 'Root',
type: 'modelRect-node',
style: {
// 节点样式
},
edgeStyle: { // 边的样式
stroke: '#39495b',
},
children: [{
type: 'modelRect-node',
style: {
fill: '#fff',
},
// 左侧方条
preRect: {
show: true, // 是否显示左侧方条
width: 4,
fill: '#40a9ff',
radius: 2,
},
// logo图标, 注意: 坐标 (0, 0) 代表图形几何中心
logoIcon: {
show: true, // 是否显示图标
x: 0, // 控制图标在横轴上的位置
y: 0, // 控制图标在纵轴上的位置
// url 用于图标地址
img: 'https://gw.alipayobjects.com/zos/basement_prod/4f81893c-1806-4de4-aff3-9a6b266bc8a2.svg',
// 相对路径
// img: require('../../image.png'),
text: '\ue610;', // 用于支持 iconfont, text 是 iconfont.css 中的content, 注意加 u
width: 16,
height: 16,
// 图标样式
style: {
stroke: '#333',
fill: '#fc0',
},
},
// 状态图标, 注意: 坐标 (0, 0) 代表图形几何中心
stateIcon: {
show: true, // 是否显示图标
x: 70, // 控制图标在横轴上的位置
y: 10, // 控制图标在纵轴上的位置
text: '\ue610', // css中对应的content, 注意加 u
fontFamily: 'iconfont', // 这里是css中定义的字体名称
fontSize: 20,
style: {
stroke: '#333',
fill: '#fc0',
},
},
// 这里是数组! 这里是数组! 这里是数组!
labels: [{
label: '标题,最长10个字符~~',
labelCfg: {
textBaseline: 'middle',
fontWeight: 'bold',
maxlength: 10, // 超出10个字符显示省略号
fontSize: 14,
fill: '#666',
},
className: 'node-text-0', // 可用于绑定自定义事件
}, {
label: '描述描述',
labelCfg: {
maxlength: 12,
fontSize: 12,
fill: '#999',
},
className: 'node-text-1',
}, {
label: '第三行,最长16个字符,超出显示省略号~~~',
labelCfg: {
maxlength: 16,
fontSize: 10,
fill: '#ccc',
},
className: 'node-text-2',
}],
}]
};
```
## 隐藏所有节点锚点
```js
defaultNode: {
anchorControls: {
hide: true, // 隐藏所有锚点
},
}
```
一键复制
编辑
Web IDE
原始数据
按行查看
历史
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
