有条件地更改链接颜色?

我试图根据模型数据中的键/值对更改 GoJS 树中的链接颜色(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?


更新


我曾尝试按如下方式实施 Walter 的建议:


  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 },

但是,这仍然没有为链接着色,我做错了什么?


天涯尽头无女友
浏览 162回答 1
1回答

凤凰求蛊

 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");    });  }链接模板显示了一种将链接路径的笔触颜色绑定data.color到myColors对象中CSS 颜色的链接属性查找值的方法。该test函数显示了一种修改第一个链接颜色的方法。更多讨论在https://gojs.net/latest/learn/graphObject.html
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript