Cytoscape.js

Question

我有一组节点分组在父（复合）节点内。我想显示从 "outer" 节点（复合节点外的节点）到 "inner" 节点（复合节点内的节点）below 的边节点。

（约等于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
        }
    }
]

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

Cytoscape.js - draw edges below compound node

javascript

css