Cytoscape只对最后添加的节点进行动态样式处理[英] Cytoscape dynamically style last added node only

问题描述

我处于使用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()相关，并为每个新节点添加背景颜色.再一次，我想仅设置新添加的节点红色(或对某种脉动行为进行动画，以表明它是新添加的节点)，并且在默认为green之前具有所有颜色.我绝对觉得我缺少一些简单的东西...任何帮助都将不胜感激！

推荐答案

通常，使用类进行样式更灵活.

您可以在 stylesheet 中设置类样式.

在您的示例中，您可以拥有与Git Head Commit相对应的提交的head类.然后，当添加新节点时，您只需cy.nodes().removeClass('head')，然后将新节点标记为新的头部.

您可以在样式表中放置与类相关的任何样式.您甚至可以使用类似于html/css的过渡动画，因此您可以将新的head节点动画.

本文地址：https://www.itbaoku.cn/post/1793849.html