3

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

4

1 回答 1

1

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

您可以在样式表中为类设置样式，在 init 中设置。

在您的示例中，您可以有一个head与 git head 提交相对应的提交类。然后你就可以cy.nodes().removeClass('head')在你添加一个新节点的时候，并newNode.addClass('head')把这个新节点标记为新的head。

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

于 2016-09-02T21:24:11.253 回答