Всегда показывать наложение для краев в Cytoscape.js

Есть ли способ всегда показывать наложение линии края в Cytoscape.js

На гифке ниже показано, что наложение отображается, когда край активен (после выбора или касания).

http: // imgur.  ru / MoumiYW

Вот мой текущий стиль:

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

Однако это не влияет на наложение краев для неактивных состояний.


person Christophe Willemsen    schedule 26.01.2015    source источник
comment
Вы можете увидеть, как работает рисование краев, в github.com/cytoscape/cytoscape.js/blob/v2.3.8/src/extensions/   -  person xmojmr    schedule 27.01.2015
comment
Спасибо, что указали мне на это, насколько я понимаю, мне нужно указать цвета наложения, верно? кажется, что это наложение появляется только тогда, когда я выбираю край.   -  person Christophe Willemsen    schedule 27.01.2015
comment
Я не знаю, каков будет ответ, ни как должен выглядеть код рендеринга холста HTML5, ни то, что вы на самом деле подразумеваете под тенью. Я просто знаю, где поставить точки останова. Если вы ищете способ указать непрозрачность и толщину края, может быть полезен этот вопрос: stackoverflow.com/questions/27928151/   -  person xmojmr    schedule 27.01.2015
comment
Спасибо за ответы. Я отредактировал вопрос и добавил анимированную гифку, чтобы показать желаемый эффект.   -  person Christophe Willemsen    schedule 27.01.2015
comment
ага, а этот? imgur.com/MoumiYW   -  person Christophe Willemsen    schedule 27.01.2015


Ответы (1)


Просто используйте свойства overlay-* с любым селектором, который вы хотите в своей таблице стилей (возможно, просто edge в вашем случае ).

person maxkfranz    schedule 30.01.2015
comment
Я не могу вживить это .... может ли кто-нибудь поиграться. или пример - person Asad Ali Khan; 28.04.2018
comment
Я хочу отображать наложение, пока выбран узел. Я пробовал использовать этот селектор: node: selected, style: {overlay-color: red} наложение исчезает после того, как действие прекращается. Моя конечная цель - создать эффект, который не влияет на исходные свойства узлов, такие как цвет, форма, размер и т. Д., Например pbs.twimg.com/media/DuY9pY4WsAULxyD.jpg:large - person canbax; 19.03.2019
comment
Не пропускайте свойства, если не знаете, какие значения используются по умолчанию. В общем, вы должны явно указывать каждое свойство, если оно важно для вашего приложения, так же, как и для css в dom. - person maxkfranz; 25.03.2019