如何使类在Cytoscape.js中工作

Question

我正在尝试向节点添加一个类，以使我的所有CSS都放在样式表文件中，而不是在javascrpt声明中。

  var values = {
    nodes: [
      { data: { id: 'explore'}, 
        classes: 'ClassName1'
      },
      { data: { id: 'discover' } }
    ],
    edges: [
      { data: { source: 'explore', target: 'discover' } }
    ]
};

您可以看到我正在添加类和类名，但是什么也没有发生。

Answer 1

您应该使用选择器，这是解决方案：

        var cy = cytoscape({
            container: this.div[0],
            style: cytoscape.stylesheet()
            .selector(".ClassName1")
                .css({
                    'background-color': 'red',
                })        ,
            elements: values ,
            layout: 'MyLayout'
        });
        cy.layout();

Answer 2

DaNeSh提供的答案很好。但让我提供详细的解释。

步骤1：创建HTML div（称为“ cy”）。

步骤2：在JS内部

var cy = cytoscape({
                container: document.getElementById('cy')
                style: [
                    {
                        selector: 'node',
                        style: {
                            'label': 'data(id)'
                        }
                    },

                    {
                        selector: '.ClassName1',
                        style: {
                            'width': 8,
                            'height': 8,
                            'label': ''
                        }
                    }
                ],
                elements: {
                    nodes: [
                          { data: { id: 'explore'}, classes: 'ClassName1'},
                          { data: { id: 'discover' } }
                    ],
                    edges: [
                          { data: { source: 'explore', target: 'discover' } }
                    ]                 
               },
        });