Ame's blog Ame's blog
首页
  • 前端核心

    • HTML
    • CSS
    • JavaScript
    • Web API接口
    • TypeScript
    • 浏览器
    • UI库
    • 前端框架
    • 前端工具库
  • 规范

    • 前端规范
  • 进阶

    • 架构之旅
跨端
后端
UI
  • 编译原理
  • 网络
  • 计算机组成
  • 数据结构与算法
  • 操作系统原理
  • 设计模式
  • 数据库
  • 网站
  • 前端通用资源
  • Vue资源
  • React资源
  • Node资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

Ame

跨端修炼者
首页
  • 前端核心

    • HTML
    • CSS
    • JavaScript
    • Web API接口
    • TypeScript
    • 浏览器
    • UI库
    • 前端框架
    • 前端工具库
  • 规范

    • 前端规范
  • 进阶

    • 架构之旅
跨端
后端
UI
  • 编译原理
  • 网络
  • 计算机组成
  • 数据结构与算法
  • 操作系统原理
  • 设计模式
  • 数据库
  • 网站
  • 前端通用资源
  • Vue资源
  • React资源
  • Node资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • vis-network中文文档

    • vis-network 入门
    • vis-network 功能预览
    • vis-network 模块系统
    • vis-network 配置项
    • vis-network Methods(方法)
      • 全局方法
        • destroy()
        • setData(nodes,edges)
        • on(event,callback)
        • off(event,callback)
        • once(event,callback)
      • canvas,dom相关方法
        • canvasToDOM(x,y)
        • DOMtoCanvas(x,y)
        • redraw()
        • setSize(width,height)
      • 集群(Clustering)
        • cluster(options)
        • clusterByConnection(nodeId,[options])
        • clusterByHubsize([hubsize],[options])
        • clusterOutliers([options])
        • findNodes(nodeId)
        • getClusteredEdges(baseEdgeId)
        • getBaseEdge(clusteredEdgeId)
        • getBaseEdges(clusteredEdgeId)
        • updateEdge(startEdgeId,options)
        • updateClusteredNode(clusteredNodeId,options)
        • isCluster(nodeId)
        • getNodesInCluster(clusterNodeId)
        • openCluster(nodeId,options)
      • 布局相关方法(Layout)
        • getSeed()
      • 可视化编辑相关方法
        • enableEditMode()
        • disableEditMode()
        • addNodeMode()
        • editNode()
        • addEdgeMode()
        • editEdgeMode()
        • deleteSelected()
      • 获取节点或边信息的方法
        • getPositions(nodeIds | nodeId)
        • getPosition(nodeId)
        • storePositions()
        • moveNode(nodeId,x,y)
        • getBoundingBox(nodeId)
        • getConnectedNodes(nodeId | edgeId,[direction])
        • getConnectedEdges(edgeId)
      • 物理引擎相关方法
        • startSimulation()
        • stopSimulation(edgeId)
        • stabilize([iterations])
      • 节点或边的选中方法
        • getSelection()
        • getSelectedNodes()
        • getSelectedEdges()
        • getNodeAt({x,y})
        • getEdgeAt({x,y})
        • selectNodes(nodeIds,[highlightEdges])
        • selectEdges(edgeIds)
        • setSelection(selection,[options])
        • unselectAll()
      • 用于控制视图缩放和动画的方法
        • getScale()
        • getViewPosition()
        • fit([options])
        • focus(nodeId,[options])
        • moveTo(options)
        • releaseNode()
      • 配置模块相关方法
        • getOptionsFromConfigurator()
    • vis-network Cluster(集群配置项)
    • vis-network 事件
    • vis-network 从外部导入数据
    • vis-network configure
    • vis-network edges(边)
    • vis-network nodes(节点)
    • vis-network groups(组)
    • vis-network layout(布局)
    • vis-network interaction(交互)
    • vis-network manipulation(可视化操作)
    • vis-network physics(物理引擎,物理模拟)
  • fabricJS中文文档

  • paperJS中文文档

  • pixiJS教程

  • spritejs

  • 数据可视化
  • vis-network中文文档
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 配置项 vis-network Cluster(集群配置项) →

最近更新
01
http状态码
04-18
02
el-lists
02-13
03
test
02-13
更多文章>
Theme by ame | Copyright © 2020-2022 Ame | MIT License | 鲁ICP备18003274号-2
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式