始终在Cytoscape.js中显示边缘的叠加层

Question

有没有办法在Cytoscape.js中始终显示边线叠加

下面的gif显示边缘处于活动状态时（选择或点击后）显示叠加层

这是我目前的造型：

var cy = cytoscape({
    container: document.getElementById('cy'),
    style: cytoscape.stylesheet()
        .selector('node')
        .css({
            'background-color': '#69B8B6',
            'border-color': '#AABFB8',
            'border-width': '2px',
            'width': '35px',
            'height': '35px',
            'content': 'data(name)',
            'font-size': '11px',
            'font-weight': 'bold',
            'color': '#337AB7'
        })
        .selector('edge')
        .css({
            'target-arrow-shape': 'triangle',
            'source-arrow-shape': 'circle',
            'curve-style': 'bezier',
            //'control-point-weight': 0.5,
            'content': 'data(name)',
            'font-size': '7px',
            'line-color': '#E4860D',
            'line-style': 'dotted',
            'overlay-color': '#c0c0c0',
            'overlay-padding': '50px',
            'overlay-opacity': 100
        })
        .selector('node:selected')
        .css({
            'background-color': '#E4860D'
        })
        .selector(':active')
        .css({
            'line-color': '#E4860D',
            'line-style': 'solid',
            'overlay-color': '#c0c0c0',
            //'overlay-padding': '100px',
            'overlay-opacity': 100
        }),
    layout: {
        name: 'grid',
        padding: 10
    },
    userZoomingEnabled: false,
    ready: function(){ console.log('ready') }
});

然而，这对于非活动状态的边缘覆盖没有影响。

Answer 1

只需将overlay-*属性与样式表中所需的任何选择器一起使用（在您的情况下可能仅为edge）。