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
交互所导致的与默认选项之间的所有差异。
- 如果使用