Ajouter du CSS ou du style à chaque nœud dans swimlane (bibliothèque GOjs)

J’utilise actuellement le nouveau graphique de la bibliothèque GOjs, le swimlane .

Mon problème est que je veux append DIFFÉRENTS styles à chaque nœud (comme, un nœud a une couleur bg de rouge, l’autre est bleu, les autres sont verts, etc.) Est-ce que quelqu’un sait comment faire cela?

Toute aide est grandement appréciée. Ou n’importe qui peut suggérer une autre bibliothèque qui fait mon truc.

Comme vous n’avez pas posté votre code, je travaillerai avec les exemples swinlane ( http://www.gojs.net/latest/samples/swimlanes.html )

Si vous consultez la documentation des nœuds ( http://gojs.net/beta/intro/nodes.html ), vous pouvez voir comment ils changent de couleur.

diagram.nodeTemplate = $(go.Node, "Auto", $(go.Shape, "Rectangle", new go.Binding("fill", "color")), $(go.TextBlock, { margin: 5 }, new go.Binding("text", "key")) ); diagram.model.nodeDataArray = [ { key: "Alpha", color: "lightblue" } ];

Dans l’exemple du couloir, ils ont le code pertinent suivant:

 myDiagram.nodeTemplate = $(go.Node, "Auto", $(go.Shape, "Rectangle", { fill: "white", portId: "", cursor: "pointer", fromLinkable: true, toLinkable: true }), $(go.TextBlock, { margin: 5 }, new go.Binding("text", "key")), // limit dragging of Nodes to stay within the containing Group, defined above { dragComputation: stayInGroup, mouseDrop: function (e, node) { // dropping a copy of some Nodes and Links onto this Node adds them to this Node's Group if (!e.shift && !e.control) return; // cannot change groups with an unmodified drag-and-drop var grp = node.containingGroup; if (grp !== null) { var ok = grp.addMembers(node.diagram.selection, true); if (!ok) grp.diagram.currentTool.doCancel(); } }, layoutConditions: go.Part.LayoutAdded | go.Part.LayoutNodeSized } ); myDiagram.model = new go.GraphLinksModel( [ // node data { key: "Lane1", isGroup: true, color: "lightblue" }, { key: "Lane2", isGroup: true, color: "lightgreen" }, { key: "Lane3", isGroup: true, color: "lightyellow" }, { key: "Lane4", isGroup: true, color: "orange" }, { key: "oneA", group: "Lane1" }, { key: "oneB", group: "Lane1" }, { key: "oneC", group: "Lane1" }, { key: "oneD", group: "Lane1" }, { key: "twoA", group: "Lane2" }, { key: "twoB", group: "Lane2" }, { key: "twoC", group: "Lane2" }, { key: "twoD", group: "Lane2" }, { key: "twoE", group: "Lane2" }, { key: "twoF", group: "Lane2" }, { key: "twoG", group: "Lane2" }, { key: "fourA", group: "Lane4" }, { key: "fourB", group: "Lane4" }, { key: "fourC", group: "Lane4" }, { key: "fourD", group: "Lane4" }, ], [ // link data { from: "oneA", to: "oneB" }, { from: "oneA", to: "oneC" }, { from: "oneB", to: "oneD" }, { from: "oneC", to: "oneD" }, { from: "twoA", to: "twoB" }, { from: "twoA", to: "twoC" }, { from: "twoA", to: "twoF" }, { from: "twoB", to: "twoD" }, { from: "twoC", to: "twoD" }, { from: "twoD", to: "twoG" }, { from: "twoE", to: "twoG" }, { from: "twoF", to: "twoG" }, { from: "fourA", to: "fourB" }, { from: "fourB", to: "fourC" }, { from: "fourC", to: "fourD" } ]);

Pour que chaque nœud ait sa propre couleur de remplissage, changez la ligne

 { fill: "white", portId: "", cursor: "pointer", fromLinkable: true, toLinkable: true }),

 { fill: "lightblue", portId: "", cursor: "pointer", fromLinkable: true, toLinkable: true }, new go.Binding("fill", "color")),

Après avoir apporté ces modifications, vous pouvez ensuite spécifier les couleurs de remplissage que vous souhaitez dans les données du noeud. Notez que j’ai changé la valeur de remplissage d’origine ci-dessus en lighblue. Maintenant, lightblue sera la couleur par défaut si vous ne spécifiez pas de couleur pour un nœud (fourD sera lightblue):

  myDiagram.model = new go.GraphLinksModel( [ // node data { key: "Lane1", isGroup: true, color: "lightblue" }, { key: "Lane2", isGroup: true, color: "lightgreen" }, { key: "Lane3", isGroup: true, color: "lightyellow" }, { key: "Lane4", isGroup: true, color: "orange" }, { key: "oneA", group: "Lane1", color: "green" }, { key: "oneB", group: "Lane1", color: "red" }, { key: "oneC", group: "Lane1", color: "yellow" }, { key: "oneD", group: "Lane1", color: "purple" }, { key: "twoA", group: "Lane2", color: "orange" }, { key: "twoB", group: "Lane2", color: "green" }, { key: "twoC", group: "Lane2", color: "red" }, { key: "twoD", group: "Lane2", color: "yellow" }, { key: "twoE", group: "Lane2", color: "purple" }, { key: "twoF", group: "Lane2", color: "orange" }, { key: "twoG", group: "Lane2", color: "green" }, { key: "fourA", group: "Lane4", color: "red" }, { key: "fourB", group: "Lane4", color: "yellow" }, { key: "fourC", group: "Lane4", color: "purple" }, { key: "fourD", group: "Lane4" }, ], [ // link data { from: "oneA", to: "oneB" }, { from: "oneA", to: "oneC" }, { from: "oneB", to: "oneD" }, { from: "oneC", to: "oneD" }, { from: "twoA", to: "twoB" }, { from: "twoA", to: "twoC" }, { from: "twoA", to: "twoF" }, { from: "twoB", to: "twoD" }, { from: "twoC", to: "twoD" }, { from: "twoD", to: "twoG" }, { from: "twoE", to: "twoG" }, { from: "twoF", to: "twoG" }, { from: "fourA", to: "fourB" }, { from: "fourB", to: "fourC" }, { from: "fourC", to: "fourD" } ]);