Условно изменить цвет ссылки? - PullRequest
Новая
       46

Условно изменить цвет ссылки?

0 голосов
/ 01 ноября 2019

Я пытаюсь изменить цвета ссылок в моем дереве 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?

ОБНОВЛЕНИЕ

Я попытался реализовать предложение Уолтера следующим образом: 

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

Однако это по-прежнему не окрашивает ссылки, что я делаю не так?

1 Ответ

1 голос
/ 05 ноября 2019 
  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 ссылки цвета CSS в объекте myColors.

* test Функция показывает один из способов изменения цвета первой ссылки. Больше обсуждения в https://gojs.net/latest/learn/graphObject.html

...