2019-08-23 19:42:09 +08:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8">
|
2019-09-09 17:16:41 +08:00
|
|
|
|
<title>Rect节点分组</title>
|
2019-08-23 19:42:09 +08:00
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div id="mountNode"></div>
|
|
|
|
|
|
<script src="../build/g6.js"></script>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
/**
|
|
|
|
|
|
* 该案例演示以下功能：
|
|
|
|
|
|
* 1、渲染群组所需要的数据结构；
|
|
|
|
|
|
* 2、如何拖动一个群组；
|
|
|
|
|
|
* 3、将节点从群组中拖出；
|
|
|
|
|
|
* 4、将节点拖入到某个群组中；
|
|
|
|
|
|
* 5、拖出拖入节点后动态改变群组大小。
|
|
|
|
|
|
*/
|
2019-09-09 17:16:41 +08:00
|
|
|
|
G6.registerNode('rectNode', {
|
|
|
|
|
|
draw(cfg, group) {
|
|
|
|
|
|
const keyShape = group.addShape('rect', {
|
2019-08-23 19:42:09 +08:00
|
|
|
|
attrs: {
|
|
|
|
|
|
x: 0,
|
|
|
|
|
|
y: 0,
|
2019-09-09 17:16:41 +08:00
|
|
|
|
width: 80,
|
|
|
|
|
|
height: 50,
|
2019-08-23 19:42:09 +08:00
|
|
|
|
fill: '#87e8de'
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
|
2019-09-09 17:16:41 +08:00
|
|
|
|
const text = group.addShape('text', {
|
|
|
|
|
|
attrs: {
|
|
|
|
|
|
x: 35,
|
|
|
|
|
|
y: 25,
|
|
|
|
|
|
textAlign: 'center',
|
|
|
|
|
|
fill: 'blue',
|
|
|
|
|
|
text: cfg.label
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
|
2019-08-23 19:42:09 +08:00
|
|
|
|
return keyShape;
|
|
|
|
|
|
}
|
2019-09-09 17:16:41 +08:00
|
|
|
|
});
|
2019-08-23 19:42:09 +08:00
|
|
|
|
|
|
|
|
|
|
const graph = new G6.Graph({
|
|
|
|
|
|
container: 'mountNode',
|
|
|
|
|
|
width: 800,
|
|
|
|
|
|
height: 600,
|
2019-10-30 15:25:43 +08:00
|
|
|
|
fitView: true,
|
2019-08-23 19:42:09 +08:00
|
|
|
|
defaultNode: {
|
2019-09-09 17:16:41 +08:00
|
|
|
|
shape: 'rectNode',
|
|
|
|
|
|
labelCfg: {
|
|
|
|
|
|
position: 'center'
|
|
|
|
|
|
}
|
2019-08-23 19:42:09 +08:00
|
|
|
|
},
|
|
|
|
|
|
defaultEdge: {
|
2019-09-09 17:16:41 +08:00
|
|
|
|
color: '#bae7ff',
|
|
|
|
|
|
style: {
|
|
|
|
|
|
endArrow: true
|
|
|
|
|
|
}
|
2019-08-23 19:42:09 +08:00
|
|
|
|
},
|
|
|
|
|
|
modes: {
|
2019-10-15 14:58:39 +08:00
|
|
|
|
default: [ 'drag-group', 'drag-node-with-group', 'collapse-expand-group' ]
|
2019-09-09 17:16:41 +08:00
|
|
|
|
},
|
|
|
|
|
|
groupType: 'rect'
|
2019-08-23 19:42:09 +08:00
|
|
|
|
});
|
|
|
|
|
|
|
2019-09-09 17:16:41 +08:00
|
|
|
|
const data = {
|
2019-08-23 19:42:09 +08:00
|
|
|
|
nodes: [
|
|
|
|
|
|
{
|
|
|
|
|
|
id: 'node6',
|
|
|
|
|
|
groupId: 'group3',
|
|
|
|
|
|
label: 'node6-group3',
|
|
|
|
|
|
x: 100,
|
|
|
|
|
|
y: 300,
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
id: 'node1',
|
|
|
|
|
|
label: 'node1-group1',
|
|
|
|
|
|
groupId: 'group1',
|
|
|
|
|
|
x: 100,
|
|
|
|
|
|
y: 100
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
id: 'node2',
|
|
|
|
|
|
label: 'node2-group2',
|
2019-09-09 17:16:41 +08:00
|
|
|
|
groupId: 'p2',
|
2019-08-23 19:42:09 +08:00
|
|
|
|
x: 150,
|
|
|
|
|
|
y: 200
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
id: 'node3',
|
|
|
|
|
|
label: 'node3-group2',
|
2019-10-15 14:58:39 +08:00
|
|
|
|
// groupId: 'group2',
|
2019-08-23 19:42:09 +08:00
|
|
|
|
x: 300,
|
|
|
|
|
|
y: 100
|
|
|
|
|
|
},
|
2019-10-15 14:58:39 +08:00
|
|
|
|
{
|
|
|
|
|
|
id: 'node4',
|
|
|
|
|
|
label: 'node6-group5',
|
|
|
|
|
|
groupId: 'group5',
|
|
|
|
|
|
x: 450,
|
|
|
|
|
|
y: 200
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
id: 'node8',
|
|
|
|
|
|
label: 'node8-group5',
|
|
|
|
|
|
groupId: 'group5',
|
|
|
|
|
|
x: 400,
|
|
|
|
|
|
y: 100
|
|
|
|
|
|
},
|
2019-08-23 19:42:09 +08:00
|
|
|
|
],
|
|
|
|
|
|
edges: [
|
|
|
|
|
|
{
|
|
|
|
|
|
source: 'node1',
|
|
|
|
|
|
target: 'node2'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
source: 'node2',
|
|
|
|
|
|
target: 'node3'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
2019-09-09 17:16:41 +08:00
|
|
|
|
source: 'node1',
|
|
|
|
|
|
target: 'node3'
|
2019-08-23 19:42:09 +08:00
|
|
|
|
},
|
2019-09-09 17:16:41 +08:00
|
|
|
|
{
|
|
|
|
|
|
source: 'node6',
|
|
|
|
|
|
target: 'node1'
|
2019-10-24 21:16:07 +08:00
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
source: 'group5-custom-node',
|
|
|
|
|
|
target: 'p2-custom-node'
|
2019-09-09 17:16:41 +08:00
|
|
|
|
}
|
|
|
|
|
|
],
|
|
|
|
|
|
groups: [
|
2019-08-23 19:42:09 +08:00
|
|
|
|
{
|
|
|
|
|
|
id: 'group3',
|
2019-10-14 14:25:22 +08:00
|
|
|
|
parentId: 'p2',
|
|
|
|
|
|
title: {
|
|
|
|
|
|
text: '我的第一个群组',
|
|
|
|
|
|
stroke: '#444',
|
|
|
|
|
|
offsetX: 0,
|
|
|
|
|
|
offsetY: 0
|
|
|
|
|
|
},
|
2019-08-23 19:42:09 +08:00
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
id: 'p2',
|
2019-10-14 14:25:22 +08:00
|
|
|
|
title: {
|
2019-10-24 21:16:07 +08:00
|
|
|
|
text: '我的第2个群组',
|
2019-10-14 14:25:22 +08:00
|
|
|
|
stroke: '#444',
|
|
|
|
|
|
offsetX: 0,
|
|
|
|
|
|
offsetY: 0
|
|
|
|
|
|
},
|
2019-10-15 14:58:39 +08:00
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
id: 'group5'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
id: 'group1'
|
2019-08-23 19:42:09 +08:00
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
graph.data(data)
|
|
|
|
|
|
graph.render()
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
