2019-09-24 14:12:52 +08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<title>Custom Random Layout</title>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<div id="description">自定义布局，根据数据中节点的属性分配随机坐标，
|
|
|
|
|
cluster 为 a、b、c、d 的节点分别放置在左上角、右上角、左下角、右下角中</div>
|
|
|
|
|
<div id="mountNode"></div>
|
|
|
|
|
<script src="../build/g6.js"></script>
|
|
|
|
|
<script>
|
|
|
|
|
const data = {
|
|
|
|
|
"nodes": [{
|
|
|
|
|
"id": "0",
|
|
|
|
|
"label": "0",
|
|
|
|
|
"cluster": "a"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": "1",
|
|
|
|
|
"label": "1",
|
|
|
|
|
"cluster": "b"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": "2",
|
|
|
|
|
"label": "2",
|
|
|
|
|
"cluster": "a"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": "3",
|
|
|
|
|
"label": "3",
|
|
|
|
|
"cluster": "a"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": "4",
|
|
|
|
|
"label": "4",
|
|
|
|
|
"cluster": "c"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": "5",
|
|
|
|
|
"label": "5",
|
|
|
|
|
"cluster": "c"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": "6",
|
|
|
|
|
"label": "6",
|
|
|
|
|
"cluster": "c"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": "7",
|
|
|
|
|
"label": "7",
|
|
|
|
|
"cluster": "b"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": "8",
|
|
|
|
|
"label": "8",
|
|
|
|
|
"cluster": "d"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id": "9",
|
|
|
|
|
"label": "9",
|
|
|
|
|
"cluster": "d"
|
|
|
|
|
}],
|
|
|
|
|
"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": "2",
|
|
|
|
|
"target": "3"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"source": "4",
|
|
|
|
|
"target": "5"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"source": "4",
|
|
|
|
|
"target": "6"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"source": "5",
|
|
|
|
|
"target": "6"
|
|
|
|
|
}]
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
G6.registerLayout('myLayout', {
|
2019-09-28 14:00:18 +08:00
|
|
|
execute() {
|
2019-09-24 14:12:52 +08:00
|
|
|
const self = this;
|
|
|
|
|
const nodes = self.nodes;
|
|
|
|
|
const clusterRectRatio = 1 / 5;
|
|
|
|
|
const padding = 50;
|
|
|
|
|
nodes.forEach(node => {
|
|
|
|
|
let pos = [ 0, 0 ];
|
|
|
|
|
switch (node.cluster) {
|
|
|
|
|
case 'a': {
|
|
|
|
|
pos = randomInRange(
|
|
|
|
|
[ padding, self.width * clusterRectRatio ],
|
|
|
|
|
[ padding, self.height * clusterRectRatio ]
|
|
|
|
|
);
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
case 'b': {
|
|
|
|
|
pos = randomInRange(
|
|
|
|
|
[ self.width * (1 - clusterRectRatio), self.width - padding ],
|
|
|
|
|
[ padding, self.height * clusterRectRatio ]
|
|
|
|
|
);
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
case 'c': {
|
|
|
|
|
pos = randomInRange(
|
|
|
|
|
[ padding, self.width * clusterRectRatio ],
|
|
|
|
|
[ self.height * (1 - clusterRectRatio), self.height - padding ]
|
|
|
|
|
);
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
case 'd': {
|
|
|
|
|
pos = randomInRange(
|
|
|
|
|
[ self.width * (1 - clusterRectRatio), self.width - padding ],
|
|
|
|
|
[ self.height * (1 - clusterRectRatio), self.height - padding ]
|
|
|
|
|
);
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
node.x = pos[0];
|
|
|
|
|
node.y = pos[1];
|
|
|
|
|
});
|
|
|
|
|
}
|
2019-09-28 16:23:45 +08:00
|
|
|
});
|
2019-09-24 14:12:52 +08:00
|
|
|
|
|
|
|
|
const graph = new G6.Graph({
|
|
|
|
|
container: 'mountNode',
|
|
|
|
|
width: 800,
|
|
|
|
|
height: 600,
|
|
|
|
|
layout: {
|
|
|
|
|
type: 'myLayout'
|
|
|
|
|
},
|
|
|
|
|
animate: true,
|
|
|
|
|
modes: {
|
2019-09-29 12:11:28 +08:00
|
|
|
default: ['drag-node']
|
2019-09-24 14:12:52 +08:00
|
|
|
},
|
|
|
|
|
defaultNode: {
|
|
|
|
|
size: [20, 20],
|
|
|
|
|
color: 'steelblue'
|
|
|
|
|
},
|
|
|
|
|
defaultEdge: {
|
|
|
|
|
size: 1,
|
|
|
|
|
color: '#e2e2e2'
|
|
|
|
|
},
|
|
|
|
|
nodeStyle: {
|
2019-09-29 12:11:28 +08:00
|
|
|
default: {
|
|
|
|
|
lineWidth: 2,
|
2019-09-24 14:12:52 +08:00
|
|
|
fill: '#fff'
|
|
|
|
|
},
|
|
|
|
|
selected: {
|
|
|
|
|
fill: 'steelblue'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
edgeStyle: {
|
2019-09-29 12:11:28 +08:00
|
|
|
default: {
|
|
|
|
|
endArrow: {
|
|
|
|
|
path: 'M 4,0 L -4,-4 L -4,4 Z',
|
2019-09-24 14:12:52 +08:00
|
|
|
d: 4
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
graph.data(data);
|
|
|
|
|
graph.render();
|
|
|
|
|
|
|
|
|
|
// make the graph re-layout when the cluster info changed
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
data.nodes[0].cluster = 'd';
|
|
|
|
|
graph.layout();
|
|
|
|
|
}, 2000);
|
|
|
|
|
|
|
|
|
|
// generage random position with ranges of x and y
|
|
|
|
|
function randomInRange(xRange, yRange) {
|
|
|
|
|
const xScale = xRange[1] - xRange[0];
|
|
|
|
|
const yScale = yRange[1] - yRange[0];
|
|
|
|
|
const x = Math.random() * xScale + xRange[0];
|
|
|
|
|
const y = Math.random() * yScale + yRange[0];
|
|
|
|
|
return [ x, y ];
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
