Можно ли раскрасить только один узел графика в Cytoscape JS? - PullRequest
Новая
       9

Можно ли раскрасить только один узел графика в Cytoscape JS?

3 голосов
/ 14 апреля 2020

Могу ли я выбрать конкретный c узел и покрасить его другим цветом остальной части графика?

Спасибо.

1 Ответ

2 голосов
/ 15 апреля 2020

Есть много способов сделать это. Вы можете изменить цвет узла по его идентификатору, используя cy.nodes([id="NODE_ID"]) и установить любой стиль, который вы хотите ( больше информации ).

Если вам нужно изменить цвет узла когда он выбран (нажат), вы можете использовать cy.on('tap', ...) аналогичным образом ( больше информации ).

Вот небольшая демонстрация обоих: 

var eleArray = [
  { group: 'nodes', data: { id: 'N1'} },
  { group: 'nodes', data: { id: 'N2'} },
  { group: 'nodes', data: { id: 'N3'} },
  { group: 'edges', data: { id: 'E0', source: 'N1', target: 'N2' } },
  { group: 'edges', data: { id: 'E1', source: 'N2', target: 'N3' } }
];

var stylesArray = [{
  selector: 'node',
  style: {'label': 'data(id)'}
}];

var cy = cytoscape({
  container: document.getElementById('cy'),
  style: stylesArray,
  elements: eleArray
});

// Set color of a node by ID
cy.nodes('[id="N2"]').style('background-color', 'red');

// Set color of a node when clicked
cy.on('tap', 'node', function(evt) {
  evt.target.style({
    'background-color': 'blue'
  });
});
#cy {
  width: 90%;
  height: 200px;
  display: block;
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.14.1/cytoscape.min.js"></script>
<div id="cy"></div>

Обратите внимание, как я изменил цвет узла N2 напрямую на красный, и как цвет меняется на синий при нажатии на узел .

Если ваш график очень сложный, возможно, лучшим способом было бы добавить цвет в качестве свойства ваших узлов и использовать данные этого свойства в определении стиля. Примерно так: 

// New 'color' property on your nodes
var eleArray = [
   { group: 'nodes', data: { id: 'N1', color: 'red'} }
   // ...
];

// Use the property on your styles
var stylesArray = [{
   selector: 'node',
   style: {'label': 'data(id)', 'background-color': 'data(color)'}
}];
...