mxGraph从helloworld开始学习
helloword文件在源码的路径:
mxgraph-master\javascript\examples\helloworld.html
mxGraph中的Hello World,是一个简单的客户端的例子,显示了两个相连的“Hello”和“世界”的顶点标签。 这个例子演示了以下几件事:
- 创建一个嵌入了mxGraph客户端JavaScript的HTML页面;
- 创建了一个容器(即一个div节点)来装载mxGraph;
- 在图形mxGraph中加入所需的元素-顶点和边。
<!--
Copyright (c) 2006-2018, JGraph Ltd
Hello, World! example for mxGraph. This example demonstrates using
a DOM node to create a graph and adding vertices and edges.
该例子描述了如何使用一个节点,创建一个图片,并添加顶点和边
-->
<html>
<head>
<title>Hello, World! example for mxGraph</title>
<!-- Sets the basepath for the library if not in same directory
如果不在相同路径,需要设置basepath为开发库的路径。
maxBasepath用来定义css、图片、资源和js的使用目录。
必须加载在mxClient.js之前,而且不应该斜线 -->
<script type="text/javascript">
mxBasePath = '../src';
</script>
<!-- Loads and initializes the library 加载并初始化开发库,mxGraph库的路径-->
<!--mxClient.js是一个包含所有的mxGraph源代码的JavaScript文件。
从Web服务器下载时, 获得包含所有的JavaScript的单个文件,
要比分成多个独立文件要快得多,这是由于每个文件 都具有独立的请求/确认开销。
无论服务器对于一个客户的并行接口的能力差异有多大,速度的 提升通常至少是两倍以上。-->
<script type="text/javascript" src="../src/js/mxClient.js"></script>
<!-- Example code -->
<script type="text/javascript">
// Program starts here. Creates a sample graph in the
// DOM node with the specified ID. This function is invoked
// from the onLoad event