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

本文介绍了使用mxGraph实现Web绘图的项目实战,包括根据用户日志生成有向图的需求,从源码阅读到实例分析,以及针对双向边权重显示问题的优化。通过转变思想,利用关联矩阵简化问题,最终实现了一个能够展示用户交互图的高效解决方案。然而,算法的时间和空间复杂度较大,仍需进一步改进。

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

               

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 = document.getElementById('animate');// 添加按钮来更新布局document.body.insertBefore(mxUtils.button('圆形布局Circle Layout',function(evt){graph.getModel().beginUpdate();try{
    
    // 创建圆形布局算法var circleLayout = new mxCircleLayout(graph);circleLayout.execute(parent);}catch (e){
    
    throw e;}finally{
    
    
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值