vue 白边 项目_GUIDE.md · kaiking_g/g6-vue-demo - Gitee.com
# 使用教程
## 安裝
```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
原始數據
按行查看
歷史
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的vue 白边 项目_GUIDE.md · kaiking_g/g6-vue-demo - Gitee.com的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ubuntu安装mysql远程_Ubun
- 下一篇： vue写进html,vue中html页面