mxgraph进阶(三)Web绘图——mxGraph项目实战(精华篇)

最新推荐文章于 2024-04-28 22:16:36 发布

孙华强1

最新推荐文章于 2024-04-28 22:16:36 发布

阅读量823

点赞数

本文链接：https://blog.csdn.net/mm2zzyzzp/article/details/83239195

版权

本文介绍了使用mxGraph实现用户交互图的实战经验，包括从日志数据生成有向图，优化双向边的显示，以及算法的挑战与改进。通过案例展示了如何将行为序列转换为关联矩阵，进而绘制出用户行为的交互图。

摘要由CSDN通过智能技术生成

分享一下我老师大神的人工智能教程！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

最低0.47元/天解锁文章

孙华强1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
mxgraph进阶(三)Web绘图——mxGraph项目实战(精华篇)

分享一下我老师大神的人工智能教程！http://blog.csdn.net/jiangjunshow也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！ Web绘图——mxGraph项目实战(精华篇)声明&nbsp; &nbsp; 本文部分内容所属论文现已发表，请慎重对待。需求&nbsp; &nbsp; &nbsp; 由于小论文实验需求，需要实...
复制链接

扫一扫