我目前正在使用GOjs library的新图是 swimlane .
我的问题是我想为每个节点添加不同的样式(例如,一个节点的背景颜色为红色,另一个为蓝色,其他为绿色等)。有人知道该怎么做吗?
非常感谢任何帮助。或者任何人都可以建议另一个可以完成我的工作的库。
最佳答案
由于您尚未发布代码,我将处理 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" }
]);
关于javascript - 为泳道中的每个节点添加 CSS 或样式(GOjs 库),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22676411/