mxGraph "hello world" demo

现在开始学习 mxGraph，发现相关文档或者学习资料非常少，下边的例子是一个 hello world，中间添加了很多中文注释，在页面呈现状态如下：

<html>
<head>
   <title>Hello, World! example for mxGraph</title>

   <!-- 设置库的基本路径，如果不在同一目录中 -->
   <script type="text/javascript">
      mxBasePath = '../src';
   </script>

   <!-- 加载并初始化库 -->
   <script type="text/javascript" src="../src/js/mxClient.js"></script>

   <!-- 示例代码 -->
   <script type="text/javascript">
     //程序从这里开始 在中创建一个示例图
      //具有指定ID的DOM节点。调用此函数
      //来自文档的onLoad事件处理程序（见下文）
      function main(container)
      {
         // 检查浏览器是否受支持
         if (!mxClient.isBrowserSupported())
         {
            mxUtils.error('Browser is not supported!', 200, false);
         }
         else
         {
            // 在给定容器内创建图形
            var graph = new mxGraph(container);

            // 启用橡皮筋选择
            new mxRubberband(graph);

           //获取插入新单元格的默认父级。这个
            //通常是根的第一个子节点（即第0层）
            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();
            }
         }
      };
   </script>
</head>

<!-- Page将图表的容器传递给程序 -->
<body onload="main(document.getElementById('graphContainer'))">

   <!-- 使用网格壁纸为图形创建容器 -->
   <div id="graphContainer"
      style="overflow:hidden;width:321px;height:241px;background:url('editors/images/grid.gif')">
   </div>
</body>
</html>

mxGraph "hello world" demo

猜你喜欢