Question

如何使用Go.js制作动态链接。

使用下面的代码，我使用静态值创建了两个颜色链接。我想让这些值变为动态的（应该从范围中获取）。

我已在 $ scope.model inColor和outColor中声明了颜色名称，分别代表了开始和结束颜色。

这是我的代码和Plunkr示例：

scripts.js中

var app = angular.module('app', []);

app.directive('goDiagram', function($http) {
  return {
    restrict: 'E',
    template: '<div></div>',
    replace: true,
    scope: {
      model: '=goModel'
    },
    link: function(scope, element, attrs) {
      if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this
      var $ = go.GraphObject.make;
      var rainbow = $(go.Brush, "Linear", {
        0: "red",
        1: "green"
      });
      var diagram = $(go.Diagram, element[0], {
        nodeTemplate: $(go.Node, "Auto", {
            locationSpot: go.Spot.Center
          }, {
            width: 120,
            height: 15,
            locationSpot: go.Spot.Center
          },
          new go.Binding("location"),
          $(go.Shape, {
            fill: "#e74c3c",
            stroke: '#c0392b'
          }, {
            portId: "",
            cursor: "pointer",
            strokeWidth: 0,
          }),
          $(go.TextBlock, {
              margin: 0,
              stroke: "#eee"
            },
            new go.Binding("text", "key")
          )
        ),
        linkTemplate: $(go.Link, {
            routing: go.Link.AvoidsNodes,
            reshapable: true,
            resegmentable: true
          },
          $(go.Shape,
            { strokeWidth: 3 , stroke: rainbow },
            // new go.Binding("stroke", rainbow),
          ),
          $(go.Shape, {
            toArrow: "Standard"
          }),
        ),
      });

      function updateAngular(e) {
        if (e.isTransactionFinished) {
          scope.$apply();
        }
      }

      function updateSelection(e) {
        diagram.model.selectedNodeData = null;
        var it = diagram.selection.iterator;
        while (it.next()) {
          var selnode = it.value;
          // ignore a selected link or a deleted node
          if (selnode instanceof go.Node && selnode.data !== null) {
            diagram.model.selectedNodeData = selnode.data;
            break;
          }
        }
        scope.$apply();
      }
      // watch scope
      scope.$watch("model", function(newmodel) {
        if (newmodel != undefined) {
          var oldmodel = diagram.model;
          if (oldmodel !== newmodel) {
            diagram.removeDiagramListener("ChangedSelection", updateSelection);
            diagram.model = newmodel;
            diagram.addDiagramListener("ChangedSelection", updateSelection);
          }
        }
      });
    }
  }
});

app.controller('appController', function($scope) {
  $scope.init = function(d) {
    $scope.hello = "Hello Plunker!!!!";
    $scope.model = new go.GraphLinksModel(
      [{
        key: "Alpha",
        color: "lightblue",
        location: new go.Point(150, 130)
      }, {
        key: "Beta",
        color: "orange",
        location: new go.Point(350, 130)
      }, {
        key: "Gamma",
        color: "lightgreen",
        location: new go.Point(150, 230)
      }, {
        key: "Delta",
        color: "pink"
      }], [{
        from: "Alpha",
        to: "Beta",
        inColor: "red",
        outColor: "blue"
      }, {
        from: "Alpha",
        to: "Gamma",
        inColor: "yellow",
        outColor: "blue"
      }, {
        from: "Beta",
        to: "Gamma",
        inColor: "green",
        outColor: "pink"
      }, {
        from: "Gamma",
        to: "Delta",
        inColor: "black",
        outColor: "red"
      }, {
        from: "Delta",
        to: "Alpha",
        inColor: "violet",
        outColor: "green"
      }]);
    $scope.model.selectedNodeData = null;
  }
});

的index.html

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@1.5.10" data-semver="1.5.10" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js"></script>
    <script data-require="angular-route@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular-route.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="https://gojs.net/latest/release/go.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="appController">
    <div ng-init="init()">
      <h1>{{hello}}</h1>
      <go-diagram go-model="model" style="border: solid 1px black; width:100%; height:400px"></go-diagram>
    </div>
  </body>

</html>

Plunkr

Answer 1

这是一个转换函数，它生成一个给定链接的画笔：

alert

在链接模板中使用时：

function linkLinearBrush(link) {
  var b = new go.Brush(go.Brush.Linear);
  var fp = link.fromPort.getDocumentPoint(go.Spot.Center);
  var tp = link.toPort.getDocumentPoint(go.Spot.Center);
  var right = (tp.x > fp.x);
  var down = (tp.y > fp.y);
  if (right) {
    if (down) {
      b.start = go.Spot.TopLeft;
      b.end = go.Spot.BottomRight;
    } else {
      b.start = go.Spot.BottomLeft;
      b.end = go.Spot.TopRight;
    }
  } else {  // leftward
    if (down) {
      b.start = go.Spot.TopRight;
      b.end = go.Spot.BottomLeft;
    } else {
      b.start = go.Spot.BottomRight;
      b.end = go.Spot.TopLeft;
    }
  }
  b.addColorStop(0.0, link.data.inColor);
  b.addColorStop(1.0, link.data.outColor);
  return b;
}

你得到了这样的结果：

如果需要，更改转换函数以从连接的节点而不是链接数据中获取颜色将是微不足道的。

动态链接 - GoJS

1 个答案: