转载：
https://blog.csdn.net/bfoursix/article/details/106861801
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tutorial Demo</title>
<style type="text/css">
#contextMenu {
position: absolute; list-style-type: none;
padding: 10px 8px; left: -150px;
background-color: rgba(255, 255, 255, 0.9);
border: 1px solid #e2e2e2; border-radius: 4px;
font-size: 12px; color: #545454; }
#contextMenu li { cursor: pointer; list-style-type:none; list-style: none;
margin-left: 0px; }
#contextMenu li:hover { color: #aaa; }
</style>
</head>
<body>
/* 图的画布容器 */
<div id="mountNode"></div>
/* 引入 G6 */
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.0/build/g6.js"></script>
<script>
const descriptionDiv = document.createElement('div');
descriptionDiv.id = 'discription';
descriptionDiv.innerHTML = 'Right click a node to activate a contextMenu.';
document.getElementById('mountNode').appendChild(descriptionDiv);
// JSX and HTML templates are available for the menu
// create ul
const conextMenuContainer = document.createElement('ul');
conextMenuContainer.id = 'contextMenu';
// create li
const firstLi = document.createElement('li');
firstLi.innerText = 'Option 1';
conextMenuContainer.appendChild(firstLi);
const lastLi = document.createElement('li');
lastLi.innerText = 'Option 2';
conextMenuContainer.appendChild(lastLi);
document.getElementById('mountNode').appendChild(conextMenuContainer);
const width = document.getElementById('mountNode').scrollWidth;
const height = document.getElementById('mountNode').scrollHeight || 500;
// 定义数据源
const data = {
// 点集
nodes: [{
id: 'node1',
label:'node1',
x: 100,
y: 200,
type:'rect',
},{
id: 'node2',
label:'node2',
x: 300,
y: 200,
type:'rect',
}],
// 边集
edges: [
// 表示一条从 node1 节点连接到 node2 节点的边
{
source: 'node1',
target: 'node2'
}
]
};
// 创建 G6 图实例
const graph = new G6.Graph({
container: 'mountNode', // 指定图画布的容器 id，与第 9 行的容器对应
// 画布宽高
width: 800,
height: 500,
linkCenter: true,
defaultNode: {
size: [40, 40],
type:'rect',
style: {
fill: '#DEE9FF',
stroke: '#5B8FF9',
},
},
modes:{
default: ['drag-canvas', 'zoom-canvas', 'drag-node'],
// 允许拖拽画布、放缩画布、拖拽节点
},
nodeStateStyles: {
// 鼠标 hover 上节点，即 hover 状态为 true 时的样式
hover: {
fill: 'lightsteelblue',
},
// 鼠标点击节点，即 click 状态为 true 时的样式
click: {
stroke: '#000',
lineWidth: 3,
},
},
// 边不同状态下的样式集合
edgeStateStyles: {
// 鼠标点击边，即 click 状态为 true 时的样式
click: {
stroke: 'steelblue',
},
},
});
//监听事件
graph.on('node:mouseenter', e => {
const nodeItem = e.item; // 获取鼠标进入的节点元素对象
graph.setItemState(nodeItem, 'hover', true); // 设置当前节点的 hover 状态为 true
});
// 鼠标离开节点
graph.on('node:mouseleave', e => {
const nodeItem = e.item; // 获取鼠标离开的节点元素对象
graph.setItemState(nodeItem, 'hover', false); // 设置当前节点的 hover 状态为 false
});
// 左键点击节点
graph.on('node:click', e => {
// 先将所有当前是 click 状态的节点置为非 click 状态
console.log(e.x)
console.log(e.x+20)
const clickNodes = graph.findAllByState('node', 'click');
clickNodes.forEach(cn => {
graph.setItemState(cn, 'click', false);
});
const nodeItem = e.item; // 获取被点击的节点元素对象
graph.setItemState(nodeItem, 'click', true); // 设置当前节点的 click 状态为 true
});
//右键点击节点
graph.on('node:contextmenu', e => {
e.preventDefault();//去除默认
e.stopPropagation();//去除冒泡
conextMenuContainer.style.left = (e.x+25)+"px";
conextMenuContainer.style.top = e.y+"px";
});
// 读取数据
graph.data(data);
// 渲染图
graph.render();
</script>
</body>
</html>
tips：本例只是初步调研G6的实例化和基本监听方法，可作为入门小demo。
（菜的一批的来看看）
注意在html上，和el表达式${}无法一起使用。不是前端框架实现。
