我学习G6看的几篇文章:
1、G6入门
2、关于antV G6中的on事件、util.each事件及update方法等的使用总结
3、tooltip 节点提示框
1、拖拽、缩放——内置的交互行为
在 G6 中使用内置 Behavior 的方式非常简单,只需要在图实例化时配置 modes。拖拽和缩放属于 G6 内置交互行为,修改代码如下:
const graph = new G6.Graph({
// ... // 其他配置项
modes: {
default: ['drag-canvas', 'zoom-canvas', 'drag-node'], // 允许拖拽画布、放缩画布、拖拽节点
},
});
2、点击事件
// 节点左击
graph.on('node:click', function(evt) {
//获取当前节点数据信息
console.log('节点左击', evt)
alert('节点左击')
}),
// 节点右击
graph.on('node:contextmenu', function(evt) {
//当前节点定位
console.log('节点右击', evt)
alert('节点右击')
})
3、线路
defaultEdge: {
type: 'line',
style: {
endArrow: true,
endArrow: {
path: G6.Arrow.triangle(5, 10, 10), // 使用内置箭头路径函数,参数为箭头的 宽度、长度、偏移量(默认为 0,与 d 对应)
d: 10,
// path: G6.Arrow.triangle(5, 10, 10),
// d: 8
// path: 'M 0,0 L 8,4 L 8,-4 Z',
// fill: '#e2e2e2'
fill: '#ccc'
},
style: {
stroke: '#eaff8f',
lineWidth: 0
}
}
}
4、布局
layout: {
type: 'dagre',
rankdir: 'LR'
},
5、 贝塞尔曲线 + 线上加圆点
6、填充颜色
style: {
fill: '#67c23a' ,
lineWidth: 1
},
7、线上加文字
edges 数据:
target: item.target,
source: item.source,
style: item.style,
label: '正在执行',
8、节点使用图片
nodes 数据:
shape: 'image',
img: this.pngSrc,
size: item.type == '1' ? [50, 50] : 50,
9、画布的清空
this.graph.destroy()
this.init()
10、画布自适应 显示全部的节点
fitView:'autoZoom',
11、缩略图
const minimap = new G6.Minimap({
size: [100, 100],
className: 'minimap',
type: 'delegate'
})
plugins: [minimap] //配置插件
12、更新节点,不重新绘制
const node = this.graph.findById(id)
this.graph.updateItem(node, {
//节点大小
size: 50,
// 节点上文本的样式
labelCfg: {
style: {
fill: '#000',
fontSize: 15
}
}
})
12、动态计算长度 (解决label文字长短不一的方案)
nodeStyleConfig(label) {
let width = label.length
let height = 30
let size
let reg = /[a-z,A-Z,_]/
if (reg.test(label)) {
size = [(width * this.fontSize) / 2 + 30, height]
} else {
size = [width * this.fontSize, height]
}
return size
},
13、保持缩放比例
//在拉取新数据重新渲染页面之前先获取当前缩放比例
const zoom = graph.getZoom();
//此处获取数据
await getData()
//缩放至之前的比例
graph.zoomTo(zoom);
14、保持画布位置
//在拉取新数据重新渲染页面之前先获取点(0, 0)在画布上的位置
const lastPoint = graph.getCanvasByPoint(0, 0);
//此处获取数据。。。
await getData()
//获取重新渲染之后点(0, 0)在画布的位置
const newPoint = graph.getCanvasByPoint(0, 0);
//移动画布相对位移
graph.translate(lastPoint.x - newPoint.x, lastPoint.y - newPoint.y);
15、画布宽高为 自适应
//parentContent 为父级 div
this.canvasWidth = this.$refs.parentContent.clientWidth
this.canvasHeight = this.$refs.parentContent.clientHeight
this.graph = new G6.Graph({
container: 'container',
width: this.canvasWidth,
height: this.canvasHeight
})
modes: {
default: [
'drag-canvas',
'zoom-canvas',
'drag-node',
{
type: 'tooltip',
// offset: -50,
formatText: function formatText(model) {
return model.oriLabel || model.label // <----------- 关键
},
shouldUpdate: function shouldUpdate(e) {
return true
}
}
] // 允许拖拽画布、放缩画布、拖拽节点
}
16、G6画布大小自适应 关键 ===> changeSize
浏览器窗口发生变化时,画布自适应窗口大小
G6图 进行放大缩小,全屏操作
fullScreen() {
this.isFullScreen = true
this.$emit('isFullScreenFn', this.isFullScreen)
// this.graph.destroy()
setTimeout(() => {
// this.render()
var canvasWidth = parseInt(document.getElementsByClassName('bloodBorne')[0].offsetWidth)
var canvasHeight = parseInt(document.getElementsByClassName('bloodBorne')[0].offsetHeight)
this.graph.changeSize(canvasWidth, canvasHeight)
//this.graph.fitCenter() // 将图移动到画布中心位置
}, 300)
},