mxGraph简单操作。

工作需要使用mxGraph。依着葫芦画瓢慢慢学，不足之处还望大家指点。

function main(container) {
    if (!mxClient.isBrowserSupported()) {
        mxUtils.error('Browser is not supported!', 200, false);
    } else {
        var graph = new mxGraph(container);//创建视图
        graph.setHtmlLabels(true);
        graph.setTolerance(20);
        graph.setEnabled(false); // 禁用选择和单元格处理

        var style = graph.getStylesheet().getDefaultVertexStyle();
        // style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_BOTTOM;//文字对齐方式
        // style[mxConstants.STYLE_FILLCOLOR] = 'rgb(251, 148, 79)'; //填充色 
        style[mxConstants.STYLE_FONTSIZE] = 14; //文字大小
        style[mxConstants.STYLE_FONTCOLOR] = "#fff"; //文字颜色
        style[mxConstants.STYLE_WHITE_SPACE] = 'wrap'; //自动换行
        delete style[mxConstants.STYLE_STROKECOLOR]; //去掉边框
        //鼠标拖动
        graph.setAutoSizeCells(true);
        graph.setPanning(true);
        graph.panningHandler.useLeftButtonForPanning = true;

        graph.setCellsResizable(false); // 禁止改变元素大小
        mxEvent.disableContextMenu(container); // 禁用浏览器默认的右键菜单栏

        // 缩放
        mxEvent.addMouseWheelListener(function(evt, up) {
            if (up) {
                graph.zoomIn();
            } else {
                graph.zoomOut();
            }
            mxEvent.consume(evt);
        });

        style = graph.getStylesheet().getDefaultEdgeStyle();
        style[mxConstants.STYLE_EDGE] = mxEdgeStyle.TopToBottom;
        style[mxConstants.STYLE_STROKECOLOR] = 'rgb(115, 121, 133)'; //连接线颜色
        delete graph.getStylesheet().getDefaultEdgeStyle()['endArrow']; //去掉箭头

        graph.addListener(mxEvent.DOUBLE_CLICK, function(sender, evt) {
            var cell = evt.getProperty('cell');
            console.log(cell)
        }); //双击事件

        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);
            graph.insertEdge(parent, null, ' ', v2, v1); //连接两个模块
        } finally {
            graph.getModel().endUpdate();
        }
    }
}

20170113201156.png