test/g6
1
0
Fork 0
mirror of https://gitee.com/antv/g6.git synced 2024-12-05 05:09:07 +08:00
Code Issues Actions 7 Packages Projects Releases Wiki Activity

feat(demo): add one demo with very large nodes

Browse Source
This commit is contained in:
萧庆 2019-04-28 15:53:52 +08:00
parent 90a03d1d44
commit d803706726
1 changed files with 137 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

137
demos/nodes-large.html Normal file
View File

@ -0,0 +1,137 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
</style>
<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: {
default: ['collapse-expand', 'drag-canvas']
},
defaultNode: {
size: 16,
anchorPoints: [[0,0.5], [1,0.5]]
},
defaultEdge: {
shape: 'cubic-horizontal'
},
nodeStyle: {
default: {
fill: '#40a9ff',
stroke: '#096dd9'
}
},
edgeStyle: {
default: {
stroke: '#A3B1BF'
}
},
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();
}
})
//console.log(hideCount);
});
graph.fitView();
console.log(nodeCount);
</script>
</body>
</html>