g6/demos/change-view.html
2019-08-20 17:17:56 +08:00

100 lines
1.9 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>重新布局不改变视窗</title>
</head>
<body>
<button id='changeView'>改变布局</button>
<div id="mountNode" style="background: #ccc;"></div>
<script src="../build/g6.js"></script>
<script src="../build//grid.js"></script>
<script>
const grid = new Grid()
const graph = new G6.TreeGraph({
plugins: [grid],
container: 'mountNode',
width: 500,
height: 500,
defaultNode: {
size: [20, 20]
},
modes: {
default: [ 'drag-node', 'drag-canvas', {
type: 'collapse-expand',
onChange(item, collapsed) {
const data = item.getModel()
data.collapsed = collapsed
return true
}
} ]
},
nodeStyle: {
default: {
fill: '#40a9ff',
stroke: '#096dd9'
}
},
edgeStyle: {
default: {
stroke: '#A3B1BF'
}
},
defaultEdge: {
shape: 'cubic-horizontal'
},
layout: {
type: 'dendrogram',
nodeSep: 50,
rankSep: 100,
direction: 'LR'
}
});
let data = {
isRoot: true,
id: 'Root',
style: {
fill: 'red'
},
children: [
{
id: 'SubTreeNode1',
raw: {},
children: [
{
id: 'SubTreeNode1.1'
}
]
},
{
id: 'SubTreeNode2',
children: [
{
id: 'SubTreeNode2.1'
},
{
id: 'SubTreeNode2.2'
}
]
}
]
};
graph.data(data)
graph.render()
graph.fitView()
document.getElementById('changeView').addEventListener('click', (evt) => {
const matrix = G6.Util.clone(graph.get('group').getMatrix())
data.children.pop()
graph.changeData(data)
graph.get('group').setMatrix(matrix)
graph.paint()
})
</script>
</body>
</html>