向泳道中的每个节点添加CSS或样式(GOjs库) [英] Add CSS or style to each node in swimlane (GOjs library)

问题描述

我当前正在使用 GOjs库的新图形，即 swimlane .

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.

推荐答案

由于您尚未发布代码，因此我正在研究swinlane示例(

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

如果您查看节点的文档( http://gojs.net/beta /intro/nodes.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 }),

到

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

进行了这些更改之后，您可以在节点数据中指定所需的填充颜色.请注意，我将上面的原始填充值更改为lighblue.现在，如果您未为节点指定颜色(fourD将为浅蓝色)，则浅蓝色将成为默认颜色:

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

这篇关于向泳道中的每个节点添加CSS或样式(GOjs库)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！