Cytoscape 仅动态设置最后添加的节点样式

Question

我正处于使用 Cytoscape.js 的开始阶段，我正在尝试为我的 dagre-layout 树设置最后添加的节点的样式。

对于上下文，我试图在进行 Git 提交时可视化 Git 工作流程。树上的当前节点为绿色。当我进行 Git 提交时，一个新节点将添加到 Git (dagre) 树的末尾，颜色为红色。一旦我再次提交，将添加一个新的红色节点......但我希望之前的红色节点像其他节点一样是绿色的。

cy.add([
    {
        // Adding Node
        data: {
            id: localGit.SHA
        }
    },
    {
        // Adding Edges
        data: {
            id: localGit.message,
            source: localGit.parent[0],
            target: localGit.SHA
        }
    }
]).style({
    'background-color': 'red'
});

我用 cy.add() 挂钩了我的 Git 提交，并且正在为每个新节点添加背景颜色。再一次，我只想将新添加的节点设置为红色（或设置某种脉动行为的动画以指示它是新添加的节点），并在默认为绿色之前将每种颜色设置为红色。我绝对觉得我缺少一些简单的东西...任何帮助将不胜感激！

Answer 1

一般来说，使用 classes 进行样式设置会更灵活。

您可以在 stylesheet 中为 class 设置样式，在初始化时设置。

在您的示例中，您可以为对应于 git head 提交的提交设置 head class。然后，您可以在添加新节点时仅 cy.nodes().removeClass('head')，并 newNode.addClass('head') 将新节点标记为新头。

您可以将与 class 关联的任何样式放入您的样式表中。您甚至可以使用过渡动画，类似于 HTML/CSS，因此您可以为新的 head 个节点设置动画。

Cytoscape 仅动态设置最后添加的节点样式

Cytoscape dynamically style last added node only

cytoscape.js

cytoscape