Ame's blog
Ame
2020-05-27

vis-network Methods(方法)

这是公共 API 中所有方法的列表。 它们按类别分组，这些类别与上面列出的模块相对应。

# 全局方法

# destroy()

  • 参数：

    • 无

  • 返回值：

    • 无

  • 用法：

    从 DOM 中移除network实例。

# setData(nodes,edges)

  • 参数：

    • nodes: vis DataSet/Array
    • edges: vis DataSet/Array

  • 返回值：

    • 无

  • 用法：

    • 覆盖关系图中的所有数据。
    • 初始化关系图时会自动执行此方法。
    • 如果你在physics配置项中启用了'stabilization'，关系图将再次'stabilize(稳定)'。

# on(event,callback)

  • 参数：
    • event : String
    • callback: Function
  • 返回值：
    • 无
  • 用法：
    • 设置一个事件侦听器。
    • 根据事件的类型，可以在回调函数中获取不同的参数。 详情请查看文档中的事件部分。

# off(event,callback)

  • 参数：
    • event: String
    • callback: Function
  • 返回值：
    • 无
  • 用法：
    • 移除一个事件侦听器。
    • 提供的函数必须与在on函数中使用的函数完全相同。 如果没有提供任何函数，则将删除所有监听器。 详情请查看文档中的事件部分。

# once(event,callback)

  • 参数：
    • event: String
    • callback: Function
  • 返回值：
    • 无
  • 用法：
    • 只设置一次事件侦听器。 事件发生后，事件侦听器将被移除。
    • 根据事件的类型，可以在回调函数中获取不同的参数。详情请查看文档中的事件部分。

# canvas,dom相关方法

与canvas，Dom相关的方法

# canvasToDOM(x,y)

  • 参数：
    • x: Number
    • y: Number
  • 返回值：
    • 转换出的DOM坐标
  • 用法：
    • 将canvas坐标转换为相对于关系图容器的DOM上的坐标。
    • 输入和输出的格式为{ x: Number，y: Number }。

# DOMtoCanvas(x,y)

  • 参数：
    • x: Number
    • y: Number
  • 返回值：
    • 转换出的canvas坐标
  • 用法：
    • 将相对于关系图容器的DOM上的坐标转换为canvas坐标。
    • 输入和输出的格式为{ x: Number，y: Number }。

# redraw()

  • 参数：
    • 无
  • 返回值：
    • 无
  • 用法：
    • 重新绘制(渲染)关系图

# setSize(width,height)

  • 参数：
    • width: String
    • height: String
  • 返回值：
    • 无
  • 用法：
    • 手动设置canvas的大小。
    • 当窗口尺寸发生变化时会自动调用此方法设置canvas大小。

# 集群（Clustering）

集群可以理解为点，边聚合

# cluster(options)

  • 参数：
    • 无
  • 返回值：
    • 无
  • 用法：
    • 设置集群选项
    • 选项详情请查看集群部分

# clusterByConnection(nodeId,[options])

  • 参数：
    • nodeId: String
    • options: Object 可选参数
  • 返回值：
    • 无
  • 用法：
    • 将指定的节点、与其连接的节点组成一个集群。
    • 可以通过选项对象来自定义。 选项详情请查看集群部分
    • 选项中的joinCondition 将只作用于与其连接的节点。

# clusterByHubsize([hubsize],[options])

  • 参数：

    • hubsize: Number 可选参数
    • options: Object 可选参数

  • 返回值：

    • 无

  • 用法：

    • 检查关系图中的所有连接的边数量等于或大于hubsize的节点。

    • 如果未定义hubsize，则将hubsize设置为平均值加两个标准偏差。

    • 对于所有符合条件的节点，将在每个节点上执行 clusterByConnection。

    //eg: 将具有三条边的节点组成一个集群 network.clusterByHubsize(3, [options]); ```

# clusterOutliers([options])

  • 参数：
    • options: Object 可选参数
  • 返回值：
    • 无
  • 用法：
    • 将所有具有1个边的节点与它们各自的连接节点组成一个集群
    • 选项详情请查看集群部分

# findNodes(nodeId)

  • 参数：
    • nodeId: String/Number
  • 返回值：
    • [集群包含关系数组]
  • 用法：
    • 节点可以在集群中。 集群也可以在集群中。在此前提下此函数将返回节点在集群中的包含关系数组。
    • 如果当前节点列表中不存在关系链中的任何nodeId（尤其是作为参数传入的第一个nodeId），则返回一个空数组。
    • 例如: 集群A包含集群B ，集群B包含集群C，集群‘C包含节点fred。network.clustering.findNode('fred') 将会返回 ['A','B','C','fred']。

# getClusteredEdges(baseEdgeId)

  • 参数：
    • baseEdgeId: String
  • 返回值：
    • [edges]
  • 用法：
    • 类似于 findNode()方法
    • 根据提供的边id找到包含它的集群并返回该集群中所有的边id

# getBaseEdge(clusteredEdgeId)

  • 参数：
    • clusteredEdgeId: String
  • 返回值：
    • baseEdgeId
  • 用法：
    • 当 clusteredEdgeId（集群边id）可用时，根据提供的集群边id,返回data.edges中提供的所有原始基础边缘ID
    • 不推荐使用此方法。请使用 getBaseEdges ()代替。

# getBaseEdges(clusteredEdgeId)

  • 参数：
    • clusteredEdgeId: String
  • 返回值：
    • [baseEdgeId]
  • 用法：
    • 对于给定的clusteredEdgeId，此方法将返回data.edges中提供的所有原始基础边缘ID。 对于非集群（即'base'）边缘，将返回clusteredEdgeId。
    • 只返回基边缘 id。 在 clusteredgeId 下的所有聚集边缘 id 都被跳过，但是递归扫描以返回它们的基本 id。

# updateEdge(startEdgeId,options)

  • 参数：
    • startEdgeId: String
    • options: Object
  • 返回值：
    • 无
  • 用法：
    • 聚集节点之间的可见边缘与创建网络时传递的 data.edges 中提供的边缘不同
    • 通过每一层聚类，在聚类之间创建边的副本，并隐藏之前的边，直到聚类被打开。
    • 这种方法需要一个 edgeId (即。 一个来自 data.edges 的基本 edgeId) ，并将选项和聚类时从中创建的任何边应用到它。
    • 例如: network.clustering.updateEdge (originalEdge.id，{ color: ’ # aa0000’}) ; 这将使基本边缘和任何后续边缘变成红色，所以当打开簇时，边缘都是相同的颜色。

# updateClusteredNode(clusteredNodeId,options)

  • 参数：
    • clusteredNodeId: String
    • options: Object
  • 返回值：
    • 无
  • 用法：
    • 创建时的集群节点不包含在创建网络时传递的原始 data.Nodes 中此方法更新集群节点。
    • Example: network.clustering.updateClusteredNode(clusteredNodeId, {shape : 'star'});

# isCluster(nodeId)

  • 参数：
    • nodeId: String
  • 返回值：
    • Boolean
  • 用法：
    • nodeId是集群，则返回true。

# getNodesInCluster(clusterNodeId)

  • 参数：
    • clusterNodeId: String
  • 返回值：
    • [nodeid]
  • 用法：
    • 返回一个数组，其中包含如果打开群集将释放的所有节点的 nodeid。

# openCluster(nodeId,options)

  • 参数：
    • nodeId: String
    • options: Object
  • 返回值：
    • Boolean
  • 用法：
    • 打开群集，释放所包含的节点和边，删除群集节点和群集边。 Options 对象是可选的，目前支持一个选项 releaseFunction，该函数可用于在集群打开后手动定位节点。
    • function releaseFunction (clusterPosition, containedNodesPositions) { var newPositions = {}; // clusterPosition = {x:clusterX, y:clusterY}; // containedNodesPositions = {nodeId:{x:nodeX,y:nodeY}, nodeId2....} newPositions[nodeId] = {x:newPosX, y:newPosY}; return newPositions; }
    • Containednodespositions 包含聚集时集群中节点的位置。 这个函数将返回 newPositions，它可以是 containedNodesPositions (修改过的) ，也可以是一个新对象。 这必须是一个具有键值等于 containedNodesPositions 中存在的 nodeid 和{ x: x，y: y } position 对象的对象。
    • 对于这个返回的对象中没有列出的所有 nodeid，我们将把它们放在集群的位置。 这也是没有定义 releaseFunction 时的默认行为。

# 布局相关方法（Layout）

# getSeed()

  • 参数：
    • 无
  • 返回值：
    • Number/String
  • 用法：
    • 获取当前布局的'种子'，
    • 将该'种子'并放入 layout.randomSeed 选项中，下次渲染就可以得到相同的布局。

# 可视化编辑相关方法

# enableEditMode()

  • 参数：
    • 无
  • 返回值：
    • 无
  • 用法：
    • 以编程方式启用编辑模式。类似于按下编辑按钮。

# disableEditMode()

  • 参数：
    • 无
  • 返回值：
    • 无
  • 用法：
    • 以编程方式禁用编辑模式。类似于按下关闭图标(在工具栏角上的小十字)。

# addNodeMode()

  • 参数：
    • 无
  • 返回值：
    • 无
  • 用法：
    • 进入添加节点模式。
    • disableEditMode ()退出模式。
    • handlerFunctions 中定义的回调函数仍然可用。
    • 在没有可视化化编辑界面下使用这些方法，请确保将 manipulation.enabled 设置为 false。

# editNode()

  • 参数：
    • 无
  • 返回值：
    • 无
  • 用法：
    • 编辑选定的节点。类似addNodeMode()

# addEdgeMode()

  • 参数：
    • 无
  • 返回值：
    • 无
  • 用法：
    • 进入添加边模式，类似addNodeMode()

# editEdgeMode()

  • 参数：
    • 无
  • 返回值：
    • 无
  • 用法：
    • 进入编辑边模式，类似addNodeMode()

# deleteSelected()

  • 参数：
    • 无
  • 返回值：
    • 无
  • 用法：
    • 删除选中。

# 获取节点或边信息的方法

# getPositions(nodeIds | nodeId)

  • 参数：

    • nodeIds | nodeId : Array | String

  • 返回值：

    • 节点位置信息

  • 用法：

    • 返回一组节点或单个节点在canvas中的 {x ,y} 位置

    •   // 获取所有的节点位置.
  network.getPositions();
  >   {
          a123: { x: 5, y: 12 },
          b456: { x: 3, y: 4 },
          c789: { x: 7, y: 10 }
      }
  
  
  //获取一组节点的位置.
  network.getPositions(['a123', 'b456']);
  >   {
          a123: { x: 5, y: 12 },
          b456: { x: 3, y: 4 },
      }
  
  
  //获取一个节点的位置.
  network.getPositions('a123');
  >   {
          a123: { x: 5, y: 12 }
      }
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23

# getPosition(nodeId)

  • 参数：

    • nodeId : String | Number

  • 返回值：

    • 节点位置信息

  • 用法：

    • 返回指定节点的canvas中的 {x ,y} 位置。

    •   network.getPosition('a123');
  >   { x: 5, y: 12 }
      1
      2
      3

    • 如果没有提供 id，该方法将抛出 TypeError

    • 如果提供的 id 与网络中的节点不对应，则该方法将抛出 ReferenceError。

# storePositions()

  • 参数：
    • nodeId : String | Number
  • 返回值：
    • 无
  • 用法：
    • 当使用vis.DataSet 将节点加载进关系图中时，此方法将把所有节点的 x 和 y 位置也放到该数据集中（DataSet）。当使用DataSet 的add()方法动态添加数据时，关系图将迅速完成渲染。
    • 如果节点仍在移动，并且您使用的是动态平滑边缘(默认情况下是打开的) ，则可以使用physics.stabilization.onlydynamicedges 选项来优化初始化时间。
    • 此方法不支持集群。

# moveNode(nodeId,x,y)

  • 参数：
    • nodeId: String | Number
    • x: Number
    • y: Number
  • 返回值：
    • 无
  • 用法：
    • 移动节点。 提供的 x 和 y 位置必须在canvas中

# getBoundingBox(nodeId)

  • 参数：

    • nodeId : String

  • 返回值：

    • 节点位置

  • 用法：

    • 返回节点（包含标签）在canvas空间中的位置

    •   {
    top: Number,
    left: Number,
    right: Number,
    bottom: Number
  }
      1
      2
      3
      4
      5
      6

# getConnectedNodes(nodeId | edgeId,[direction])

  • 参数：
    • nodeId: String | Number
    • x: Number
    • y: Number
    • direction: String 方向
  • 返回值：
    • [节点数组]
  • 用法：
    • 返回直接连接到此节点或边缘的所有节点的 nodeid 数组。
    • 对于节点 id，返回与其连接的节点的id组成的数组。 如果可选的参数方向设置为from‘ ，则只返回与其相连的父节点。 如果方向设置为“ to” ，则只返回与其相连的子节点。 否则返回父节点和子节点。
    • 对于边 id，返回一个数组: [ fromId，toId ]。边的方向参数会被忽略。

# getConnectedEdges(edgeId)

  • 参数：
    • edgeId: String
  • 返回值：
    • [边数组]
  • 用法：
    • 获取与指定节点连接的边的id组成的数组

# 物理引擎相关方法

# startSimulation()

  • 参数：
    • 无
  • 返回值：
    • 无
  • 用法：
    • 开始物理模拟。

# stopSimulation(edgeId)

  • 参数：
    • 无
  • 返回值：
    • 无
  • 用法：
    • 停止物理模拟并触发一个稳定的事件。
    • 可以通过拖动节点、更改数据集或调用 startSimulation ()重新启动物理模拟。

# stabilize([iterations])

  • 参数：
    • iterations： Number 迭代次数
  • 返回值：
    • 无
  • 用法：
    • 稳定布局。
    • 可以指定稳定前的迭代次数。

# 节点或边的选中方法

# getSelection()

  • 参数：

    • 无

  • 返回值：

    • 选中的节点及边组成的对象

  • 用法：

    • 返回一个含有已选中节点和边的对象，如下所示:

    •   {
    nodes: [Array of selected nodeIds],
    edges: [Array of selected edgeIds]
  }
      1
      2
      3
      4

# getSelectedNodes()

  • 参数：
    • 无
  • 返回值：
    • 选中的节点组成的数组
  • 用法：
    • 获取已选中节点的id组成的数组，如下所示: [ nodeId1，nodeId2，. . ]。

# getSelectedEdges()

  • 参数：
    • 无
  • 返回值：
    • 选中的边组成的数组
  • 用法：
    • 获取已选中边的id组成的数组，如下所示: [ edgeId1，edgeId2，. . ]。

# getNodeAt({x,y})

  • 参数：
    • x: xPosition Dom
    • y: yPosition Dom
  • 返回值：
    • 返回在指定区域内的节点ID
  • 用法：
    • 返回一个在指定区域内的节点 id或undefined。 Dom 位置应该以canvas左上角为基点。

# getEdgeAt({x,y})

  • 参数：
    • x: xPosition Dom
    • y: yPosition Dom
  • 返回值：
    • 返回在此区域内的边ID
  • 用法：
    • 返回一个在指定区域内的边 id或undefined。 Dom 位置应该以canvas左上角为基点。

# selectNodes(nodeIds,[highlightEdges])

  • 参数：
    • nodeIds: Array
    • highlightEdges: Boolean,是否需要高亮与其连接的边
  • 返回值：
    • 无
  • 用法：
    • 将指定节点设置为选中。
    • 如果 highlightEdges 为true或undefined，则也将选中相邻的边。
    • 此方法会在设置选中指定节点之前取消选中其他的节点。
    • 不会触发事件。

# selectEdges(edgeIds)

  • 参数：
    • edgeIds: Array
  • 返回值：
    • 无
  • 用法：
    • 将指定边设置为选中。
    • 此方法会在设置选中指定节点之前取消选中其他的节点。
    • 不会触发事件。

# setSelection(selection,[options])

  • 参数：

    • selection: Object,
    • options: Object

  • 返回值：

    • 无

  • 用法：

    • `selection必须是这样的对象:。

    •   {
    nodes: [Array of nodeIds],
    edges: [Array of edgeIds]
  }
  或
      1
      2
      3
      4
      5

{ nodes: [Array of nodeIds] } 或 { edges: [Array of edgeIds] } ```

- 设置选中时可用的选项有:

- ```javascript
    {
      unselectAll: Boolean,
      highlightEdges: Boolean
    }
    ```

# unselectAll()

  • 参数：
    • 无
  • 返回值：
    • 无
  • 用法：
    • 取消所有的选中状态。不触发事件。

# 用于控制视图缩放和动画的方法

# getScale()

  • 参数：
    • 无
  • 返回值：
    • 缩放级别数字
  • 用法：
    • 获取当前的关系图缩放级别。1.0是100% ，0是无限放大。

# getViewPosition()

  • 参数：
    • 无
  • 返回值：
    • { x: { Number } ，y: { Number }}
  • 用法：
    • 获取视图的中心

# fit([options])

  • 参数：

    • options:Object 可选参数

  • 返回值：

    • 视图中心

  • 用法：

    • 缩放所有节点以适应canvas。可以提供如下的自定义选项:

    • 在 fit方法中，options 对象是可选的。

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

} ```

# focus(nodeId,[options])

  • 参数：

    • nodeId: String
    • options: Object

  • 返回值：

    • 无

  • 用法：

    • 将视图中心聚焦到指定的节点上。

    • 如果指定节点移动，视图也将相应移动。 如果用户拖动视图，则此次聚焦将中断。 你可以提供自定义效果的选项:

    •   {
    scale: Number,
    offset: {x:Number, y:Number}
    locked: boolean
    animation: { // -------------------> can be a boolean too!
      duration: Number
      easingFunction: String
    }
      1
      2
      3
      4
      5
      6
      7
      8

    } ```

    • locked表示放大或缩小动画完成后视图是否仍锁定在节点上。 默认值为 true。

    • 除了``locked`之外的所有选项都在下面的 moveTo ()描述中进行了说明。

    • 在 focus 方法中，options 对象是可选的。

# moveTo(options)

  • 参数：

    • options: Object

  • 返回值：

    • 无

  • 用法：

    • You can animate or move the camera using the moveTo method。

    • 选项如下:

    •   {
    //(以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
    }
  }
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14

    • 对于动画，您可以使用animation: false来禁用或者使用默认选项或者也可以手动定义时间长度(以毫秒为单位)和动画类型。

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

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

# releaseNode()

  • 参数：
    • 无
  • 返回值：
    • 无
  • 用法：
    • 释放聚焦的节点

# 配置模块相关方法

# getOptionsFromConfigurator()

  • 参数：
    • 无
  • 返回值：
    • 配置对象
  • 用法：
    • 如果使用configurator模块，则可以调用此方法来获取一个options对象，该对象包含用户与configurator交互所导致的与默认选项之间的所有差异。
编辑 (opens new window)
上次更新: 2021/03/31, 22:03:00
vis-network 配置项
vis-network Cluster(集群配置项)

← vis-network Cluster(集群配置项) →

最近更新
01
面向过程,面向对象,面向函数,面向切面
09-04
02
test
08-15
03
npm中依赖类型
08-15
更多文章>
Theme by ame | Copyright © 2020-2022 Ame | MIT License | 鲁ICP备18003274号-2