本文介绍了使用mxGraph实现Web绘图的项目实战，包括根据用户日志生成有向图，以及在mxGraph基础上定制节点和边的动画效果。通过阅读源码，理解了mxGraph的启动加载原理和元素绘制过程，探讨了如何从基础实例转向可定制的图形布局。同时，文章提到了学习资源和相关技能提升，如SSR、jq+bs插件开发、Node.js部署等。
Web绘图——mxGraph项目实战(精华篇)
声明
本文部分内容所属论文现已发表，请慎重对待。
需求
由于小论文实验需求，需要实现根据用户日志提取出行为序列，然后根据行为序列生成有向图的形式，并且连接相邻动作的弧上标有执行此次相邻动作的频次，每个动作另附有一个数据集，这样有向图加数据集就构成了用户交互图。为此，自己想到了mxGraph，遂决定学习之。
起步
此次项目实战是受阅读参考文献[1]启发，并在其图形布局实例基础上进行。其原始界面如图1所示，自己要实现的界面布局与之颇有几分神似。只是该布局界面不支持节点与边的定制，为此需要结合经典的“Hello world”实例,其原始界面布局如图2所示。
图1 graphlayout实例
图2 Hello World!实例
由于自己是零基础开始学习这一Web绘图框架，首先是阅读其源码。有关mxgraph的启动加载原理及其元素了解，请阅读《mxgraph的初步介绍与开发入门》、《mxGraph教程-开发入门指南》两篇博文。
实例1源码阅读
<!Doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<title>图形布局</title>
<!-- 如果本文件的包与src不是在同一个目录,就要将basepath设置到src目录下 -->
<script type="text/javascript">
mxBasePath = '../src';
</script>
<!-- 引入支持库文件 -->
<script type="text/javascript" src="../src/js/mxClient.js"></script>
<!-- 示例代码 -->
<script type="text/javascript">
// 程序在此启动
function main(container)
{
// 检测浏览器兼容性
if (!mxClient.
最低0.47元/天 解锁文章
5598
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
