使用gojs画出拓扑图,清晰的看出组织人员关系

GoJS 是一个使用 HTML5, SVG 和 JavaScript 构建的图表库，可以用来创建和编辑交互式图表。以下是一个简单的例子，展示如何使用 GoJS 在 GoJS 的模板中创建一个简单的拓扑图。

首先，你需要在你的 HTML 文件中引入 GoJS：

<script src="https://gojs.net/latest/api/go-debug.js" type="text/javascript"></script>

然后，你可以使用以下的 JavaScript 代码来创建一个拓扑图：

function init() {
  // 创建一个 GoJS 图表
  const $ = go.GraphObject.make;  // 创建图表对象的快捷方式
  const myDiagram = $(go.Diagram, "myDiagramDiv");  // 指定图表的 DOM 容器
 
  // 设置图表的模板和属性
  myDiagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape, "RoundedRectangle", {
        fill: "white", // 节点形状的填充颜色
        strokeWidth: 1, // 节点形状的边框宽度
        portId: "", // 节点的端口名称
        fromLinkable: true, // 是否可以从此节点连接出线
        toLinkable: true // 是否可以连接到此节点的线
      }),
      $(go.TextBlock, { margin: 7, editable: true }, // 文本块，可编辑
        new go.Binding("text")) // 文本绑定到节点的名称属性
    );
 
  myDiagram.linkTemplate =
    $(go.Link,
      { routing: go.Link.Orthogonal, // 线条的路由方式
        corner: 5, // 线条弯曲的角度
        selectionAdornmentTemplate: $(go.Adornment, "Link",
          $(go.Shape, { stroke: "blue", strokeWidth: 2, fill: null }))
      },
      $(go.Shape, { strokeWidth: 1.5, stroke: "#000" }), // 线条的形状和颜色
      $(go.TextBlock, { margin: 20 }, // 文本块
        new go.Binding("text", "text")) // 文本绑定到线条的文本属性
    );
 
  // 向图表中添加节点和连接线
  myDiagram.model = new go.GraphLinksModel(
    [
      { key: "Alpha", text: "Alpha" },
      { key: "Beta", text: "Beta" },
      { key: "Gamma", text: "Gamma" }
    ],
    [
      { from: "Alpha", to: "Beta" },
      { from: "Alpha", to: "Gamma" }
    ]
  );
}

在 HTML 文件中，你需要有一个用于显示图表的容器：

<div id="myDiagramDiv" style="width:500px; height:350px; background-color: #DAE4E0;"></div>
<script>
  window.onload = init;
</script>

这个简单的例子创建了一个包含三个节点和两条连接线的拓扑图。你可以根据需要添加更多的节点和连接。GoJS 提供了丰富的功能和自定义选项，可以用来创建各种复杂的图表和可视化。