vis-network中文文档 - Methods(方法)

约码
2,591 阅读12分钟

原文

这是公共 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 }
    }

getPosition(nodeId)

  • 参数：

    • nodeId : String | Number

  • 返回值：

    • 节点位置信息

  • 用法：

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

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

    • 如果没有提供 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
}

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]
}

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]
}
或
{
  nodes: [Array of nodeIds]
}
或
{
  edges: [Array of edgeIds]
}

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

    • {
  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
  }
}

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
  }
}

    • 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
  }
}

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

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

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

releaseNode()

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

配置模块相关方法

getOptionsFromConfigurator()

  • 参数：
    • 无
  • 返回值：
    • 配置对象
  • 用法：
    • 如果使用configurator模块，则可以调用此方法来获取一个options对象，该对象包含用户与configurator交互所导致的与默认选项之间的所有差异。
avatar
文章
阅读
粉丝