始终在Cytoscape.js中显示边缘的叠加层 [英] Always show overlay for edges in Cytoscape.js

问题描述

是否有一种方法可以始终在Cytoscape.js中显示边缘线叠加层

Is there a way to always show the edge line overlay in Cytoscape.js

下面的gif显示，当边缘处于活动状态时(选择或点击后)，将显示叠加层

The gif below show that the overlay is shown when the edge is active (after select or tap)

这是我目前使用的样式:

Here is the current styling I have :

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') }
});

但是对于非活动状态，这不会影响边缘覆盖.

However this has no effect of the edge overlay for non active states.

推荐答案

只需使用 overlay-* 属性以及您想要的样式表中的任何选择器(在您的情况下，可能只是 edge ).

这篇关于始终在Cytoscape.js中显示边缘的叠加层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！