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 で設定されたstylesheetでクラスのスタイルを設定できます。

あなたの例ではhead、git head コミットに対応するコミットのクラスを持つことができます。その後cy.nodes().removeClass('head')、新しいノードを追加するときに、newNode.addClass('head')新しいノードを新しいヘッドとしてマークすることができます。

クラスに関連付けられた任意のスタイルをスタイルシートに入れることができます。headHTML/CSS に似た遷移アニメーションを使用することもできるため、新しいノードをアニメーション化できます。

于 2016-09-02T21:24:11.253 に答える