mxGraph Tutorial

mxGraph介绍

mxGraph是一个支持图形交互的js框架.

mxGraph主要由一个包含所有mxGraph功能的JavaScript文件组成。这将加载到JavaScript部分的HTML web页面中，并在浏览器的HTML容器中执行。这是一个非常简单的架构，只需要一个能够提供html页面的web服务器和一个支持JavaScript的web浏览器.

1.1这项技术的主要优点是:
不需要第三方插件。这消除了对插件供应商的依赖。

不需要第三方插件。这消除了对插件供应商的依赖。
所涉及的技术是开源的，并且有许多开源的应用DEMO，没有任何一个供应商可以删除使您的应用程序在实践中无法运行的产品或技术
标准化技术，这意味着您的应用程序可以部署到支持绝大多数的浏览器，而不需要在客户端计算机上进行额外的配置或安装。大型企业环境通常不喜欢允许个人安装浏览器插件，也不喜欢更改发布到所有机器上的标准构建

mxGraph组件及其关系图

1.2 mxGraph可以用于什么应用程序?

DEMO的图形可视化库包括:流程图、工作流和BPM可视化、流程图、交通或水流,数据库和WWW可视化、网络和电信显示、地图应用GIS, UML图,电子电路,VLSI, CAD、金融和社会网络、数据挖掘、生物化学、生态循环、实体和因果关系和组织图表.

1.3 如何部署mxGraph ?

mxGraph 是一个典型的瘦客户端框架，mxGraph分为客户端JavaScript库和服务器端库，分别使用.NET和Java这两种受支持的语言之一。JavaScript库包使用标准web服务器交付给浏览器的更大的web应用程序中。浏览器所需要的只是运行JavaScript的能力。

1.4 mxGraph技术

mxGraph使用JavaScript实现浏览器上的客户端功能。JavaScript代码反过来使用活动浏览器上的底层矢量图形语言来呈现所显示的关系图，目前对所有受支持的浏览器都是SVG。mxGraph还包含了完全使用html呈现的特性，这限制了可用功能的范围，但适用于更简单的图表.

1.5 mxGraph许可

Apache 2.0 license

1.6 什么是图形?

图的可视化是基于网络的数学理论、图论。如果您正在寻找JavaScript条形图、饼图、甘特图，请查看谷歌charts项目，或者类似的图表

图由顶点(也称为节点)和边(节点之间的连接线)组成。图在视觉上的确切表现方式在图论中没有定义。单元格这个术语将在本手册中用于描述图的一个元素，包括边、顶点或组

A simple Graph

1.6.1图形可视化

可视化是创建一个有用的图形可视化表示的过程。可视化功能的范围是mxGraphs的主要优势之一。mxGraph支持多种功能，使单元格的显示仅受开发人员的技能和可用的平台功能的限制。顶点可以是形状、图像、矢量图、动画，实际上是浏览器中可用的任何图形操作。您还可以在顶点和边中使用HTML标记。

图形交互

交互是使用mxGraph的应用程序通过web应用程序GUI更改图形模型的方式。mxGraph支持拖放和克隆单元格、重新调整大小和形状、连接和断开连接、从外部源拖放、编辑单元格标签等等。mxGraph的主要优点之一是可以灵活地编程交互。

许多复杂的图形化web应用程序都依赖于与服务器的往返以形成显示，不仅是基本显示，还包括交互事件。虽然这通常被称为AJAX功能，但是这种服务器依赖并不适合于交互事件。在应用程序中，视觉反馈的时间超过0.2秒，通常会严重影响可用性。通过将所有交互都放在客户机上，mxGraph提供了应用程序的真实感觉，而不是看起来像一个愚蠢的远程终端。它还允许离线使用。

图的布局

在一个简单的应用程序中，可以在任何地方绘制图形单元格，包括一个单元格在另一个单元格之上。某些应用程序需要以一般有序或特定有序的结构表示其信息。这可能包括确保单元间不会重叠，并且彼此之间至少保持一定的距离，或者单元出现在相对于其他单元的特定位置，通常这些单元通过边缘连接在一起。这个活动称为布局应用程序，可以用多种方式帮助用户设置他们的图形。对于不可编辑的图形，布局应用程序是将布局算法应用于单元格的过程。对于交互式图形，即那些可以通过UI编辑的图形，布局应用程序可能只允许用户在特定位置对特定单元格进行更改，在每次更改图形后重新应用布局算法，或者在编辑完成时应用布局。

使用水平层次结构布局的工作流的布局

mxGraph支持一系列树、强制定向和层次布局，这些布局将满足大多数布局需求

在客户机-服务器体系结构中，有两种选择可以运行布局。Javascript版本提供了完全在客户机上运行布局的能力，而服务器端使用Java实现的相同布局允许在需要时将一些处理任务分配给服务器

图的分析涉及到确定图结构某些细节的算法的应用，例如确定两个单元之间的所有路径或最短路径。还有更复杂的图分析算法，这些算法通常应用于特定领域的任务。集群、分解和优化等技术往往针对特定的科学领域，在编写本文时还没有在核心mxGraph包中实现。

Shortest Path Analysis