mirror of
https://gitee.com/antv/g6.git
synced 2024-12-05 05:09:07 +08:00
169 lines
3.2 KiB
HTML
169 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>收起/展开群组</title>
|
||
</head>
|
||
<body>
|
||
<div id="tip">双击群组收起/展开</div>
|
||
<div id="mountNode"></div>
|
||
<script src="../build/g6.js"></script>
|
||
<script>
|
||
/**
|
||
* 该案例演示以下功能：
|
||
* 1、双击收起群组；
|
||
* 2、双击展开群组。
|
||
*/
|
||
G6.registerNode('circleNode', {
|
||
drawShape(cfg, group) {
|
||
const keyShape = group.addShape('circle', {
|
||
attrs: {
|
||
x: 0,
|
||
y: 0,
|
||
r: 30,
|
||
fill: '#87e8de'
|
||
}
|
||
});
|
||
|
||
return keyShape;
|
||
}
|
||
}, 'circle');
|
||
|
||
const graph = new G6.Graph({
|
||
container: 'mountNode',
|
||
width: 800,
|
||
height: 600,
|
||
defaultNode: {
|
||
shape: 'circleNode'
|
||
},
|
||
defaultEdge: {
|
||
color: '#bae7ff'
|
||
},
|
||
modes: {
|
||
default: [ 'drag-canvas', 'zoom-canvas', 'collapse-expand-group' ]
|
||
},
|
||
groupStyle: {
|
||
default: {
|
||
lineWidth: 2,
|
||
stroke: '#A3B1BF',
|
||
radius: 10,
|
||
lineDash: [ 5, 5 ],
|
||
strokeOpacity: 0.9,
|
||
fill: '#F3F9FF',
|
||
fillOpacity: 0.8,
|
||
opacity: 0.8
|
||
},
|
||
hover: {
|
||
stroke: '#faad14',
|
||
fill: '#ffe58f',
|
||
fillOpacity: 0.3,
|
||
opacity: 0.3,
|
||
lineWidth: 3
|
||
},
|
||
// 收起状态样式
|
||
collapseStyle: {
|
||
r: 50,
|
||
// lineDash: [ 5, 5 ],
|
||
stroke: '#ffa39e',
|
||
lineWidth: 3,
|
||
fill: '#ffccc7'
|
||
}
|
||
}
|
||
});
|
||
|
||
const data = {
|
||
nodes: [
|
||
{
|
||
id: 'node6',
|
||
groupId: 'group3',
|
||
label: 'node6-group3',
|
||
x: 500,
|
||
y: 400
|
||
},
|
||
{
|
||
id: 'node1',
|
||
label: 'node1-group1',
|
||
groupId: 'group1',
|
||
x: 100,
|
||
y: 100
|
||
},
|
||
{
|
||
id: 'node9',
|
||
label: 'node9-p1',
|
||
groupId: 'p1',
|
||
x: 300,
|
||
y: 210
|
||
},
|
||
{
|
||
id: 'node2',
|
||
label: 'node2-group2',
|
||
groupId: 'group1',
|
||
x: 150,
|
||
y: 200
|
||
},
|
||
{
|
||
id: 'node3',
|
||
label: 'node3-group2',
|
||
groupId: 'group2',
|
||
x: 300,
|
||
y: 100
|
||
},
|
||
{
|
||
id: 'node7',
|
||
groupId: 'p1',
|
||
label: 'node7-p1',
|
||
x: 200,
|
||
y: 200
|
||
},
|
||
{
|
||
id: 'node10',
|
||
label: 'node10-p2',
|
||
groupId: 'p2',
|
||
x: 400,
|
||
y: 410
|
||
}
|
||
],
|
||
edges: [
|
||
{
|
||
source: 'node1',
|
||
target: 'node2'
|
||
},
|
||
{
|
||
source: 'node2',
|
||
target: 'node3'
|
||
}
|
||
],
|
||
groups: [
|
||
{
|
||
id: 'group1',
|
||
title: '1',
|
||
parentId: 'p1'
|
||
},
|
||
{
|
||
id: 'group2',
|
||
title: '2',
|
||
parentId: 'p1'
|
||
},
|
||
{
|
||
id: 'group3',
|
||
title: '2',
|
||
parentId: 'p2'
|
||
},
|
||
{
|
||
id: 'p1',
|
||
title: '3'
|
||
},
|
||
{
|
||
id: 'p2',
|
||
title: '3'
|
||
}
|
||
]
|
||
};
|
||
|
||
graph.data(data)
|
||
graph.render()
|
||
|
||
</script>
|
||
</body>
|
||
</html>
|
||
|