将CSS或样式添加到泳道中的每个节点（GOjs库）

我目前正在使用GOjs库的新图表，即泳道 。

我的问题是我想为每个节点添加不同的样式（例如，一个节点的bg颜色为红色，另一个节点为蓝色，其他节点为绿色等）。 谁知道怎么做？

任何帮助是极大的赞赏。 或者任何人都可以建议另一个我的东西。

Answer 1

由于您尚未发布您的代码，因此我将使用swinlane示例（ http://www.gojs.net/latest/samples/swimlanes.html ）。

如果您查看节点的文档（ http://gojs.net/beta/intro/nodes.html ），您可以看到它们如何更改颜色。

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" } ]; 

在泳道示例中，他们有以下相关代码：

 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" } ]); 

要允许每个节点拥有自己的填充颜色，您可以更改该行

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

至

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

完成这些更改后，您可以在节点数据中指定所需的填充颜色。 请注意，我将上面的原始填充值更改为lighblue。 如果你没有为节点指定颜色，那么lightblue将是默认颜色（fourD将是浅蓝色）：

  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" } ]);