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

最新推荐文章于 2025-06-06 09:05:38 发布

原创

最新推荐文章于 2025-06-06 09:05:38 发布 · 894 阅读

0 ·

CC 4.0 BY-SA版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

分享一下我老师大神的人工智能教程！http://blog.youkuaiyun.com/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 animate = 
      
      
      docu

最低0.47元/天解锁文章

200万优质内容无限畅学