打
赏
作
者
https://img2020.cnblogs.com/blog/1101843/202010/1101843-20201029092119794-1182278230.jpg

支付宝

https://img2020.cnblogs.com/blog/1101843/202010/1101843-20201029091740174-1560674849.png

微 信

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>

 

<!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",
      { selectionAdorned: false },  // no blue selection handle!
      $(go.Shape, "RoundedRectangle",
        // bind Shape.fill to Node.isSelected converted to a color
        new go.Binding("fill", "isSelected", function(sel) {
              return sel ? "dodgerblue" : "lightgray";
            }).ofObject()),  // no name means bind to the whole Part
      $(go.TextBlock,
        { margin: 5 },
        new go.Binding("text", "descr"))
    );
 
  diagram.model.nodeDataArray = [
    { descr: "点我变蓝" },
    { descr: "选我变蓝" }
  ];
    </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>
  <button id="zoomToFit" onclick="changeColor()">点我改变共享的颜色</button>
  <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",
        $(go.Shape, "RoundedRectangle",
          { fill: "white" },  // the default value if there is no modelData.color property
          new go.Binding("fill", "color").ofModel()),  // meaning a property of Model.modelData
        $(go.TextBlock,
          { margin: 5 },
          new go.Binding("text"))
      );
    // start all nodes yellow
    diagram.model.modelData.color = "yellow";

    diagram.model.nodeDataArray = [
      { text: "Alpha" },
      { text: "Beta" }
    ];

    diagram.undoManager.isEnabled = true;

    changeColor = function () {  // define a function named "changeColor" callable by button.onclick
      diagram.model.commit(function (m) {
        // alternate between lightblue and lightgreen colors
        var oldcolor = m.modelData.color;
        var newcolor = (oldcolor === "lightblue" ? "lightgreen" : "lightblue");
        m.set(m.modelData, "color", newcolor);
      }, "changed shared color");
    }
  </script>
</body>

 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>GoJS实例--TwoWay Binding双向数据绑定</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>
  <button id="xxx" onclick="shiftNode()">改变节点位置</button>
  <script>
    var diagram = new go.Diagram("myDiagramDiv");
    var $ = go.GraphObject.make;
    diagram.add(
      $(go.Node, "Auto",
        $(go.Shape, "RoundedRectangle", {
          fill: "lightblue"
        }),
        $(go.TextBlock, "GoJS实例--TwoWay Binding双向数据绑定，\n此例可用于外部页面改变节点样式", {
          margin: 5
        })
      ));

    diagram.nodeTemplate =
    $(go.Node, "Auto",
      { locationSpot: go.Spot.Center },
      new go.Binding("location", "loc").makeTwoWay(),  // TwoWay Binding
      $(go.Shape, "RoundedRectangle",
        { fill: "lightblue", stroke: "blue", strokeWidth: 2 }),
      $(go.TextBlock,
        { margin: 5 },
        new go.Binding("text", "key"))
    );
 
  var nodeDataArray = [
    { key: "Alpha", loc: new go.Point(90, 90) }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray);
 
  shiftNode = (function() {  // 定义一个名为“shiftNode”的函数，该函数由button.onclick调用
    // 所有的模型变更都应该发生在一个事务中
    diagram.commit(function(d) {
      var data = d.model.nodeDataArray[0];  // get the first node data
      var node = d.findNodeForData(data);   // 查找对应节点
      var p = node.location.copy();  // 复制一个位置，一个点
      p.x += 10;
      if (p.x > 200) p.x = 0;
      // ：改变节点.位置也会改变数据.  双向绑定loc属性
      node.location = p;
      // 显示由节点数据的“loc”属性持有的更新位置
      document.getElementById("bindTwoWayData").textContent = data.loc.toString();
    }, "shift node");
  });
  shiftNode();  // initialize everything
  </script>
</body>

 

posted @ 2019-11-26 14:34  huangwanlin  阅读(1109)  评论(0)    收藏  举报
Copyright 2012-2021 林云希科技有限责任公司