Cytoscape.js 在点击时改变节点的样式

【问题标题】：Cytoscape.js changing style of node on clickCytoscape.js 在点击时改变节点的样式
【发布时间】：2019-03-06 11:57:47
【问题描述】：

我似乎无法在单击时更改节点的样式。我需要以编程方式执行此操作以跟踪图中的两个节点，基本上是同时“选择”两个节点，每个节点都是我定义的不同类型。这里有一些例子（http://js.cytoscape.org/#eles.addClass），它为某些节点在工作表中“删除”一种新样式。我不明白这些类是如何工作的，它们在样式表中的定义位置以及它们可以用于什么事件。该库的文档没有提供类的实际解释、定义它们的位置以及它们的用途。非常感谢任何帮助。

【问题讨论】：

标签： class click selection cytoscape.js

【解决方案1】：

我认为这些类就像 css 类。当您第一次初始化 cytoscape 时，您可以有一个可选的 style 参数，例如 ...

var cy = cytoscape({
  style: [
   {
    selector: '.myFirstClass',
    style: {
    'background-color': 'red',
    'shape': 'rectangle'
    ...
   },
   {
    selector: '.mySecondClass',
    style: {
    'background-color': 'blue',
    'shape': 'triangle'
    ...
   }
});

现在，当您更改节点的样式时，它将反映您在样式表中设置的内容。所以...

cy.$('#nodeA').classes('mySecondClass');，其中#nodeA 是您的节点的ID。这会将您的第一个节点变成一个蓝色三角形。

希望有所帮助。

【讨论】：

感谢您的帮助，目前尚不清楚它是如何工作的。我会试一试，因为我需要一个明确的方法来做到这一点。