GoJS实例4

此示例更改链接数据的“to”属性,使链接连接到不同的节点.复制如下内容保存到空白的.html文件中,用浏览器打开即可查看效果

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>GoJS实例</title>
    <style>
        #myDiagramDiv {
             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 $ = go.GraphObject.make;
        var diagram = new go.Diagram("myDiagramDiv");
        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() {
            var model = diagram.model;
            // 所有模型更改都应在事务中发生
            model.startTransaction("reconnect link");
            var data = model.linkDataArray[0]; // 获取第一个链接数据
            if (model.getToKeyForLinkData(data) === "Beta") {
                model.setToKeyForLinkData(data, "Gamma");
            } else {
                model.setToKeyForLinkData(data, "Beta");
            }
            model.commitTransaction("reconnect link");
        }

        function loop() {
            setTimeout(function () {
                switchTo();
                loop();
            }, 1000);
        }
        loop();
    </script>
</body>

</html>

 此示例点击不同的节点转换颜色.复制如下内容保存到空白的.html文件中,用浏览器打开即可查看效果

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>GoJS实例</title>
    <style>
        #myDiagramDiv {
             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 $ = go.GraphObject.make;
        var diagram = new go.Diagram("myDiagramDiv");
        diagram.nodeTemplate =
            $(go.Node, "Auto", {
                    selectionAdorned: false
                }, // no blue selection handle!
                $(go.Shape, "RoundedRectangle", {
                        fill: "white"
                    },
                    // bind Shape.fill to Part.isSelected converted to a color
                    new go.Binding("fill", "isSelected", function (sel) {
                        return sel ? "dodgerblue" : "lightgreen";
                    }).ofObject()), // no name means bind to the whole Part
                $(go.TextBlock, {
                        margin: 5
                    },
                    new go.Binding("text", "descr"))
            );

        diagram.model.nodeDataArray = [{
                descr: "Select me!"
            },
            {
                descr: "I turn blue when selected."
            }
        ];
    </script>
</body>

</html>

 移动节点.复制如下内容保存到空白的.html文件中,用浏览器打开即可查看效果

<!DOCTYPE html>
<html>

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

<body>
    <div id="myDiagramDiv"></div>
    <p id="bindTwoWayData" onclick='shiftNode()'></p>
    <script>
        //为了简洁
        var $ = go.GraphObject.make;
        var diagram = new go.Diagram("myDiagramDiv");
        diagram.nodeTemplate =
            $(go.Node, "Auto", {
                    locationSpot: go.Spot.Center
                },
                new go.Binding("location", "loc").makeTwoWay(), // 双向绑定
                $(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(0, 0)
        }];
        diagram.model = new go.GraphLinksModel(nodeDataArray);

        shiftNode = (function () { //定义一个名为"shiftNode"的回调函数,当点击时触发
            // 所有的model中做出的改变都应该在事务中
            diagram.startTransaction("shift node");
            var data = diagram.model.nodeDataArray[0]; // get the first node data
            var node = diagram.findNodeForData(data); // find the corresponding Node
            var p = node.location.copy(); // make a copy of the location, a Point
            p.x += 20;
            if (p.x > 200) p.x = 0;
            // changing the Node.location also changes the data.loc property due to TwoWay binding
            node.location = p;
            // show the updated location held by the "loc" property of the node data
            document.getElementById("bindTwoWayData").textContent = data.loc.toString();
            diagram.commitTransaction("shift node");
        });
        shiftNode(); // initialize everything
    </script>
</body>

</html>
原文地址:https://www.cnblogs.com/Alwaysbecoding/p/11849960.html