Cytoscape.js настройка цвета узла и другие данные

Question

Я использую Cytoscape.js для создания базовой диаграммы и любопытно, как установить цвет и конкретную форму каждого узла. Вот мой существующий код:

layout: { 
     name: 'preset' 
    }, 

    ready: function(){ 
     window.cy = this; 

     cy.add([ 
      { group: "nodes", data: { id: "n0" }, position: { x: 100, y: 100 } }, 
      { group: "nodes", data: { id: "n1", shape: 'rectangle' }, position: { x: 200, y: 200 } }, 
      { group: "edges", data: { id: "e0", source: "n0", target: "n1" } } 
    ]); 
    } 
}); 

});

Мне также было любопытно, как оживить диаграмму и были ли какие-либо подобные примеры там.

веселит,

Answer 1

... 
style: [ // the stylesheet for the graph 
    { 
     selector: 'node', 
     style: { 
     'background-color': '#666', 
     'shape': 'rectangle', 
     } 
    }, 
], 
... 

background-color, вероятно, атрибут, который вы ищете, это установлено в параметре style. Дополнительная информация может быть в http://js.cytoscape.org/#getting-started/specifying-basic-options.

Что касается формы, у cytoscape есть несколько предопределенных форм, таких как прямоугольник, круг и т. Д. Вы даже можете сделать свой собственный или иметь svg в качестве изображения узла. Параметры для узлов перечислены в http://js.cytoscape.org/#style/node-body.

Для анимации я хотел бы посмотреть некоторые из загруженных демо и перейти оттуда. Это особенно интересно js.cytoscape.org/demos/aedff159b0df05ccfaa5