使用 cytoscape.js 在节点的抽头上动态添加 css class 到 cytoscape 节点

Question

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

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 工作正常，但它不会向节点添加任何 class。这可能吗？

Answer 1

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

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

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

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

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

stackblitz

使用 cytoscape.js 在节点的抽头上动态添加 css class 到 cytoscape 节点

Dynamically add a css class to cytoscape node on the tap of the node using cytoscape.js

cytoscape

cytoscape-web

cytoscape.js