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

Question

有没有办法一直显示边线叠加Cytoscape.js

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

这是我当前的样式：

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）。

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

Always show overlay for edges in Cytoscape.js

javascript

overlay

canvas

graph

cytoscape.js