cytoscape.js - 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() Hook 了我的 Git 提交，并为每个新节点添加了背景颜色。再一次，我只想将新添加的节点设置为红色(或设置某种脉动行为的动画以指示它是新添加的节点)，并在默认为绿色之前将每种颜色设置为红色。我绝对觉得我错过了一些简单的东西......任何帮助将不胜感激!

Answer 1

一般来说，使用类来做样式会更加灵活。

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

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

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