课程链接:
AntV G6 系列课程第 3 集:图元素及样式配置、状态样式和事件监听_哔哩哔哩_bilibili
课程大纲
Node节点
图形样式属性 Shape Attr | G6 (antgroup.com)
Edge 边 03:18
Combo 节点分组 03:51
StateStyles 状态样式 04:04
G6 状态管理的最佳实践 | G6 (antgroup.com)
事件监听 08:13
基础事件 Event | G6 (antgroup.com)
【扩展】
(x/y,clientX/clientY,canvasX/canvasY 三套坐标系详解见 G6 坐标系深度解析 | G6 (antgroup.com)
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>03 图元素及样式配置、状态样式和事件监听</title>
<!-- 引入 G6 -->
<script src="https://gw.alipayobjects.com/os/lib/antv/g6/4.3.11/dist/g6.min.js"></script>
</head>
<body>
<div id="container"></div>
<script>
const data = {
nodes: [{
id: '1',
label: 'node-1',
type: 'rect',
x: 100,
y: 200,
size: [50, 25],
style: {
fill: '#91d5ff',
stroke: '#0050b3',
},
stateStyles: {
stateName1: {
fill: '#1890ff'
},
stateName2: {
fill: '#1890ff',
stroke: '#ff7875',
lineWidth: 3,
'text-shape': {
fontSize: 20,
fontWeight: 500
}
}
}
},
{
id: '2',
label: '节点2',
labelCfg: {
position: 'bottom',
style: {
fill: '#531dab',
fontWeight: 500,
}
},
stateStyles: {
stateName1: {
stroke: '#9254de',
lineWidth: 5
},
stateName2: {
fill: '#9254de',
'text-shape': {
fontSize: 20,
fill: '#f00'
}
}
}
},
{
id: '3',
label: 'node-3'
}
],
edges: [{
source: '1',
target: '2',
style: {
endArrow: {
path: 'M 0,0 L 20,10 L 20,-10 Z',
fill: '#ccc',
stroke: '#0f0'
},
startArrow: true
}
},
{
source: '2',
target: '3'
},
{
source: '3',
target: '1'
}
]
}
const width = document.getElementById('container').scrollWidth
const height = document.getElementById('container').scrollHeight || 450
const graph = new G6.Graph({
container: 'container',
width,
height,
defaultNode: {
type: 'ellipse',
style: {
fill: '#efdbff',
stroke: '#531dab'
}
},
defaultEdge: {
// ...
},
nodeStateStyles:{
stateName3: {
fill: '#d9f7be',
stroke: '#135200'
},
stateName4: {
fill: '#d9f7be',
stroke: '#135200',
'text-shape': {
fontWeight: 800
}
},
},
fitView: true,
fitViewPadding: 100,
// 模式
modes: {
default: [{
type: 'drag-canvas', // 可以按这个格式写成对象的形式
direction: 'x'
}, 'drag-node', 'zoom-canvas'],
edit: ['drag-canvas', 'zoom-canvas', 'click-select'],
edit2: ['drag-node'],
},
})
// afterrender 需要在 read 之前进行监听
// graph.on('afterrender', e=> {
// alert('render done!')
// })
graph.read(data)
// mouseenter与mouseleave
graph.on('node:mouseenter', e => {
// 【注】在添加2种状态(stateName1与stateName3)后
// node1、node2直接hover无反应,在click后,hover才有样式
// 在调换stateName1与stateName3顺序后, 直接hover node3 无反应
graph.setItemState(e.item, 'stateName1', true)
graph.setItemState(e.item, 'stateName3', true)
})
graph.on('node:mouseleave', e => {
graph.setItemState(e.item, 'stateName1', false)
graph.setItemState(e.item, 'stateName3', false)
})
// node click
graph.on('node:click', e => {
graph.setItemState(e.item, 'stateName4', true)
graph.setItemState(e.item, 'stateName2', true)
})
// canvas click
graph.on('canvas:click', e => {
graph.getNodes().forEach(node=>{
graph.setItemState(node, 'stateName4', false)
graph.setItemState(node, 'stateName2', false)
})
})
graph.on('text-shape:click', e => {
alert('clicked text-shape')
})
graph.data(data)
graph.render()
</script>
</body>
</html>