<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>combos demo</title>
</head>
<body>
<div id="container"></div>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.7.1/dist/g6.min.js">
</script>
<script>
const mockData = {
"nodes": [
{
"id": "0",
"label": "n0",
"class": "c0",
"x": 1000,
"y": -100,
},
{
"id": "1",
"label": "n1",
"class": "c0",
"x": 300,
"y": -10,
},
{
"id": "2",
"label": "n2",
"class": "c0",
"x": 10,
"y": 10
},
{
"id": "3",
"label": "n3",
"class": "c0",
"x": 320,
"y": -100
},
{
"id": "4",
"label": "n4",
"class": "c0",
"x": 100,
"y": 900
},
{
"id": "5",
"label": "n5",
"class": "c0",
"x": 120,
"y": 213
},
{
"id": "6",
"label": "n6",
"class": "c1",
"x": 543,
"y": 12
},
{
"id": "7",
"label": "n7",
"class": "c1",
"x": 543,
"y": -100
},
{
"id": "8",
"label": "n8",
"class": "c1",
"x": 1,
"y": 0
},
{
"id": "9",
"label": "n9",
"class": "c1",
"x": 0,
"y": -222
},
{
"id": "10",
"label": "n10",
"class": "c1",
"x": 435,
"y": 69
},
{
"id": "11",
"label": "n11",
"class": "c1",
"x": 23,
"y": 10
},
{
"id": "12",
"label": "n12",
"class": "c1",
"x": -129,
"y": 39
},
{
"id": "13",
"label": "n13",
"class": "c2",
"x": 234,
"y": 843
},
{
"id": "14",
"label": "n14",
"class": "c2",
"x": -301,
"y": 129
},
{
"id": "15",
"label": "n15",
"class": "c2",
"x": -20,
"y": -76
},
{
"id": "16",
"label": "n16",
"class": "c2",
"x": 1220,
"y": -34
},
{
"id": "17",
"label": "n17",
"class": "c2",
"x": -10,
"y": 954
},
{
"id": "18",
"label": "n18",
"class": "c2",
"x": 492,
"y": 123
},
{
"id": "19",
"label": "n19",
"class": "c2",
"x": 123,
"y": -241
}
],
combos: [
{
id: 'combo1',
type: 'circle',
label: 'combo1',
},
{
id: 'combo2',
type: 'circle',
label: 'combo2',
},
{
id: 'combo3',
type: 'rect',
label: 'combo3',
parentId: 'combo1',
}
]
};
const graph = new G6.Graph({
container: 'container',
width: 800,
height: 600,
// 必须将 groupByTypes 设置为 false，带有 combo 的图中元素的视觉层级才能合理
groupByTypes: false,
fitView: true,
fitViewPadding: [10,20,10,20],
defaultNode: {
size: 50,
},
defaultCombo: {
size: 60,
style: {
fill: '#bae637',
stroke: '#eaff8f',
lineWidth: 5,
},
labelCfg: {
position: 'center',
style: {
fontSize: 100,
}
}
},
modes: {
default: ['drag-node', 'drag-canvas', 'zoom-canvas', 'drag-combo', 'collapse-expand-combo', 'drag-node']
}
});
mockData.nodes.forEach(node => {
const rest = node.id % 3;
switch(rest){
case 0:
node.comboId = 'combo1';
break;
case 1:
node.comboId = 'combo2';
break;
default:
node.comboId = 'combo3';
break;
}
});
graph.data(mockData);
graph.render();
</script>
</body>
</html>