GoJS简单示例

<!DOCTYPE html>


<html>

<head>
  <meta charset="utf-8">
  <title>GoJS实例--修改节点名称</title>
  <style>
    #myDiagramDiv {
      width: 400px;
      height: 500px;
      background-color: #DAE4E4;
    }
  </style>
  <script src="https://unpkg.com/gojs/release/go-debug.js"></script>
</head>

<body>
  <div id="myDiagramDiv"></div>

  <script>
    var diagram = new go.Diagram("myDiagramDiv");
    var $ = go.GraphObject.make;
    diagram.add(
      $(go.Node, "Auto",
        $(go.Shape, "RoundedRectangle", {
          fill: "lightblue"
        }),
        $(go.TextBlock, "修改节点名称", {
          margin: 5
        })
      ));

    diagram.nodeTemplate =
      $(go.Node, "Auto",
        { locationSpot: go.Spot.Center },
        $(go.Shape, "RoundedRectangle",
          { // default values if the data.highlight is undefined:
            fill: "yellow", stroke: "orange", strokeWidth: 2
          },
          new go.Binding("fill", "highlight", function (v) { return v ? "pink" : "lightblue"; }),
          new go.Binding("stroke", "highlight", function (v) { return v ? "red" : "blue"; }),
          new go.Binding("strokeWidth", "highlight", function (v) { return v ? 3 : 1; })),
        $(go.TextBlock,
          { margin: 5 },
          // 注意，这里绑定后才能修改值
          new go.Binding("text", "name"))
      );

    diagram.model.nodeDataArray = [
      { key: "Alpha", name: "how are you?", highlight: false }  // just one node, and no links
    ];

    function flash() {
      // all model changes should happen in a transaction
      diagram.model.commit(function (m) {
        var data = m.nodeDataArray[0];  // get the first node data
        m.set(data, "highlight", !data.highlight);
        console.log(data);
        // 修改节点数据对象上的“name”值,注意这里能修改是因为定义了Binding：new go.Binding("text", "name")
        m.set(data, "name", 'I am doing well');
      }, "flash");
    }
    function loop() {
      setTimeout(function () { flash(); loop(); }, 2000);
    }
    loop();
  </script>
</body>

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>GoJS实例--改变箭头</title>
    <style>
        #myDiagramDiv {
            width: 400px;
            height: 500px;
            background-color: #DAE4E4;
        }
    </style>
    <script src="https://unpkg.com/gojs/release/go-debug.js"></script>
</head>

<body>
    <div id="myDiagramDiv"></div>

    <script>
        var diagram = new go.Diagram("myDiagramDiv");
        var $ = go.GraphObject.make;
        diagram.add(
            $(go.Node, "Auto",
                $(go.Shape, "RoundedRectangle", {
                    fill: "lightblue"
                }),
                $(go.TextBlock, "GoJS实例--改变箭头", {
                    margin: 5
                })
            ));
        
    diagram.nodeTemplate =
    $(go.Node, "Auto",
      { locationSpot: go.Spot.Center },
      $(go.Shape, "RoundedRectangle",
        { fill: "yellow", stroke: "orange", strokeWidth: 2 }),
      $(go.TextBlock,
        { margin: 5 },
        new go.Binding("text", "key"))
    );
 
  var nodeDataArray = [
    { key: "Alpha" },
    { key: "Beta" },
    { key: "Gamma" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
 
  function switchTo() {
    // all model changes should happen in a transaction
    diagram.model.commit(function(m) {
      var data = m.linkDataArray[0];  // get the first link data
      if (m.getToKeyForLinkData(data) === "Beta")
        m.setToKeyForLinkData(data, "Gamma");
      else
        m.setToKeyForLinkData(data, "Beta");
    }, "reconnect link");
  }
  function loop() {
    setTimeout(function() { switchTo(); loop(); }, 1000);
  }
  loop();
    </script>
</body>

猜你喜欢