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

Question

我有一组节点分组在父(复合)节点内。我想显示从“外部”节点(复合节点外部的那些)到复合节点下方的“内部”节点(复合节点内部的那些)的边缘。

(大约类似于 this demo 。)

到目前为止，我已经尝试像这样设置 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 中存在错误。

Answer 1

我找到的一个解决方案是删除 z-index 标签并在 :parent 选择器上使用 z-compound-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
        }
    }
]