1. BUG

1.1 BUG触发情况

  在使用vis.js绘图时,加入两个节点A和B之间既存在一条从A指向B的边,同时也存在一条从B指向A的边,那么这个绘图库就会崩溃。

1.2 BUG解析

  vis.js是动态计算两个节点之间位置的,然后将其在页面上展示出来,而在上述介绍的情况下,在计算A和B之间的距离时,代码中会出现除0的BUG,导致程序崩溃。

2. 解决方案

  源码有3万多行,为了找这个BUG花了一周的时间,最终确定了出问题的函数。

  在vis.js源码第12258行(版本更新后位置可能不同),有个_calculateNodeForces()函数,源码如下:

  

/*** Calculate the forces the nodes apply on eachother based on a repulsion field.* This field is linearly approximated.** @private*/_calculateNodeForces: function () {var dx, dy, angle, distance, fx, fy, combinedClusterSize,repulsingForce, node1, node2, i, j;var nodes = this.calculationNodes;var nodeIndices = this.calculationNodeIndices;// approximation constantsvar a_base = -2 / 3;var b = 4 / 3;// repulsing forces between nodesvar nodeDistance = this.constants.physics.repulsion.nodeDistance;var minimumDistance = nodeDistance;// we loop from i over all but the last entree in the array// j loops from i+1 to the last. This way we do not double count any of the indices, nor i == jfor (i = 0; i < nodeIndices.length - 1; i++) {node1 = nodes[nodeIndices[i]];for (j = i + 1; j < nodeIndices.length; j++) {node2 = nodes[nodeIndices[j]];combinedClusterSize = node1.clusterSize + node2.clusterSize - 2;dx = node2.x - node1.x;dy = node2.y - node1.y;distance = Math.sqrt(dx * dx + dy * dy);minimumDistance = (combinedClusterSize == 0) ? nodeDistance : (nodeDistance * (1 + combinedClusterSize * this.constants.clustering.distanceAmplification));var a = a_base / minimumDistance;if (distance < 2 * minimumDistance) {if (distance < 0.5 * minimumDistance) {repulsingForce = 1.0;}else {repulsingForce = a * distance + b; // linear approx of  1 / (1 + Math.exp((distance / minimumDistance - 1) * steepness))
          }// amplify the repulsion for clusters.repulsingForce *= (combinedClusterSize == 0) ? 1 : 1 + combinedClusterSize * this.constants.clustering.forceAmplification;repulsingForce = repulsingForce / distance;fx = dx * repulsingForce;fy = dy * repulsingForce;node1.fx -= fx;node1.fy -= fy;node2.fx += fx;node2.fy += fy;}}}}
};

  这里面有个distance变量,已标红,就是这个变量在我们介绍的情况下会为0,然后它又作为一个被除数,所以程序崩溃。

  修改后的代码如下:

  

/*** Calculate the forces the nodes apply on eachother based on a repulsion field.* This field is linearly approximated.** @private*/_calculateNodeForces: function () {var dx, dy, angle, distance, fx, fy, combinedClusterSize,repulsingForce, node1, node2, i, j;var nodes = this.calculationNodes;var nodeIndices = this.calculationNodeIndices;// approximation constantsvar a_base = -2 / 3;var b = 4 / 3;// repulsing forces between nodesvar nodeDistance = this.constants.physics.repulsion.nodeDistance;var minimumDistance = nodeDistance;// we loop from i over all but the last entree in the array// j loops from i+1 to the last. This way we do not double count any of the indices, nor i == jfor (i = 0; i < nodeIndices.length - 1; i++) {node1 = nodes[nodeIndices[i]];for (j = i + 1; j < nodeIndices.length; j++) {node2 = nodes[nodeIndices[j]];combinedClusterSize = node1.clusterSize + node2.clusterSize - 2;dx = node2.x - node1.x;dy = node2.y - node1.y;distance = Math.sqrt(dx * dx + dy * dy);if(distance == 0){distance = 0.001;}minimumDistance = (combinedClusterSize == 0) ? nodeDistance : (nodeDistance * (1 + combinedClusterSize * this.constants.clustering.distanceAmplification));var a = a_base / minimumDistance;if (distance < 2 * minimumDistance) {if (distance < 0.5 * minimumDistance) {repulsingForce = 1.0;}else {repulsingForce = a * distance + b; // linear approx of  1 / (1 + Math.exp((distance / minimumDistance - 1) * steepness))
          }// amplify the repulsion for clusters.repulsingForce *= (combinedClusterSize == 0) ? 1 : 1 + combinedClusterSize * this.constants.clustering.forceAmplification;repulsingForce = repulsingForce / distance;fx = dx * repulsingForce;fy = dy * repulsingForce;node1.fx -= fx;node1.fy -= fy;node2.fx += fx;node2.fy += fy;}}}}
};

  加上一个判断让它不要为0即可。

转载于:https://www.cnblogs.com/14061216chen/p/8338128.html

vis.js绘图库的一个BUG以及源码修正相关推荐

  1. JS sojson.vX在线解密工具-附源码

    前言 此文仅用于技术科普,教育与研究用途,请勿用于商业甚至非法用途,否则一切后果自负.若用户利用此文章而受到惩处,本人及本平台对其行为概不负责,亦不承担任何连带责任. 在线工具 Sojson.v4ht ...

  2. C/C++ 如何快速解构一个系统的源码(如何看懂大型工程项目的源码)

    问: 研究一个开源系统源码的时候,总是不知道该从哪里研究. 我现在看源码从index文件开始看起,遇到包含的文件,就去看包含的文件, 包含的文件中又引用了其它的文件,总是觉得看来看去,很没有逻辑性. ...

  3. 一个http-request的源码及改进

    一个http-request的源码及改进 这个版本是基于Http-requesthttps://github.com/kevinsawicki/http-request进行升级的http-reques ...

  4. python跑酷游戏源码_Phaser.js实现简单的跑酷游戏附源码下载

    采用的物理引擎是Phaser.js 在这里对此引擎不做过多介绍(因为我也是小白,嘿嘿) 效果展示: 源码(详细源码图片资源可点击文章下方或屏幕右上方的github链接进行clone) 1.创建游戏舞台 ...

  5. 计算机毕业设计JavaVue.js音乐播放器设计与实现(源码+系统+mysql数据库+lw文档)

    计算机毕业设计JavaVue.js音乐播放器设计与实现(源码+系统+mysql数据库+lw文档) 计算机毕业设计JavaVue.js音乐播放器设计与实现(源码+系统+mysql数据库+lw文档) 本源 ...

  6. 分享网上找到的一个中国象棋源码

    代码的结构挺好,mvc模式的,给大家分享出来 原创不易,转载请注明出处:分享网上找到的一个中国象棋源码 部分代码 Controller.java package com.zuidaima.chess. ...

  7. java计算机毕业设计Vue.js音乐播放器设计与实现源码+数据库+系统+lw文档

    java计算机毕业设计Vue.js音乐播放器设计与实现源码+数据库+系统+lw文档 java计算机毕业设计Vue.js音乐播放器设计与实现源码+数据库+系统+lw文档 本源码技术栈: 项目架构:B/S ...

  8. 分享一个电影网站源码。自动抓取

    分享一个电影网站源码.下面是演示地址,可能UI方面有些不同. www.qwdianying.top 下载地址:https://pan.baidu.com/s/1VU16AkklpCZ-tiPCAZ51 ...

  9. vue.js实现的实名认证手机页面前端源码,代码完整

    大家好,今天给大家介绍一款,vue.js实现的实名认证手机页面前端源码(图1).送给大家哦,获取方式在本文末尾. 图1 带步骤提示(图2) 图2 带身份证验证(图3) 图3 带图片上传功能(图4) 图 ...

  10. 响应式高端网站模板源码图库素材资源下载平台源码

    首发好看的响应式高端网站模板源码图库素材 资源下载平台源码(可运营)可用于做娱乐网资源网,功能非常的齐全无任何加密也无任何后门!响应式高端网站模板源码图库素材 资源下载平台源码 页面很美观,堪比大型网 ...

最新文章

  1. Linux安装CentOS6(图文详解)新手入门
  2. python程序员月薪智的-在三线城市Python工程师也能拿到月薪20K
  3. [算法题] Search in Rotated Sorted Array ii
  4. 8086汇编复习4 - int指令 - 使用emu8086
  5. 关于子网划分的几个捷径
  6. update core.php 更新_PHP: 更新日志 - Manual
  7. 15.立体几何——介绍,为什么多个视图,深度和形状线索 测验,人类如何在3D中看到东西_1
  8. 菜鸟对新技术的一点看法
  9. 变压器绕组降低邻近效应_高功率UPS性能提升,规格/重量显著降低
  10. RDD创建及算子分类及应用
  11. 记录一次苏宁电商延保服务的体验
  12. ap音频测试仪软件,美国进口音频分析仪/AP音频测试仪/电声测试仪
  13. 云计算发展趋势-华为HCIA云计算学习笔记六
  14. iCloud和AppStore区别(为什么不让登陆iCloud)
  15. 10bit灰阶测试图_我可能买的是一块假10bit显示器以及一块假8bit显示器?
  16. 如何修改QT项目的项目名称?
  17. MapReduce打包jar包并运行的步骤操作以及重要的注意事项
  18. Android App通过蒲公英实现更新
  19. @Param注解的使用和解析
  20. C# SQLite 数据库基本操作

热门文章

  1. 编程基本功:BUG测试步骤尽可能用文档简化,突出重点
  2. Freeswitch配置:一台Freeswitch向另外一台Freeswitch转发视频会议命令
  3. 开培训会没人来,是正常的
  4. 开发人员的测试报告,要包含各平台
  5. Dex Loader] Failed to load D:\adt-bundle-windows-x86_64-20190307\sdk\build-tools\28.0.3\lib\dx.jar
  6. 显卡坏,导致机器无法启动
  7. C调用Python崩溃的记录
  8. 邮局只能寄指定大小的箱子
  9. jsp springmvc 视图解析器_SpringMVC 视图解析器
  10. hashmap为什么8转成红黑树_看了两天HashMap源码,终于把红黑树插入平衡规则搞懂了...