[英]Conditionally change link color?
I am attempting to change link colors in my GoJS tree depending on a key / value pair in my model data ( color
, in this case).我正在尝试根据 model 数据中的键/值对更改 GoJS 树中的链接 colors (在本例中为
color
)。 I am attempting to call my method to change the link color by doing the following:我正在尝试通过执行以下操作调用我的方法来更改链接颜色:
myDiagram.linkTemplate =
$(go.Link,
{ routing: go.Link.Orthogonal, corner: 5, toShortLength: -2, fromShortLength: -2 },
$(go.Shape, { strokeWidth: 2, stroke: colors["gray"] },
new go.Binding("geometry", "color", setLinkColor))); // the link shape and color
However, my setLinkColor
method is never called.但是,我的
setLinkColor
方法永远不会被调用。 Here it is for reference:这里供参考:
function setLinkColor(color) {
console.log("value of color: ", color);
switch(color) {
case "critical":
link = go.Shape.stroke(colors["orange"]);
break;
default:
link = go.Shape.stroke(colors["white"]);
}
return link;
}
How can I conditionally color my Links depending on the value of color
?如何根据 color 的值有条件地为我的链接
color
?
UPDATE更新
I have tried implementing Walter's suggestion as follows:我尝试按如下方式实施沃尔特的建议:
var linkColors = {true: colors["orange"], false: colors["white"]};
myDiagram.linkTemplate =
$(go.Link,
$(go.Shape, { strokeWidth: 2 },
new go.Binding("stroke", "critical", function(c) { return linkColors[c] || colors["orange"]; })),
$(go.Shape, { toArrow: "OpenTriangle", strokeWidth: 2 },
new go.Binding("stroke", "critical", function(c) { return linkColors[c] || colors["orange"]; })),
myDiagram.model = new go.GraphLinksModel(
[
{ key: 2, geo: "thing1", color: colors["white"], critical: false },
{ key: 3, geo: "thing2", color: "#F47321", critical: true },
{ key: 4, geo: "thing3", color: colors["white"], critical: false },
{ key: 5, geo: "thing4", color: colors["white"], critical: false },
However this still is not coloring the links, what am I doing wrong?但是,这仍然没有为链接着色,我做错了什么?
function init() {
var $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, "myDiagramDiv",
{ "undoManager.isEnabled": true });
myDiagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, { fill: "white", portId: "" },
new go.Binding("fill", "color")),
$(go.TextBlock, { margin: 8 },
new go.Binding("text"))
);
var myColors = { "A": "red", "B": "green", "C": "blue" };
myDiagram.linkTemplate =
$(go.Link,
$(go.Shape, { strokeWidth: 2 },
new go.Binding("stroke", "color", function(c) { return myColors[c] || "blue"; })),
$(go.Shape, { toArrow: "OpenTriangle", strokeWidth: 2 },
new go.Binding("stroke", "color", function(c) { return myColors[c] || "blue"; }))
);
myDiagram.model = new go.GraphLinksModel(
[
{ key: 1, text: "Alpha", color: "lightblue" },
{ key: 2, text: "Beta", color: "orange" },
{ key: 3, text: "Gamma", color: "lightgreen" },
{ key: 4, text: "Delta", color: "pink" }
],
[
{ from: 1, to: 2, color: "A" },
{ from: 1, to: 3, color: "B" },
{ from: 2, to: 2 },
{ from: 3, to: 4, color: "C" },
{ from: 4, to: 1, color: "D" }
]);
}
function test() {
myDiagram.model.commit(function(m) {
m.set(m.linkDataArray[0], "color", "B");
});
}
The link template shows one way of binding the link path's stroke color to the value of the link's data.color
property lookup of a CSS color in the myColors
object.链接模板显示了一种将链接路径的笔触颜色绑定到链接的
data.color
属性值的方法,该属性在myColors
object 中查找 CSS 颜色。
The test
function shows one way of modifying the color of the first link. test
function 显示了一种修改第一个链接颜色的方法。 More discussion is at https://gojs.net/latest/learn/graphObject.html更多讨论在https://gojs.net/latest/learn/graphObject.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.