如何将预先存在的 css 类附加到 Cytoscape JS 中的节点标签以获取 Angular

Question

我在整个项目中有一个统一的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"
      }
    }]
});

Answer 1

您可以使用javascript代码设置cytoscape js样式。也许您可以设置一个计时器来更改样式，或者始终检查时间并根据时间设置样式。

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

Answer 2

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" }
    }]
});

在此之后，您只需向每个节点添加正确的 class 即可。另外，记得在添加其他 class.

时删除不活动的 class

 cy.elements().toggleClass('day').toggleClass('night');  // maybe replace that with add/removeClass if this doesn't work

如何将预先存在的 css 类附加到 Cytoscape JS 中的节点标签以获取 Angular

How to append pre-existing css classes to node labels in Cytoscape JS for Angular

css

class

typescript

cytoscape.js

angular

如何将预先存在的 css 类 附加到 Cytoscape JS 中的节点标签以获取 Angular

How to append pre-existing css classes to node labels in Cytoscape JS for Angular

css

class

typescript

cytoscape.js

angular

如何将预先存在的 css 类附加到 Cytoscape JS 中的节点标签以获取 Angular