antv/x6在vue3 没有 xy 坐标情况下 怎么从上到下 自动布局 每个节点下 会存在多个节点 应该怎么布局

<template> 
<div ref="graphContainer" class="graph-container"></div>
</template> 
<script>
import { defineComponent, onMounted, ref } from 'vue'; 
import { Graph } from '@antv/x6'; // 示例节点数据 
const nodeData = { id: 'root', label: 'Root', children: [ { id: 'child1', label: 'Child 1', children: [ { id: 'grandchild1', label: 'Grandchild 1' }, 
{ id: 'grandchild2', label: 'Grandchild 2' }, ], }, 
{ id: 'child2', label: 'Child 2', children: [{ id: 'grandchild3', label: 'Grandchild 3' }], 
},
], 
}; 
// 计算布局的函数 
function calculateLayout(node, xOffset = 50, yOffset = 50, level = 0) { const { id, label, children } = node;
const x = xOffset + level * 150; // 根据层级动态计算x坐标 
const y = yOffset + level * 50; // 根据层级动态计算y坐标（这里可以优化为累加每个层级的高度）
return { id, x, y, width: 100, height: 40, label: { text: label }, children: children ? children.map(child => calculateLayout(child, xOffset, y + 50, level + 1)) : [], }; } // 扁平化布局结果，以便添加到图形中 
function flattenLayout(nodes) { 
return nodes.map(node => ({ ...node, children: undefined, // 去除子节点引用，因为我们将单独添加它们 })).concat(...nodes.map(node => node.children || [])); // 递归地添加子节点 } 
export default defineComponent({ name: 'X6HierarchicalLayout', setup() { 
const graphContainer = ref(null); 
let graph = null; 
onMounted(() => { 
graph = new Graph({ container: graphContainer.value, width: 800, height: 600, grid: { size: 10, visible: true }, }); 
const layout = calculateLayout(nodeData); 
const flatLayout = flattenLayout(layout); // 添加节点到图形（注意：这里应该检查重复添加的情况，并可能使用更好的方法来管理节点和边） 
flatLayout.forEach(nodeData => { graph.addNode({ ...nodeData, }); }); // 如果需要添加边，可以在这里根据节点数据来添加 }); return { graphContainer, }; }, }); 
</script> 
<style scoped> 
.graph-container { border: 1px solid #ccc; } 
</style>