mirror of
https://gitee.com/antv/g6.git
synced 2024-12-05 05:09:07 +08:00
166 lines
3.3 KiB
HTML
166 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Title</title>
|
||
</head>
|
||
<style>
|
||
</style>
|
||
<body>
|
||
<div id="mountNode"></div>
|
||
<script src="../build/g6.js"></script>
|
||
<script>
|
||
const graph = new G6.TreeGraph({
|
||
container: 'mountNode',
|
||
width: 500,
|
||
height: 500,
|
||
renderer: 'svg',
|
||
modes: {
|
||
default: ['collapse-expand', 'drag-canvas']
|
||
},
|
||
fitView: true,
|
||
layout: {
|
||
type: 'compactBox',
|
||
direction: 'LR',
|
||
defalutPosition: [],
|
||
getId(d) { return d.id; },
|
||
getHeight() { return 16 },
|
||
getWidth() { return 16 },
|
||
getVGap() { return 50 },
|
||
getHGap() { return 100 }
|
||
}
|
||
});
|
||
graph.node(node => {
|
||
return {
|
||
size: 16,
|
||
anchorPoints: [[0,0.5], [1,0.5]],
|
||
style: {
|
||
fill: '#40a9ff',
|
||
stroke: '#096dd9'
|
||
},
|
||
label: node.id,
|
||
labelCfg: {
|
||
position: node.children && node.children.length > 0 ? 'left' : 'right'
|
||
}
|
||
}
|
||
});
|
||
let i = 0;
|
||
graph.edge(() => {
|
||
i++;
|
||
return {
|
||
shape: 'cubic-horizontal',
|
||
color: '#A3B1BF',
|
||
label: i
|
||
}
|
||
});
|
||
const data = {
|
||
isRoot: true,
|
||
id: 'Root',
|
||
style: {
|
||
fill: 'red'
|
||
},
|
||
children: [
|
||
{
|
||
id: 'SubTreeNode1',
|
||
raw: {},
|
||
children: [
|
||
{
|
||
id: 'SubTreeNode1.1'
|
||
},
|
||
{
|
||
id: 'SubTreeNode1.2',
|
||
children: [
|
||
{
|
||
id: 'SubTreeNode1.2.1'
|
||
},
|
||
{
|
||
id: 'SubTreeNode1.2.2'
|
||
},
|
||
{
|
||
id: 'SubTreeNode1.2.3'
|
||
}
|
||
]
|
||
}
|
||
]
|
||
},
|
||
{
|
||
id: 'SubTreeNode2',
|
||
children: [
|
||
{
|
||
id: 'SubTreeNode2.1'
|
||
}
|
||
]
|
||
}, {
|
||
id: 'SubTreeNode3',
|
||
children: [
|
||
{
|
||
id: 'SubTreeNode3.1'
|
||
},
|
||
{
|
||
id: 'SubTreeNode3.2'
|
||
},
|
||
{
|
||
id: 'SubTreeNode3.3'
|
||
}
|
||
]
|
||
}, {
|
||
id: 'SubTreeNode4'
|
||
}, {
|
||
id: 'SubTreeNode5'
|
||
}, {
|
||
id: 'SubTreeNode6'
|
||
}
|
||
]
|
||
};
|
||
graph.data(data);
|
||
graph.render();
|
||
|
||
let count = 0;
|
||
|
||
graph.on('node:click', evt => {
|
||
const { item } = evt
|
||
const nodeId = item.get('id');
|
||
const model = item.getModel()
|
||
const children = model.children;
|
||
if(!children || children.length === 0) {
|
||
const childData = [
|
||
{
|
||
id: `child-data-${count}`,
|
||
shape: 'rect',
|
||
children: [
|
||
{
|
||
id: `x-${count}`
|
||
},
|
||
{
|
||
id: `y-${count}`
|
||
}
|
||
]
|
||
},
|
||
{
|
||
id: `child-data1-${count}`,
|
||
children: [
|
||
{
|
||
id: `x1-${count}`
|
||
},
|
||
{
|
||
id: `y1-${count}`
|
||
}
|
||
]
|
||
}
|
||
];
|
||
|
||
const parentData = graph.findDataById(nodeId);
|
||
if (!parentData.children) {
|
||
parentData.children = [];
|
||
}
|
||
// 如果childData是一个数组，则直接赋值给parentData.children
|
||
// 如果是一个对象，则使用parentData.children.push(obj)
|
||
parentData.children = childData
|
||
graph.changeData()
|
||
count++
|
||
}
|
||
})
|
||
</script>
|
||
</body>
|
||
</html>
|