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

本文是小编为大家收集整理的关于Cytoscape只对最后添加的节点进行动态样式处理的处理方法,想解了Cytoscape只对最后添加的节点进行动态样式处理的问题怎么解决?Cytoscape只对最后添加的节点进行动态样式处理问题的解决办法?那么可以参考本文帮助大家快速定位并解决问题。

问题描述

我处于使用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