Cytoscape 仅动态样式最后添加的节点答案

【问题标题】：Cytoscape dynamically style last added node onlyCytoscape 仅动态样式最后添加的节点
【发布时间】：2016-09-03 05:24:11
【问题描述】：

我正处于使用 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'
});

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

【问题讨论】：

标签： cytoscape.js cytoscape

【解决方案1】：

通常，使用类进行样式设置更加灵活。

您可以在 stylesheet 中设置类的样式，在 init 中设置。

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

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

【讨论】：