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'
});

我将我的Git提交与cy.add（）挂钩，并为每个新节点添加背景颜色。再一次，我想仅将新添加的节点设置为红色（或者设置某种脉动行为的动画以指示它是新添加的节点），并且在其默认为绿色之前使其具有每种颜色。我当然觉得我错过了一些简单的东西......任何帮助都会受到赞赏！

Answer 1

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

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

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

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

Cytoscape动态样式最后添加节点

1 个答案: