2019-09-24 11:30:15 +08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<title>Large Tree Layout</title>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<select id="layout">
|
|
|
|
|
<option value="dendrogram">系统树</option>
|
|
|
|
|
<option value="compactBox">紧凑树</option>
|
|
|
|
|
<option value="mindmap">脑图布局</option></select>
|
|
|
|
|
<div id="mountNode"></div>
|
|
|
|
|
<script src="assets/hierarchy.js"></script>
|
|
|
|
|
<script src="../build/g6.js"></script>
|
|
|
|
|
<script>
|
|
|
|
|
let currentLayout = 'dendrogram';
|
|
|
|
|
const layouts = {
|
|
|
|
|
dendrogram: function(data) {
|
|
|
|
|
return Hierarchy.dendrogram(data, {
|
|
|
|
|
direction: 'LR',
|
|
|
|
|
// H / V / LR / RL / TB / BT
|
|
|
|
|
nodeSep: 50,
|
|
|
|
|
rankSep: 100
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
compactBox: function(data) {
|
|
|
|
|
return Hierarchy.compactBox(data, {
|
|
|
|
|
direction: 'LR',
|
|
|
|
|
getId(d) {
|
|
|
|
|
return d.id;
|
|
|
|
|
},
|
|
|
|
|
getHeight() {
|
|
|
|
|
return 16
|
|
|
|
|
},
|
|
|
|
|
getWidth() {
|
|
|
|
|
return 16
|
|
|
|
|
},
|
|
|
|
|
getVGap() {
|
|
|
|
|
return 50
|
|
|
|
|
},
|
|
|
|
|
getHGap() {
|
|
|
|
|
return 50
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
mindmap: function(data) {
|
|
|
|
|
return Hierarchy.mindmap(data, {
|
|
|
|
|
direction: 'H',
|
|
|
|
|
getHeight() {
|
|
|
|
|
return 16;
|
|
|
|
|
},
|
|
|
|
|
getWidth() {
|
|
|
|
|
return 16;
|
|
|
|
|
},
|
|
|
|
|
getVGap() {
|
|
|
|
|
return 50;
|
|
|
|
|
},
|
|
|
|
|
getHGap() {
|
|
|
|
|
return 50;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
const graph = new G6.TreeGraph({
|
|
|
|
|
container: 'mountNode',
|
|
|
|
|
width: 1000,
|
|
|
|
|
height: 800,
|
|
|
|
|
pixelRatio: 2,
|
|
|
|
|
//renderer: 'svg',
|
|
|
|
|
animate: false,
|
|
|
|
|
modes: {
|
2019-09-29 12:11:28 +08:00
|
|
|
default: ['collapse-expand', 'drag-canvas']
|
2019-09-24 11:30:15 +08:00
|
|
|
},
|
|
|
|
|
defaultNode: {
|
|
|
|
|
size: 16,
|
2019-10-10 20:01:23 +08:00
|
|
|
anchorPoints: [[0, 0.5], [1, 0.5]],
|
|
|
|
|
style: {
|
2019-09-29 12:11:28 +08:00
|
|
|
fill: '#40a9ff',
|
2019-09-24 11:30:15 +08:00
|
|
|
stroke: '#096dd9'
|
|
|
|
|
}
|
|
|
|
|
},
|
2019-10-10 20:01:23 +08:00
|
|
|
defaultEdge: {
|
|
|
|
|
shape: 'cubic-horizontal',
|
|
|
|
|
style: {
|
2019-09-29 12:11:28 +08:00
|
|
|
stroke: '#A3B1BF'
|
2019-09-24 11:30:15 +08:00
|
|
|
}
|
2019-10-10 20:02:20 +08:00
|
|
|
},
|
2019-09-24 11:30:15 +08:00
|
|
|
layout: layouts.dendrogram
|
|
|
|
|
});
|
|
|
|
|
let nodeCount = 0;
|
|
|
|
|
function generateChildren(node, count, level) {
|
|
|
|
|
//const count = parseInt(Math.random() * maxCount);
|
|
|
|
|
const rst = [];
|
|
|
|
|
for (var i = 0; i < count; i++) {
|
|
|
|
|
nodeCount++;
|
|
|
|
|
rst.push({
|
|
|
|
|
id: node.id + i,
|
|
|
|
|
label: node.id + '-' + i
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
if (level <= 3) {
|
|
|
|
|
rst.forEach(subNode => {
|
|
|
|
|
generateChildren(subNode, count, level + 1)
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
node.children = rst;
|
|
|
|
|
}
|
|
|
|
|
const data = {
|
|
|
|
|
isRoot: true,
|
|
|
|
|
id: '0',
|
|
|
|
|
style: {
|
|
|
|
|
fill: 'red'
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
generateChildren(data, 6, 0);
|
|
|
|
|
|
|
|
|
|
graph.data(data);
|
|
|
|
|
graph.render();
|
|
|
|
|
graph.on('beforepaint', () => {
|
|
|
|
|
let hideCount = 0;
|
|
|
|
|
const nodes = graph.getNodes();
|
|
|
|
|
nodes.forEach(node => {
|
|
|
|
|
const model = node.get('model');
|
|
|
|
|
const point = graph.getCanvasByPoint(model.x, model.y);
|
|
|
|
|
const nodeGroup = node.get('group');
|
|
|
|
|
if (point.x < 0 || point.y < 0 || point.x > 1000 || point.y > 800) {
|
|
|
|
|
hideCount++;
|
|
|
|
|
node.hide();
|
|
|
|
|
} else {
|
|
|
|
|
node.show();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const edges = graph.getEdges();
|
|
|
|
|
edges.forEach(edge => {
|
|
|
|
|
const sourceNode = edge.get('sourceNode');
|
|
|
|
|
const targetNode = edge.get('targetNode');
|
|
|
|
|
if (!sourceNode.get('visible') && !targetNode.get('visible')) {
|
|
|
|
|
edge.hide();
|
|
|
|
|
} else {
|
|
|
|
|
edge.show();
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
graph.fitView();
|
|
|
|
|
console.log(nodeCount);
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
