10forceDirectedLayout.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GoJS布局——第四节 力导向布局(ForceDirectedLayout)</title>
    <script src="go.js"></script>
    <script>
        function init() {
            let $ = go.GraphObject.make;
            let myDiagram = $(go.Diagram, "myDiagramDiv");

            myDiagram.nodeTemplate =
                $(go.Node, "Auto",
                    $(go.Shape, "RoundedRectangle", {
                        fill: "lightblue"
                    }),
                    $(go.TextBlock, {
                            margin: 8
                        },
                        new go.Binding("text", "key"))
                );
            myDiagram.layout = $(go.ForceDirectedLayout, {
                defaultElectricalCharge: 300,
                defaultSpringLength: 200,
                defaultSpringStiffness: 0.2,
                defaultGravitationalMass:0,
                isFixed: function (v) {
                    let node = v.node;
                    if (!node) return false;
                    else return node.data.key === "Beta";
                }
            });
            myDiagram.model =
                $(go.GraphLinksModel, {
                    nodeDataArray: [{
                        key: "Alpha",
                    }, {
                        key: "Beta",
                    }, {
                        key: "Gamma"
                    }, ],
                    linkDataArray: [{
                            from: "Alpha",
                            to: "Beta"
                        },
                        {
                            from: "Alpha",
                            to: "Gamma"
                        }
                    ]
                })
        }
    </script>
</head>

<body onload="init()">
    <div id="myDiagramDiv" style="height: 900px;width: 600px;border: 1px solid #000;"></div>
</body>

</html>