一、基本概念

1、mxGraph是一款Javascript图形框架，基于Graph开发。mxGraph提供了基于浏览器的图形编辑和可视化方案，可以运行在任何主流浏览器上。

2、mxGraph提供了大量的组件和示例，可以帮助开发者构建业务流、绘图引擎等图形应用。开发者可以使用mxGraph提供的API，轻松创建基于mxGraph的图形应用。

3、mxGraph支持多种布局算法，如树形结构、网格和分层等，可以自动对节点进行排列。

二、快速开始

1、准备工作

引入mxGraph的JavaScript文件：

    <script src="https://cdn.jsdelivr.net/npm/mxgraph@4.0.0/javascript/mxClient.js"></script>

2、创建图形容器

使用JavaScript创建一个包含mxGraph的div，并指定样式和大小：

    <style>
      .graphContainer {
        border: 1px solid gray;
        width: 500px;
        height: 400px;
      }
    </style>

    <div class="graphContainer" id="graphContainer"></div>

3、创建图形实例

使用mxGraph构造函数创建一个实例，并将其绑定到我们所创建的div上：

    var container = document.getElementById('graphContainer');
    var graph = new mxGraph(container);

4、创建节点

使用mxCell、mxGeometry和mxGraphModel创建一个节点，并将其添加到图形中：

    var parent = graph.getDefaultParent();
    graph.getModel().beginUpdate();
    try {
      var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
      var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
      var e1 = graph.insertEdge(parent, null, '', v1, v2);
    } finally {
      graph.getModel().endUpdate();
    }

三、图形组件

1、节点（Vertex）

使用mxGraph.insertVertex()方法创建一个节点，并可以指定其位置、大小、样式、标签等属性。

    var vertex = graph.insertVertex(parent, null, 'Node', 20, 20, 80, 30, 'shape=ellipse');

2、连线（Edge）

使用mxGraph.insertEdge()方法创建一个连线，并可以指定其起点、终点、样式、标签等属性。

    var edge = graph.insertEdge(parent, null, 'Edge', v1, v2, 'strokeWidth=2;endArrow=classic;');

3、标签（Label）

可以在节点或连线上添加标签，使用mxGraph.insertVertex()方法创建带有label属性的节点：

    var vertex = graph.insertVertex(parent, null, 'Node', 20, 20, 80, 30, 'label=Node Label');

或使用mxCell.setAttribute()方法在已有节点或连线上添加标签：

    cell.setAttribute('label', 'New Label');

四、图形事件

mxGraph提供了丰富的事件机制，可以响应各种图形操作的事件，如节点选中、移动、缩放等。

1、事件注册

使用mxEvent.addListener()方法注册一个事件监听器，定义在该事件发生时所执行的函数。

    mxEvent.addListener(graph, 'zoom', function(sender, evt) {
      alert('Graph zoomed: ' + graph.view.scale);
    });

2、事件类型

常用的事件类型有：

  • mouseDown：鼠标按下事件
  • mouseMove：鼠标移动事件
  • mouseUp：鼠标释放事件
  • mouseWheel：鼠标滚轮事件
  • dblClick：双击事件
  • click：单击事件
  • connect：两个节点连接事件
  • disconnect：两个节点断开连接事件

五、布局算法

mxGraph提供了多种布局算法，可以自动布局节点和连线，使其看起来更加美观。

1、树形布局

使用mxHierarchicalLayout算法实现，可以自动排列树形结构。

    var layout = new mxHierarchicalLayout(graph);
    layout.execute(graph.getDefaultParent());

2、网格布局

使用mxGridLayout算法实现，将节点排列在规则的网格中。

    var layout = new mxGridLayout(graph);
    layout.execute(graph.getDefaultParent());

3、分层布局

使用mxStackLayout算法实现，将节点按层级分组排列。

    var layout = new mxStackLayout(graph, true);
    layout.execute(graph.getDefaultParent());

六、自定义样式

mxGraph提供了多种预定义的样式，如矩形、圆形、文本框等，也可以自定义样式，以满足不同场景的需求。

1、节点样式

在节点的style属性中设置自定义样式：

    var vertexStyle = 'shape=cylinder;fillColor=#FF9900;gradientColor=#FFFFFF;'
    var vertex = graph.insertVertex(parent, null, 'Node', 20, 20, 80, 30, vertexStyle);

2、连线样式

在连线的style属性中设置自定义样式：

    var edgeStyle = 'strokeColor=#6600FF;strokeWidth=2;endArrow=classic;';
    var edge = graph.insertEdge(parent, null, 'Edge', v1, v2, edgeStyle);

七、样式表

mxGraph支持CSS样式表，可以将各种样式定义在样式表中，并在需要时引用。

1、定义样式表

在HTML文档中定义样式表：

    <style id="mxStyle">
    .mxVertex {
      shape: ellipse;
      fillColor: #FFFFFF;
      strokeColor: #000000;
      strokeWidth: 2;
    }
    .mxEdge {
      strokeColor: #FF0000;
    }
    </style>

2、引用样式表

在mxGraph实例化时，将mxStyle样式表绑定到样式对象中：

    var container = document.getElementById('graphContainer');
    var graph = new mxGraph(container);
    var style = new mxStylesheet();
    style.parse(document.getElementById('mxStyle').textContent);

    graph.setStylesheet(style);

八、总结

mxGraph是一款强大的JavaScript图形框架，提供了丰富的组件、事件、布局算法和样式表等功能，可以用于各种图形应用的开发。

通过学习本文所讲解的内容，您已经能够使用mxGraph快速创建一个简单的图形应用，并且可以进一步了解mxGraph的高级功能。