Как добавить существующие классы CSS к меткам узлов в Cytoscape JS для Angular - PullRequest
Новая
       17

Как добавить существующие классы CSS к меткам узлов в Cytoscape JS для Angular

0 голосов
/ 02 апреля 2019

У меня есть единая тема CSS на протяжении всего проекта, хотя CSS узла не соответствует. Мне нужно изменить цвета меток css в зависимости от дневного и ночного режимов, как мне этого добиться? 

this.cy = cytoscape({
    container: document.getElementById(this.pageId),
    boxSelectionEnabled: false,
    autounselectify: true,
    zoomingEnabled: true,
    panningEnabled: true,
    autoungrabify: false,
    elements: this.nodes,    
    style: [{
      selector: 'node',
      style: {
        'width':'data(cpu)',
        'height': 'data(cpu)',
        //'shape': 'circle',
        'background-image': 'data(HealthImage)',
        'background-fit': 'contain contain',
        'background-color': '#f5f7fa',
        'label': 'data(' + this.nodeName + ')',
        'cssClass': 'form-group', //tried this didn't work
        "text-valign": "bottom",
        "text-halign": "center",
        "font-size": "12px",
        "text-margin-y": "8px"
      }
    }]
});

Ответы [ 2 ]

0 голосов
/ 06 июня 2019 
this.cy = cytoscape({
    container: document.getElementById(this.pageId),
    boxSelectionEnabled: false,
    autounselectify: true,
    zoomingEnabled: true,
    panningEnabled: true,
    autoungrabify: false,
    elements: this.nodes,    
    style: [{
      selector: 'node',
      style: {
        'width':'data(cpu)',
        'height': 'data(cpu)',
        //'shape': 'circle',
        'background-image': 'data(HealthImage)',
        'background-fit': 'contain contain',
        'background-color': '#f5f7fa',
        'label': 'data(' + this.nodeName + ')',
        'cssClass': 'form-group', //tried this didn't work
        "text-valign": "bottom",
        "text-halign": "center",
        "font-size": "12px",
        "text-margin-y": "8px"
      }
    }, {
      selector: '.day',
      style: { "text-background-color": "white" }
    }, {
      selector: '.night',
      style: { "text-background-color": "black" }
    }]
});

После этого вам просто нужно добавить правильный класс для каждого узла, и все готово. Также не забудьте удалить неактивный класс при добавлении другого класса. 

 cy.elements().toggleClass('day').toggleClass('night');  // maybe replace that with add/removeClass if this doesn't work
0 голосов
/ 05 апреля 2019

Вы можете установить стиль Cytoscape JS с кодами JavaScript.Может быть, вы можете установить таймер для изменения стиля или всегда проверять время и устанавливать стиль в соответствии со временем.

http://js.cytoscape.org/#cy.style

...