分享一下我老师大神的人工智能教程!http://blog.csdn.net/jiangjunshow
也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!
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.isBrowserSupported())
-
{
-
mxUtils.error(
'Browser is not supported!',
200,
false);
-
}
-
else
-
{
-
// 在容器中创建图形
-
var graph =
new mxGraph(container);
-
// 禁用选择和单元格处理
-
graph.setEnabled(
false);
-
// 更改点风格的样式
-
var style = graph.getStylesheet().getDefaultVertexStyle();
-
style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ELLIPSE;
-
style[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter;
-
style[mxConstants.STYLE_GRADIENTCOLOR] =
'white';
-
style[mxConstants.STYLE_FONTSIZE] =
'10';
-
// 设置容器随内容自适应
-
//graph.setResizeContainer(true);
-
// 设置图大小
-
graph.gridSize =
40;
-
// 创建默认窗体
-
var parent = graph.getDefaultParent();
-
-
// 创建新的布局算法
-
var layout =
new mxFastOrganicLayout(graph);
-
-
// 移动距离
-
layout.forceConstant =
80;
-
-
// 动画效果选项
-
var