mxGraph学习（一）

图形可视化
mxGraph绘制的图片主要是由“点”（还包括矩形、圆形等基本形状）和“边”组成。
图形交互
mxGraph除绘制图片外，还提供编辑功能（拖拽、选择、复制、调整大小等）。
图形布局
自动排列图形元素，mxGraph提供多种布局方式，比如树形布局、栈形布局、圆形布局。
图形分析
与图相关的算法分析。

绘图方式

前端绘图方式

• HTML+CSS
  优点：最常用，开发简单，借助CSS3可以实现动画效果。
  缺点：非常依赖浏览器环境，迁移到原生应用或者客户端较麻烦。HTML、CSS没有合适的模块机制，图形复用麻烦。
• canvas
  百度的著名开源项目echarts就是通过canvas绘制的。
  优点：有强大的API，可以实现复杂的图形和效果；渲染速度快，可以利用显卡加速。
  缺点：非常依赖浏览器环境，低版本浏览器不支持；代码逻辑较复杂；不方便保存和导出。
• svg
  优点：运行环境宽泛，浏览器、绘图工具、编辑器都可以正常显示；良好的可编辑性，svg在前端可以通过JavaScript修改，后端也可以通过语言修改，还可以通过软件修改；使用简单，svg是xml语法，无复杂逻辑，配置修改；矢量图，无分辨率要求，缩放清晰。
  缺点：复杂图形渲染速度慢。

mxGraph默认绘制svg图形，支持后端语言进行预渲染，支持保存和导出

mxGraph的核心概念cell

cell可以理解为双向数据绑定中的数据模型。
修改图形时，通过mxGraph提供的API来修改mxCell实例的属性，然后mxGraph的绘图函数根据数据模型修改视图。

• mxGraph的图形分为vertex（点）和edge（边），但实际上都属于mxCell类的实例，只是属性值不同。

mxGraph的布局算法

• 所有的布局算法类都是继承基类mxGraphLayout，自定义了一些属性，同时实现API函数execute，mxGraph在绘制图形的时候会调用这个函数。
• 布局算法只涉及到vertex（点）的操作，当vertex被移动后，mxGraph会自动调整edge（隐藏或弯曲）。
• 如果需要绘制大量的图形容易造成性能问题，不应该在算法中出现。可以借助1.折叠/展开；2.钻取/弹出；3.分层过滤显示。

样式

mxGraph对样式的支持是不完善的。

• 不支持使用css，所以无法使用样式继承，样式类等特征。
• 修改的时候需要通过API，传入JSON对象。
• mxGraph内部操作样式的时候没有使用defs标签来声明样式类，而是直接修改标签的style、fill这些属性，会导致很多重复样式代码，同时不方便样式覆盖。