mxGraph 教程
呵呵， mxGraph已经不更新了、但是用它绘制层级图扑图效果还是杠杠的。
mxGraph功能强大，文档很全（难懂）。
https://github.com/jgraph/mxgraph
https://jgraph.github.io/mxgraph/docs/tutorial.html
mxGraph 包包含一个用 JavaScript 编写的客户端软件，以及一系列适用于各种语言的后端。客户端软件是一个图形组件，带有一个集成到现有 Web 界面中的可选应用程序包装器。客户端需要一个网络服务器来向客户端传送所需的文件，或者可以在没有网络服务器的情况下从本地文件系统运行。后端可以按原样使用，也可以以一种受支持的语言嵌入到现有服务器应用程序中。
入门示例
- 创建一个HTML页面，并在其中引入mxGraph库。
<script type="text/javascript">
mxBasePath = 'javascript/src';
</script>
<script type="text/javascript" src="javascript/src/js/mxClient.js"></script>
- 创建一个div，用于容纳mxGraph图形。
<div id="graphContainer" style="position:relative;overflow:hidden;width:100%;height:100%;"></div>
- 在JavaScript中创建mxGraph实例，并将其添加到之前创建的div中。
var container = document.getElementById('graphContainer');
var graph = new mxGraph(container);
- 创建图形元素和连接器，并将它们添加到图形中。
// 创建两个图形元素
var vertex1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
var vertex2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
// 创建一条连接线
var edge = graph.insertEdge(parent, null, '', vertex1, vertex2);
- 运行页面，您将看到创建的图形。
这只是mxGraph的一个简单示例，如果您想更深入地学习mxGraph，还需参考官方文档。
基本概念
-
Graph: mxGraph的核心对象，表示整个图形。它包含图形元素、连接器等。
-
Cells: 表示图形中的节点或连接线，并可以具有各种属性，例如标签、样式和几何位置。
-
Model: 表示mxGraph的数据模型，负责维护图形元素和连接器。在图形中添加或删除单元格时，将更新该模型。
-
Views: 它们管理与绘制图形相关的所有信息，如滚动条、缩放级别、选择状态和当前显示的区域。
-
Stylesheet: 用于定义图形元素和连接器的样式。样式可以为某些元素建立默认值，同时允许对特定元素应用自定义样式。
-
Layouts: 自动排列节点的算法。使用布局可以使大量节点更好地组织在一起，使其更美观也更易于理解。mxGraph中提供了许多不同类型的布局。
-
图形事件：例如单击、双击、拖动、改变大小等事件。mxGraph具有内置的事件处理程序，允许您轻松地捕获和处理这些事件。
-
Connectors: 连接两个节点的线条。mxGraph支持不同类型的连接器，例如直线、曲线、箭头等。
-
Ports: 是一种特殊类型的单元格，用于在节点上定义连接点。它们可以是输入或输出端口，并且可以与相邻单元格连接。
-
缩放和滚动：mxGraph支持通过缩放和滚动来浏览和查看大型图形。您可以根据需要放大或缩小图形，并使用滚动条在图形中导航。
-
工具栏和菜单：mxGraph支持自定义工具栏和菜单，以便用户可以轻松地添加、删除或编辑图形元素。
-
导入和导出：mxGraph支持从其他源导入图形数据（如XML文件），并将其导出为多种格式，如JPEG、PNG和PDF等。这使得mxGraph是一个非常灵活的工具，可以与其他应用程序集成使用。
-
打印：mxGraph包含了有用的打印功能，可让您生成高质量的打印输出，适合各种场合，如报告、演示文稿等。
-
客户端事件：mxGraph支持很多事件（如鼠标单击、双击、拖拽等）的处理，在客户端完成前台处理，减少后台交互数据，提升用户体验。15. 服务器端事件：mxGraph还支持在服务器端处理事件，这样就可以执行像验证和数据库保存等更复杂的操作。
-
虚拟布局：mxGraph提供了一种虚拟布局算法来解决大型图形的布局问题。该算法使用分层分组法和分级约束算法来生成图形布局，以便效率更高、速度更快、可扩展性更强。
-
数据绑定：mxGraph支持将数据绑定到图形元素上，以实现数据和图形之间的同步，并实时更新图形。当数据发生变化时，图形也将自动更新，这在某些应用程序中非常有用。
-
插件系统：mxGraph提供了一个插件系统，允许您添加自定义功能，比如样式编辑器、标尺等等。通过使用插件系统，您可以使mxGraph更加适合您的特定需求。
熟悉了基本概念，接下来我们开始绘制一个拓扑图。