Винаги показвайте наслагване за ръбове в Cytoscape.js

Има ли начин винаги да се показва наслагването на крайните линии в Cytoscape.js

GIF-ът по-долу показва, че наслагването се показва, когато ръбът е активен (след избиране или докосване)

http://imgur.  com/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 canvas, нито какво наистина имате предвид под сянката. Просто знам къде да поставя точките на прекъсване. Ако търсите начин да посочите непрозрачността и дебелината на ръба, тогава този въпрос може да е полезен: stackoverflow.com/questions/27928151/   -  person xmojmr    schedule 27.01.2015
comment
Благодаря за отговорите. Редактирах въпроса и добавих анимиран gif линк, за да покажа ефекта, който желая.   -  person Christophe Willemsen    schedule 27.01.2015
comment
argh а този ? 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