Javascript Cytoscape.js-在复合节点下绘制边

我在父（复合）节点中分组了一组节点。我希望在复合节点下方显示从“外部”节点（复合节点外部的节点）到“内部”节点（复合节点内部的节点）的边

（大致相同。）

到目前为止，我已经尝试像这样设置

z-index

属性，将

z-index-compare

设置为

manual

，但它不起作用：

style: [
    {
        selector: 'node',
        style: {
            'z-index-compare': 'manual',
            'width': 10,
            'height': 10,
            'background-color': '#46A',
            'z-index': 3
        }
    },
    {
        selector: ':parent',
        style: {
            'z-index-compare': 'manual',
            'background-color': '#CDF',
            'z-index': 9
        }
    },
    {
        selector: 'edge',
        style: {
            'z-index-compare': 'manual',
            'width': 1,
            'line-color': '#BCE',
            'z-index': 1
        }
    },
    {
        selector: '.dense',
        style: {
            'z-index-compare': 'manual',
            'width': 0.5,
            'z-index': 1
        }
    }
]

---

Cytoscape.js的文档没有说明在哪里指定

z-index-compare

属性，因此我的CSS中可能有错误。

我找到的一个解决方案是删除

z-index

标记，并在

：parent

选择器上使用

z-composite-depth

，如下所示：

style: [
    {
        selector: 'node',
        style: {
            'width': 10,
            'height': 10,
            'background-color': '#46A'
        }
    },
    {
        selector: ':parent',
        style: {
            'z-compound-depth': 'top',
            'background-color': '#CDF'
        }
    },
    {
        selector: 'edge',
        style: {
            'width': 1,
            'line-color': '#BCE'
        }
    },
    {
        selector: '.dense',
        style: {
            'width': 0.5
        }
    }
]

---

我找到的一个解决方案是删除

z-index

标记，并在

：parent

选择器上使用

z-composite-depth

，如下所示：

style: [
    {
        selector: 'node',
        style: {
            'width': 10,
            'height': 10,
            'background-color': '#46A'
        }
    },
    {
        selector: ':parent',
        style: {
            'z-compound-depth': 'top',
            'background-color': '#CDF'
        }
    },
    {
        selector: 'edge',
        style: {
            'width': 1,
            'line-color': '#BCE'
        }
    },
    {
        selector: '.dense',
        style: {
            'width': 0.5
        }
    }
]