构建专业拓扑图：基于 GoJS 的技术指南

2023-10-25 20:39:56

在当今数据爆炸的时代，可视化技术已成为信息呈现和分析的利器。拓扑图作为一种常见的可视化工具，以其直观形象的表达方式在各个领域发挥着重要作用。基于 JavaScript 的开源库 GoJS，凭借其强大的功能和灵活的自定义能力，在拓扑图绘制领域备受青睐。

GoJS 简介

GoJS 是一款功能强大的 JavaScript 图表库，它可以轻松创建各种交互式图表，包括拓扑图、流程图、组织结构图、网络图等。GoJS 提供了丰富的 API 和友好的用户界面，使开发人员能够轻松创建和定制图表。

GoJS 实现拓扑图

使用 GoJS 实现拓扑图，可以分为以下几个步骤：

初始化 GoJS 实例

var go = GoJS();
go.diagram = $(go.Diagram, "diagramDiv",
  {
    initialContentAlignment: go.Spot.Center, // 内容居中
    allowDrop: true,  // 允许拖拽
    "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom, // 鼠标滚轮缩放
    "toolManager.panningTool.isEnabled": true, // 允许平移
  }
);

创建节点和连线

var nodeData = { key: "A", text: "节点 A" };
var node = go.Node.fromJson(nodeData);
go.diagram.add(node);

var linkData = { from: "A", to: "B", text: "连线" };
var link = go.Link.fromJson(linkData);
go.diagram.add(link);

设置布局算法

go.diagram.layout =
  go.LayeredDigraphLayout.newInstance({
    direction: 90, // 布局方向为垂直
    layerSpacing: 30, // 层间距
    columnSpacing: 10 // 列间距
  }
);

自定义节点和连线样式

go.Shape.defineFigureGenerator("Diamond", function(shape, w, h) {
  var geo = new go.Geometry();
  var fig = new go.PathFigure(0, 0, true); // 起始点(0,0)
  fig.add(new go.PathSegment(go.PathSegment.Line, 0.5 * w, 0)); // 线段到(0.5 * w, 0)
  fig.add(new go.PathSegment(go.PathSegment.Line, w, 0.5 * h)); // 线段到(w, 0.5 * h)
  fig.add(new go.PathSegment(go.PathSegment.Line, 0.5 * w, h)); // 线段到(0.5 * w, h)
  fig.add(new go.PathSegment(go.PathSegment.Line, 0, 0.5 * h)); // 线段到(0, 0.5 * h)
  geo.add(fig);
  return geo;
});
go.Node.defineClass("CustomNode", go.Node, {
  figure: "Diamond", // 使用自定义的菱形形状
  fill: "lightblue" // 填充颜色
});