Question

我有一组在父（复合）节点内分组的节点。我想显示＆＃34;外部＆＃34;的边缘。节点（复合节点之外的节点）到＆＃34;内部＆＃34;节点（复合节点内的节点）低于复合节点。

（大约类似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代码并在z-compound-depth选择器上使用:parent，如下所示：

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 - 在复合节点下绘制边

1 个答案: