使用 cytoscape.js 在节点的水龙头上向 cytoscape 节点动态添加 css 类

如何解决使用 cytoscape.js 在节点的水龙头上向 cytoscape 节点动态添加 css 类

我正在尝试在 cytoscape.js 中的节点上添加类。这是完整代码的链接：

https://stackblitz.com/edit/angular-kpnys1?file=src%2Fapp%2Fapp.component.ts

ngViewAfterInit 函数

  cy.on("tap","node",function(evt) {
      var node = evt.target;
      console.log("tapped " + node.id());
      cy.nodes(node).classes("foo");
    });

Tap 工作正常，但它不会向节点添加任何类。这可能吗？

解决方法

您必须为此使用正确的方法。目前，您的代码调用 node.classes()，它删除节点的所有先前类（您基本上覆盖了节点的类数组）。

您想要做什么：使用 node.addClass("foo") 并在您的样式表中添加一个条目：

{
    selector: ".foo",css: {
        "background-color": "green"
    }
}

点表示一个类，但您可以进一步指定。如果您只想将 foo 类添加到父节点，请将 .foo 更改为 :parent.foo。

但除此之外，您的代码确实有效（有点），单击节点时会出现该类。这是您的 stackblitz 的编辑版本，我添加了提到的更改并为一个父元素提供了“bar”类。如果您单击父节点，该节点会将背景颜色更改为绿色并将其当前类记录到控制台：

stackblitz