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

Question

我目前正在使用GOjs library 的新图表，即swimlane。

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

非常感谢任何帮助。或者任何人都可以推荐另一个库来做我的事。

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")),

进行这些更改后，您可以在节点数据中指定所需的填充颜色。请注意，我将上面的原始填充值更改为浅蓝色。如果您不为节点指定颜色，现在浅蓝色将成为默认颜色（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" }
    ]);