如何在Cytoscape.JS中淡化边缘？

Question

在带有一些边缘的Cytoscape.JS图形中，如何才能仅淡化其中一个边缘？ 样式标签中是否有此功能？

Answer 1

做到这一点的另一种方法是cy.animate（） ：

yourElement.animation({
  style: { 'opacity': yourOpacity },
  duration: yourDuration
}).play();

Answer 2

您可以使用style选项在创建cytoscape画布时更改节点或边缘的不透明度。

从文档中 ：
不透明度值指定为范围为0 <=不透明度<= 1的数字。

var cy = cytoscape({
  // your options
  container: /* ... */,
  elements: [ /* ... */ ],
  style: [ edge.opacity: 0.5 /* ... */ ],
  // ...
)}

如果要在单击按钮（或所需的任何触发器）时更改边缘的不透明度，则画布的样式文件可能会更好。 您可以在此处为边缘设置“褪色类”，并在单击按钮时将其设置到边缘。

//Cytoscape-CSS
edge.faded {
 opacity: 0.5 /* 50% opacity */
}

//JS
edges.addClass('faded');

此示例淡出不在所选节点的封闭邻域中的所有对象的节点和边缘。 您可以在此处找到其源代码。