Cytoscape复合节点breadthfirst布局上下排列异常问题求助

大家好，我最近在用Cytoscape的breadthfirst（广度优先）布局做可视化，结果遇到了一个头疼的问题——当加入**复合节点（compound node）**之后，整个布局就乱套了，完全不符合我预期的设计。

我原本希望复合节点的子节点能在父节点内部或者按照层级合理排列，但实际运行后，节点的位置偏移、重叠，布局逻辑完全失效。

我的核心代码如下 #

// 初始化Cytoscape实例
const cy = cytoscape({
  container: document.getElementById('cy'),
  elements: [
    // 定义复合节点及其子节点
    { data: { id: 'parent', label: '父节点' } },
    { data: { id: 'child1', parent: 'parent', label: '子节点1' } },
    { data: { id: 'child2', parent: 'parent', label: '子节点2' } },
    // 其他独立节点与边
    { data: { id: 'nodeA', label: '节点A' } },
    { data: { id: 'nodeB', label: '节点B' } },
    { data: { id: 'edge1', source: 'parent', target: 'nodeA' } },
    { data: { id: 'edge2', source: 'nodeA', target: 'nodeB' } }
  ],
  layout: {
    name: 'breadthfirst',
    directed: true,
    padding: 10
  },
  style: [
    {
      selector: 'node',
      style: {
        'label': 'data(label)',
        'background-color': '#666',
        'text-valign': 'center',
        'text-halign': 'center',
        'color': '#fff',
        'width': 'label',
        'height': 'label',
        'padding': '10px'
      }
    },
    {
      selector: ':parent',
      style: {
        'background-color': '#222'
      }
    },
    {
      selector: 'edge',
      style: {
        'width': 2,
        'line-color': '#ccc',
        'target-arrow-color': '#ccc',
        'target-arrow-shape': 'triangle'
      }
    }
  ]
});

运行这段代码后，复合节点的子节点并没有按照广度优先的层级逻辑排列，整个布局显得非常混乱，完全达不到我想要的效果。

有没有熟悉Cytoscape布局的朋友能帮忙看看问题出在哪？或者有没有调整布局配置的方法能让复合节点在breadthfirst布局下正常工作？

内容的提问来源于stack exchange，提问作者e_p