三、公共API：vis-network(visjs)api调用

YouZi_X

已于 2022-09-19 13:38:30 修改

阅读量1.9k

点赞数

分类专栏： visjs JavaScript 文章标签： vue.js

于 2021-11-30 00:41:18 首次发布

本文链接：https://blog.csdn.net/YouZi_X/article/details/121622932

版权

JavaScript 同时被 2 个专栏收录

14 篇文章 1 订阅

订阅专栏

visjs

8 篇文章 3 订阅

订阅专栏

3.Methods(方法)

公共API所有方法列表，Methods。
github地址：英文版

全局（移除network destroy，覆盖数据 setData，⭐️ 事件监听 on，移除监听 off，一次监听 once）。
canvas，dom相关
- ⭐️canvasToDOM :canvas坐标转相对于容器的DOM上的坐标。
- DOMtoCanvas:相对于关系图容器的DOM上的坐标转换为canvas坐标。
- redraw:重绘关系图。
- setSize:手动设置canvas大下。
集群（点和边的聚合）
- cluster:设置集群选项。
- clusterByConnection：将指定节点、与其连接的节点组成一个集群（可以通过选项对象来自定义）。
- clusterByHubsize：对符合条件的节点（连接边数量≥指定数量），均执行 clusterByConnection,例：//eg: 将具有三条边的节点组成一个集群 network.clusterByHubsize(3, [options])。
- clusterOutliers：将所有具有1个边的节点与它们各自的连接节点组成一个集群。
- findNodes：返回节点所在集群的关系数组，例：集群A包含集群B ，集群B包含集群C，集群‘C包含节点fred。network.clustering.findNode('fred') 将会返回 ['A','B','C','fred']。
- getClusteredEdges:类似 findnodes，根据提供的边id找到包含它的集群并返回该集群中所有的边id。
- getBaseEdges：对于给定的clusteredEdgeId，返回所有原始基础边缘id。对于非聚集边缘，将返回clusteredEdgeId。
- updateEdge：例： network.clustering.updateEdge (originalEdge.id，{ color: ’ # aa0000’}) ; 这将使基本边缘和任何后续边缘变成红色，所以当打开簇时，边缘都是相同的颜色。
- isCluster：nodeId是集群，则返回true。
- openCluster：打开群集，释放所包含的节点和边，删除群集节点和群集边。
- getNodesInCluster：返回一个由所有节点的 nodeId 组成的数组，如果您打开集群，这些节点将被释放。
布局
- getSeed，return：Number/String。获取当前布局的种子，将该’种子’并放入 layout.randomSeed 选项中，下次渲染就可以得到相同的布局。
可视化编辑
⭐️ *获取节点/边信息
- getPositions([nodeIds]|nodeId)：返回一组节点后单个节点在canvas中的位置{x，y}，参数非必填。
- getPosition(nodeId)：返回指定节点在canvas中的位置{x,y}，必填且存在，否则抛出错误。
- storePositions:当使用vis.DataSet 将节点加载进关系图中时，此方法将把所有节点的 x 和 y 位置也放到该数据集中（DataSet）。不支持集群。
- moveNode(String|Number nodeId,Number x,Number y)：移动节点。提供的x、y必须在canvas中。
- getBoundingBox(nodeId)：返回节点（包含标签）在canvas空间中的位置。
- ⭐️getConnectedNodes：返回直接连接到此节点或边缘的所有节点的 nodeid 数组。
  - 对于节点 id，返回与其连接的节点的id组成的数组。如果可选的参数方向设置为from‘ ，则只返回与其相连的父节点。如果方向设置为“ to” ，则只返回与其相连的子节点。否则返回父节点和子节点。
  - 对于边 id，返回一个数组: [ fromId，toId ]。边的方向参数会被忽略。
- getConnectedEdges：获取与指定节点连接的边的id组成的数组。
⭐️ 节点/边选中
- getSelection：返回一个含有已选中节点和边的对象。
- getSelectedNodes：获取已选中节点的id组成的数组。
- getSelectedEdges：获取已选中边的id组成的数组。
- getNodeAt({x,y})：返回一个在指定区域内的节点 id或undefined。 Dom 位置应该以canvas左上角为基点。
- getEdgeAt({x,y})：返回一个在指定区域内的边 id或undefined。 Dom 位置应该以canvas左上角为基点。
- selectNodes(Array nodeIds,[highlightEdges])：将指定节点设置为选中，如果 highlightEdges 为true或undefined，则也将选中相邻的边。
- selectEdges(Array edgeIds)：将指定边设置为选中。
- setSelection(Object selection,[Object options])：selection必须是包含节点数组或边数组的对象。
- unselectAll：取消所有的选中状态。
物理引擎

startSimulation：开始物理模拟。
stopSimulation：停止物理模拟并触发一个稳定事件，可以通过拖动节点、更改数据集或调用 startSimulation() 重新启动物理模拟。
stabilize([Number iterations])：稳定布局，可以指定稳定前的迭代次数。

视图缩放、动画

getScale：获取当前关系图的缩放级别，1.0是100%，0是无限放大。
getViewPosition：获取视图的中心

fit([Object options])：缩放所有节点以适应canvas。

  //nodes选项缩放视图中指定的节点
  //其他选项在下面的 moveTo ()描述中进行了说明。
  {
    nodes:[Array of nodeIds],
    animation: { // -------------------> can be a boolean too!
      duration: Number
  easingFunction: String
    }

focus(String nodeId,[Object options])：将视图聚焦到指定节点。如果指定节点移动，视图也将相应移动。如果用户拖动视图，则此次聚焦将中断。

  {
    scale: Number,
    offset: {x:Number, y:Number}
    locked: boolean
    animation: { // -------------------> can be a boolean too!
      duration: Number
      easingFunction: String
    }

moveTo(Object options)：设置动画或者相机，选项如下

  {
    //(以canvas为单位) 是相机中心焦点的位置
    position: {x:Number, y:Number},
    //缩放级别。 默认值是1.0
    scale: Number,
    //(以DOM为单位)是视图中心偏移量。 默认值为{ x: 0，y: 0}。
    offset: {x:Number, y:Number}
    animation: { // -------------------> can be a boolean too!
  //动画持续时间
      duration: Number
  //动画类型
      easingFunction: String
    }
  }

可用的动画类型有: linear，easeInQuad，easeOutQuad，easeInOutQuad，easeOutCubic，easeeinoutcubic，easeInQuart，easeOutQuart，easeeinquart，easeInQuint，easeOutQuint，easeeinoutquint。

必须定义scale, position 或者 offset中的一个或多个。否则，将不会发生移动。