vis.js绘图库的一个BUG以及源码修正
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以及源码修正相关推荐
- JS sojson.vX在线解密工具-附源码
前言 此文仅用于技术科普,教育与研究用途,请勿用于商业甚至非法用途,否则一切后果自负.若用户利用此文章而受到惩处,本人及本平台对其行为概不负责,亦不承担任何连带责任. 在线工具 Sojson.v4ht ...
- C/C++ 如何快速解构一个系统的源码(如何看懂大型工程项目的源码)
问: 研究一个开源系统源码的时候,总是不知道该从哪里研究. 我现在看源码从index文件开始看起,遇到包含的文件,就去看包含的文件, 包含的文件中又引用了其它的文件,总是觉得看来看去,很没有逻辑性. ...
- 一个http-request的源码及改进
一个http-request的源码及改进 这个版本是基于Http-requesthttps://github.com/kevinsawicki/http-request进行升级的http-reques ...
- python跑酷游戏源码_Phaser.js实现简单的跑酷游戏附源码下载
采用的物理引擎是Phaser.js 在这里对此引擎不做过多介绍(因为我也是小白,嘿嘿) 效果展示: 源码(详细源码图片资源可点击文章下方或屏幕右上方的github链接进行clone) 1.创建游戏舞台 ...
- 计算机毕业设计JavaVue.js音乐播放器设计与实现(源码+系统+mysql数据库+lw文档)
计算机毕业设计JavaVue.js音乐播放器设计与实现(源码+系统+mysql数据库+lw文档) 计算机毕业设计JavaVue.js音乐播放器设计与实现(源码+系统+mysql数据库+lw文档) 本源 ...
- 分享网上找到的一个中国象棋源码
代码的结构挺好,mvc模式的,给大家分享出来 原创不易,转载请注明出处:分享网上找到的一个中国象棋源码 部分代码 Controller.java package com.zuidaima.chess. ...
- java计算机毕业设计Vue.js音乐播放器设计与实现源码+数据库+系统+lw文档
java计算机毕业设计Vue.js音乐播放器设计与实现源码+数据库+系统+lw文档 java计算机毕业设计Vue.js音乐播放器设计与实现源码+数据库+系统+lw文档 本源码技术栈: 项目架构:B/S ...
- 分享一个电影网站源码。自动抓取
分享一个电影网站源码.下面是演示地址,可能UI方面有些不同. www.qwdianying.top 下载地址:https://pan.baidu.com/s/1VU16AkklpCZ-tiPCAZ51 ...
- vue.js实现的实名认证手机页面前端源码,代码完整
大家好,今天给大家介绍一款,vue.js实现的实名认证手机页面前端源码(图1).送给大家哦,获取方式在本文末尾. 图1 带步骤提示(图2) 图2 带身份证验证(图3) 图3 带图片上传功能(图4) 图 ...
- 响应式高端网站模板源码图库素材资源下载平台源码
首发好看的响应式高端网站模板源码图库素材 资源下载平台源码(可运营)可用于做娱乐网资源网,功能非常的齐全无任何加密也无任何后门!响应式高端网站模板源码图库素材 资源下载平台源码 页面很美观,堪比大型网 ...
最新文章
- Linux安装CentOS6(图文详解)新手入门
- python程序员月薪智的-在三线城市Python工程师也能拿到月薪20K
- [算法题] Search in Rotated Sorted Array ii
- 8086汇编复习4 - int指令 - 使用emu8086
- 关于子网划分的几个捷径
- update core.php 更新_PHP: 更新日志 - Manual
- 15.立体几何——介绍,为什么多个视图,深度和形状线索 测验,人类如何在3D中看到东西_1
- 菜鸟对新技术的一点看法
- 变压器绕组降低邻近效应_高功率UPS性能提升,规格/重量显著降低
- RDD创建及算子分类及应用
- 记录一次苏宁电商延保服务的体验
- ap音频测试仪软件,美国进口音频分析仪/AP音频测试仪/电声测试仪
- 云计算发展趋势-华为HCIA云计算学习笔记六
- iCloud和AppStore区别(为什么不让登陆iCloud)
- 10bit灰阶测试图_我可能买的是一块假10bit显示器以及一块假8bit显示器?
- 如何修改QT项目的项目名称?
- MapReduce打包jar包并运行的步骤操作以及重要的注意事项
- Android App通过蒲公英实现更新
- @Param注解的使用和解析
- C# SQLite 数据库基本操作
热门文章
- 编程基本功:BUG测试步骤尽可能用文档简化,突出重点
- Freeswitch配置:一台Freeswitch向另外一台Freeswitch转发视频会议命令
- 开培训会没人来,是正常的
- 开发人员的测试报告,要包含各平台
- Dex Loader] Failed to load D:\adt-bundle-windows-x86_64-20190307\sdk\build-tools\28.0.3\lib\dx.jar
- 显卡坏,导致机器无法启动
- C调用Python崩溃的记录
- 邮局只能寄指定大小的箱子
- jsp springmvc 视图解析器_SpringMVC 视图解析器
- hashmap为什么8转成红黑树_看了两天HashMap源码,终于把红黑树插入平衡规则搞懂了...