Javascript 有条件地改变链接颜色?
我正试图根据模型数据中的键/值对更改GoJS树中的链接颜色(Javascript 有条件地改变链接颜色?,javascript,gojs,Javascript,Gojs,我正试图根据模型数据中的键/值对更改GoJS树中的链接颜色(color,在本例中)。我正试图通过执行以下操作调用我的方法来更改链接颜色: myDiagram.linkTemplate = $(go.Link, { routing: go.Link.Orthogonal, corner: 5, toShortLength: -2, fromShortLength: -2 }, $(go.Shape, { strokeWidth: 2, stroke: color
color
,在本例中)。我正试图通过执行以下操作调用我的方法来更改链接颜色:
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
但是,从未调用我的setLinkColor
方法。以下为参考:
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;
}
如何根据color
的值有条件地为链接上色
更新
我已尝试执行沃尔特的建议如下:
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 },
然而,这仍然是不着色的链接,我做错了什么
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");
});
}
链接模板显示了一种将链接路径的笔划颜色绑定到链接的数据值的方法。在myColors
对象中查找CSS颜色的属性
test
功能显示了修改第一个链接颜色的一种方法。更多讨论请访问更新了我的帖子,介绍了您建议的方法。它不起作用,思想?