antv_G6-method summary
鼠标事件 ：此类事件可以与前缀'','node','edge','item'等自由组合使用。 如graph.on('onde:click', (ev)=>{
});
graph.on('click', (ev)=>{
}); // 鼠标左键点击事件
graph.on('dblclick', (ev)=>{
}); // 鼠标左键双击事件
graph.on('mouseenter', (ev)=>{
}); // 鼠标移入事件
graph.on('mouseleave', (ev)=>{
}); // 鼠标移除事件
graph.on('mousedown', (ev)=>{
}); // 鼠标按下事件
graph.on('mouseup', (ev)=>{
}); // 鼠标抬起事件
graph.on('mousemove', (ev)=>{
}); // 鼠标移动事件
graph.on('dragstart', (ev)=>{
}); // 鼠标开始拖拽事件
graph.on('drag', (ev)=>{
}); // 鼠标拖拽事件
graph.on('dragend', (ev)=>{
}); // 鼠标拖拽结束事件
graph.on('dragenter', (ev)=>{
}); // 鼠标拖拽进入事件
graph.on('dragleave', (ev)=>{
}); // 鼠标拖拽移出事件
graph.on('drop', (ev)=>{
}); // 鼠标拖拽放置事件
graph.on('contextmenu', (ev)=>{
}); // 菜单事件
graph.on('keydown', function(ev){
}); // 键盘按键按下事件
graph.on('keyup', function(ev){
}); // 键盘按键抬起事件
graph.on('mousewheel', function(ev){
}); // 鼠标滚轮事件
graph.on('beforechangesize', function(ev){
}) // 画布尺寸变化前
graph.on('afterchangesize', function(ev){
}) // 画布尺寸变化后
graph.on('beforeviewportchange', function(ev){
}) // 视口变化前
graph.on('afterviewportchange', function(ev){
}) // 视口变化后
graph.on('beforechange', function(ev){
}) // 子项数据变化前
graph.on('afterchange', function(ev){
}) // 子项数据变化后
Add node
graph.add(type,model)
//参数 type {string} 项类型 可以是 node 、edge 、guide model {object} 数据模型
Control node style (node can be id)
graph.updateItem(node, {
// 节点的样式
style: {
stroke: 'blue',
},
});
Control highlight properties
graph.setItemState("产线3", "online", true);
Destroy the canvas
graph.destroy();
For external use
const graph = new G6.TreeGraph({
nodeStateStyles: {
selected: {
fill: textColor,
},
online: {
fill: "#00FF00",
},
alarm: {
fill: "#FF0000",
},
warn: {
fill: "#FFFF00",
},
},
})
//先在内部获取
this.chart=graph //chart是data里面变量
//外部 添加节点
this.chart.add(type,model)
//参数 type {string} 项类型 可以是 node 、edge 、guide model {object} 数据模型
//控制节点样式
this.chart.add(type,model)
this.chart.updateItem(node, {
// 节点的样式
style: {
stroke: 'blue',
},
});
//控制高亮
this.chart.setItemState("产线3", "online", true);
If you don’t see it well enough, please move to my other vue—g6 demo blog
For example:
https://blog.csdn.net/weixin_46476460/article/details/109116232
https://blog.csdn.net/weixin_46476460/article/details/108539163
https://blog.csdn.net/weixin_46476460/article/ details/108518365