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, "Hello!", {
          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);
        m.set(data, "name", 'I am doing well');
      }, "flash");
    }
    function loop() {
      setTimeout(function () { flash(); loop(); }, 2000);
    }
    loop();
  </script>
</body>
来源：https://www.cnblogs.com/Alwaysbecoding/p/11935281.html
标签
gojs
data
highlight