Add CSS or style to each node in swimlane (GOjs library)

问题

I am currently using GOjs library's new graph which is the swimlane.

My problem is I want to add DIFFERENT styles to each node (like, one node has a bg-color of red, the other is blue, others are green and etc). Anyone knows how to do this?

Any help is greatly appreciated. Or anyone can suggest another library that does my thing.

回答1:

As you haven't posted your code Ill be working off the swinlane examples (http://www.gojs.net/latest/samples/swimlanes.html).

If you have a look at the documentation for nodes (http://gojs.net/beta/intro/nodes.html) you can see how they are changing the color there.

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

In the swimlane example they have the following relevant code:

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

To allow each node their own fill color you change the line

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

to

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

After making those changes you can then specify what fill colors you want in the node data. Note that I changed the original fill value above to lighblue. Now lightblue will be the default color if you do not specify a color for a node (fourD will be 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" }
    ]);

来源：https://stackoverflow.com/questions/22676411/add-css-or-style-to-each-node-in-swimlane-gojs-library