@zhaoquanju/g6 v1.1.0

const data = { nodes: { id: "0", label: "0", }, { id: "1", label: "1", }, { id: "2", label: "2", }, { id: "3", label: "3", }, { id: "4", label: "4", }, { id: "5", label: "5", }, { id: "6", label: "6", }, { id: "7", label: "7", }, { id: "8", label: "8", }, { id: "9", label: "9", }, { id: "10", label: "10", }, { id: "11", label: "11", }, { id: "12", label: "12", }, { id: "13", label: "13", }, { id: "14", label: "14", }, { id: "15", label: "15", }, { id: "16", label: "16", }, { id: "17", label: "17", }, { id: "18", label: "18", }, { id: "19", label: "19", }, { id: "20", label: "20", }, { id: "21", label: "21", }, { id: "22", label: "22", }, { id: "23", label: "23", }, { id: "24", label: "24", }, { id: "25", label: "25", }, { id: "26", label: "26", }, { id: "27", label: "27", }, { id: "28", label: "28", }, { id: "29", label: "29", }, { id: "30", label: "30", }, { id: "31", label: "31", }, { id: "32", label: "32", }, { id: "33", label: "33", }, , edges: { source: "0", target: "1", }, { source: "0", target: "2", }, { source: "0", target: "3", }, { source: "0", target: "4", }, { source: "0", target: "5", }, { source: "0", target: "7", }, { source: "0", target: "8", }, { source: "0", target: "9", }, { source: "0", target: "10", }, { source: "0", target: "11", }, { source: "0", target: "13", }, { source: "0", target: "14", }, { source: "0", target: "15", }, { source: "0", target: "16", }, { source: "2", target: "3", }, { source: "4", target: "5", }, { source: "4", target: "6", }, { source: "5", target: "6", }, { source: "7", target: "13", }, { source: "8", target: "14", }, { source: "9", target: "10", }, { source: "10", target: "22", }, { source: "10", target: "14", }, { source: "10", target: "12", }, { source: "10", target: "24", }, { source: "10", target: "21", }, { source: "10", target: "20", }, { source: "11", target: "24", }, { source: "11", target: "22", }, { source: "11", target: "14", }, { source: "12", target: "13", }, { source: "16", target: "17", }, { source: "16", target: "18", }, { source: "16", target: "21", }, { source: "16", target: "22", }, { source: "17", target: "18", }, { source: "17", target: "20", }, { source: "18", target: "19", }, { source: "19", target: "20", }, { source: "19", target: "33", }, { source: "19", target: "22", }, { source: "19", target: "23", }, { source: "20", target: "21", }, { source: "21", target: "22", }, { source: "22", target: "24", }, { source: "22", target: "25", }, { source: "22", target: "26", }, { source: "22", target: "23", }, { source: "22", target: "28", }, { source: "22", target: "30", }, { source: "22", target: "31", }, { source: "22", target: "32", }, { source: "22", target: "33", }, { source: "23", target: "28", }, { source: "23", target: "27", }, { source: "23", target: "29", }, { source: "23", target: "30", }, { source: "23", target: "31", }, { source: "23", target: "33", }, { source: "32", target: "33", }, , };

let graph = new G6Graph("container"); // 测试数据初始化和渲染 graph.render(data); // 测试布局切换 graph.layoutChange(layout.circular); // 测试查找节点 let nodes = graph.filterNode("25"); // 测试节点高亮 graph.highLight(nodes0, { shadowOffsetX: 0, shadowOffsetY: 0, shadowColor: "#ffdb48", shadowBlur: 15, }); // 测试所有事件 // 1、测试边的单击事件 graph.edgeClick((event) => { console.log(event); }); // 2、测试节点的单击事件 graph.nodeClick((event) => { let node = event.item; // 测试节点删除 graph.deleteNode(node); }); // 3、测试节点的右击事件 graph.nodeContextmenu((event) => { console.log(event); }); // 4、测试画布的单击事件 graph.graphClick((event) => { console.log(event); });

setTimeout(() => { // 测试节点状态恢复 graph.reset((node) => { let model = node.get("model"); model.style = { shadowOffsetX: 0, shadowOffsetY: 0, shadowColor: "transparent", shadowBlur: 0, }; // 测试节点状态更新 graph.update(node, model); }, null); }, 5000);