DK Rao's Blog
DK Rao
2024-09-29
前端 API文档
目录

Vis-Network中文API文档

# vis-network 入门

# Network(关系图)

关系网是由节点和边组成，关系网易于使用，支持自定义形状、样式、颜色、大小、图像等。关系网在任何现代浏览器上都能顺畅的工作，最多可支持几千个节点。

从4.0开始，关系网由处理关系图特定部分的各个模块组成。每个模块都有独立的说明文档，通过单击下面列表中的模块可以访问模块的选项、方法和事件。

# 创建Network

你很容易创建一个关系网(network实例)。但是在创建之前请正确引入vis.js和css文件。

当你引入这些文件后还需要指定节点和边数据。

当然你也可以使用DOT语言或从Gephi导出节点和边数据，但在教程中我们暂不涉及这些。

您还可以使用vis.Datasets进行动态数据绑定，例如，在初始化网络后更改颜色、标签或任何选项。

一旦你有了数据，你所需要的就是一个容器div来告诉vis把你的关系网放到哪里。此外，还可以使用选项对象来自定义关系网。

简单示例 (opens new window)（使用standalone build方式）：

//源码
<html>
<head>
    <script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>

    <style type="text/css">
        #mynetwork {
            width: 600px;
            height: 400px;
            border: 1px solid lightgray;
        }
    </style>
</head>
<body>
<div id="mynetwork"></div>

<script type="text/javascript">
    // 创建节点数据数组
    var nodes = new vis.DataSet([
        { id: 1, label: "Node 1" },
        { id: 2, label: "Node 2" },
        { id: 3, label: "Node 3" },
        { id: 4, label: "Node 4" },
        { id: 5, label: "Node 5" }
    ]);

    // 创建边数据数组
    var edges = new vis.DataSet([
        { from: 1, to: 3 },
        { from: 1, to: 2 },
        { from: 2, to: 4 },
        { from: 2, to: 5 },
        { from: 3, to: 3 }
    ]);

    // 获取容器
    var container = document.getElementById('mynetwork');

    // 将数据赋值给vis 数据格式化器
    var data = {
        nodes: nodes,
        edges: edges
    };
    var options = {};

    // 初始化关系图
    var network = new vis.Network(container, data, options);
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

# vis-network 功能预览

# vis-network 模块系统

模块名 功能
configure 生成交互式配置项编辑器等。
edges 处理边的创建和删除、管理全局边配置项和样式等。
groups 处理节点组及组配置项等。
interaction 管理所有与关系图的交互、处理鼠标和触摸事件、可视化导航按钮以及弹出窗事件等。
layout 管理初始布局和层级布局等。
manipulation 可视化编辑节点，边等。
nodes 处理节点的创建和删除、管理全局节点配置项和样式等。
physics 管理物理模拟（引擎）等。

# vis-network 配置项

var options = {
  autoResize: true,
  height: '100%',
  width: '100%',
  locale: 'en',
  locales: locales,
  clickToUse: false,
  configure: {...},    // 详细配置请查看'配置'模块，
  edges: {...},        // 详细配置请查看'边'模块，
  nodes: {...},        // 详细配置请查看'节点'模块，
  groups: {...},       // 详细配置请查看'组'模块，
  layout: {...},       // 详细配置请查看'布局'模块，
  interaction: {...},  // 详细配置请查看'交互'模块，
  manipulation: {...}, // 详细配置请'可视化操作'模块，
  physics: {...},      // 详细配置请查看'物理引擎'模块，
}

network.setOptions(options);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 配置项

名称 类型 默认值 描述
autoResize Boolean true 设置为true，network实例将自动调整容器的大小，并重绘。
设置为 false，network实例将不会自动调整，但是你可以使用redraw()和 setSize()手动调整容器大小及重绘。
width String '100%' 绘制区域的宽度，注意区分容器宽度。
示例：'60%'或'400px'
height String '100%' 绘制区域的高度，注意区分容器高度。
示例：'60%'或'400px'
locale String 'en' 选择语言，默认为英语。
locales Object defaultLocales 设置语言格式化对象。
默认支持 'en', 'de', 'es', 'it', 'nl' 'pt-br', 'ru' ，可自定义locales 。
clickToUse Boolean false 当 clickToUse设置为true时，network实例只有在激活时才会对鼠标和触摸事件作出响应。
当激活时，一个蓝色的阴影边框将围绕实例。
通过点击实例设置为激活，通过点击实例外部或按 ESC 键将其设置为失活。
configure Object Object 点击 配置模块 查看配置详情
edges Object Object 点击 边模块 查看配置详情
nodes Object Object 点击 节点模块查看配置详情
groups Object Object 点击 组模块 查看配置详情
layout Object Object 点击 布局模块 查看配置详情
interaction Object Object 点击 交互模块 查看配置详情
manipulation Object Object 点击可视化操作模块 查看配置详情
physics Object Object 点击 物理引擎模块 查看配置详情

# 自定义locales

locales 对象具有以下格式:

//主要是配置'可视化编辑'时的提示。
var locales = {
  en: {
    edit: 'Edit',
    del: 'Delete selected',
    back: 'Back',
    addNode: 'Add Node',
    addEdge: 'Add Edge',
    editNode: 'Edit Node',
    editEdge: 'Edit Edge',
    addDescription: 'Click in an empty space to place a new node.',
    edgeDescription: 'Click on a node and drag the edge to another node to connect them.',
    editEdgeDescription: 'Click on the control points and drag them to a node to connect to it.',
    createEdgeError: 'Cannot link edges to a cluster.',
    deleteClusterError: 'Clusters cannot be deleted.',
    editClusterError: 'Clusters cannot be edited.'
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

如果想要重新定义你自己的语言环境，你可以更改'键'(示例是“en”)，并修改该对象内部的‘value’(例如Edit“)。 这样你就可以得到你想要的locales

# 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]);
    1
    2

# 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
    24
    25

# getPosition(nodeId)

  • 参数：

    • nodeId : String | Number

  • 返回值：

    • 节点位置信息

  • 用法：

    • 返回指定节点的canvas中的 {x ,y} 位置。
          network.getPosition('a123');
      >   { x: 5, y: 12 }
    1
    2

    • 如果没有提供 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]
      }
      或
      {
        nodes: [Array of nodeIds]
      }
      或
      {
        edges: [Array of edgeIds]
      }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    • 设置选中时可用的选项有:
          {
        unselectAll: Boolean,
        highlightEdges: Boolean
      }
    1
    2
    3
    4

# 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
    9

# 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
    9

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

# vis-network Cluster(集群配置项)

提供给集群方法的配置对象(options)可以包含以下属性:

名称
joinCondition(
    nodeOptions: Object
)
or
joinCondition(
    parentNodeOptions: Object,
    childNodeOptions: Object
)		 Function 除集群方法外的所有方法均可选。
clusterbyConnection 是唯一一个将2个 nodeOptions 对象作为参数传递给 joinCondition 回调的集群方法。
集群模块将循环遍历选定在集群中的所有节点，并用它们的数据（包含节点配置项）作为参数调用这个函数。 如果此函数返回 true，则此节点将被添加到集群中。
你可以访问所有的节点配置项(包括默认配置项)以及可能已经添加到节点的任何自定义字段，以确定是否将其包含在集群中。 例子:
var nodes = [
    {id: 4, label: 'Node 4'},
    {id: 5, label: 'Node 5'},
    {id: 6, label: 'Node 6', cid:1},
    {id: 7, label: 'Node 7', cid:1} ]
var options = {
    joinCondition:  function(nodeOptions) {
            return nodeOptions.cid === 1;
} }
network.clustering.cluster(options);
clusterbyConnection 将传递2个 nodeOptions 对象作为 joinCondition 回调的参数。
processProperties(
    clusterOptions: Object,
    childNodesOptions: Array,
    childEdgesOptions: Array
)		 Function 可选的。 在创建新的集群节点之前，将使用您提供的属性(clusterNodeProperties)调用这个(可选的)函数，包含所有节点和所有包含的边。 您可以使用它根据集群包含的项更新集群的属性。 该函数应该返回创建集群节点的属性。 在下面的例子中，我们确保在形成集群时保存‘’mass‘’和''value'':
var options = {
    processProperties: function (clusterOptions, childNodes, childEdges) {
    var totalMass = 0;
    var totalValue = 0;
    for (var i = 0; i < childNodes.length; i++) {
        totalMass += childNodes[i].mass;
        totalValue = childNodes[i].value ? totalValue + childNodes[i].value : totalValue;
    }
    clusterOptions.mass = totalMass;
     if (totalValue > 0) {
        clusterOptions.value = totalValue;
    }
    return clusterOptions;
    },
}
clusterNodeProperties Object 可选的。 这是一个包含''集群节点''配置项的对象。 允许节点模块中描述的所有配置项。 这允许您自定义集群节点的样式。 这也是提供给 processProperties 函数的样式对象。如果undefined，将使用默认节点配置项。
在默认情况下只允许将2个或以上的节点进行集群。 要允许对单个节点进行集群，可以使用 allowSingleNodeCluster: true 属性。
clusterNodeProperties: { allowSingleNodeCluster: true }
clusterEdgeProperties Object 可选的。 这是一个包含连接到''集群节点''的边的配置项对象。 允许边模块中描述的所有配置项。 使用这个，你可以自定义连接到集群的边。 如果没有提供，则使用被替换边缘的选项。 如果未定义，将使用默认边缘选项。

# vis-network 事件

这些事件由交互模块触发。它们与用户输入相关。

# 交互、选择、拖动等事件

# 单击 - click

当用户单击鼠标或触摸屏设备时激发。

network.on('click',function(properties){})

**properties**包含的内容如下，同时这也是所有事件共有的结构。
{
  nodes: [Array of selected nodeIds],
  edges: [Array of selected edgeIds],
  event: [Object] original click event,
  pointer: {
    DOM: {x:pointer_x, y:pointer_y},
    canvas: {x:canvas_x, y:canvas_y}
  }
}
对于单击事件，添加了以下属性:
{
...
  items: [], //点击的对象组成的数组,当发生节点与节点，节点与边，边与边位置重叠时，按照`z-index`递减排序
}
点击对象可以是:
  {nodeId:NodeId}            // 单击具有给定 id 的节点
  {nodeId:NodeId labelId:0}  // 单击具有给定id的节点的标签
  {edgeId:EdgeId}            // 单击具有给定id的边
  {edge:EdgeId, labelId:0}   // 单击具有给定id的边的标签
item数组的顺序是按 `z-index` 顺序递减的。 因此，要获取最顶层的点击对象，可以使用`item[0]`获取值。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 双击 - doubleClick

当用户双击鼠标或触摸屏设备时触发。

由于双击实际上是两次单击，所以在双击时首先触发两次单击事件，紧接着才是双击事件。 如果只想触发双击事件，只需在处理单击事件时检查事件之间的时间间隔。

同click
1

# 右键单击 - oncontext

当用户用鼠标右键单击canvas时触发。 默认情况下，鼠标右键不会发生选择也不会触发选择事件。 但你可以使用 getNodeAt 方法手动选择节点。

同click
1

# 按住 - hold

当用户单击并按住鼠标或在触摸屏设备上按住时触发。 在这种情况下，还会触发一个单击事件。

同click，但是会有一定的延迟（这个延迟主要是区分`hold`、`click`、'doubleclick'等事件）
1

# 发布 - release

在画布上绘制完成后触发。可用于在关系图上绘制。

同click
1

# 选择 - select

当用户修改选择时触发（节点或边被选择，被添加到选择或取消选择时）。 所有选择事件只在click和hold时触发。

同click
1

# 选中节点 - selectNode

当用户选择了一个节点时触发。

同click
1

# 选中边 - selectEdge

当用户选择了一个边时触发。

同click
1

# 取消选中节点 - deselectNode

当用户取消选择节点(或多个节点)时触发。在回调函数中可获取的属性对象如下:

{
  nodes: [Array of selected nodeIds],
  edges: [Array of selected edgeIds],
  event: [Object] original click event,
  pointer: {
    DOM: {x:pointer_x, y:pointer_y},
    canvas: {x:canvas_x, y:canvas_y}
    }
  },
  //上一个被选中的节点（或多个节点）或边（或多个边）
  previousSelection: {
    nodes: [Array of previously selected nodeIds],
    edges: [Array of previously selected edgeIds]
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 取消选中边 - deselectEdge

当用户取消选择边(或多个边)时触发。

同deselectNode
1

# 拖动开始 - dragStart

当用户开始拖动时触发

同click
1

# 拖动中 - dragging

当用户正在拖动节点（多个节点）或视图时触发。

同click
1

# 拖动结束 - dragEnd

当用户结束拖动时触发

同click
1

# 拖动控制节点中 - controlNodeDragging

拖动控制节点时触发。 Control Edge 是被拖动的并包含from和to节点的 id的边。 如果未将控制节点拖过另一个节点，to为undefined。 在回调函数中可获取的属性对象如下:

{
    nodes: [Array of selected nodeIds],
    edges: [Array of selected edgeIds],
    event: [Object] original click event,
    pointer: {
        DOM: {x:pointer_x, y:pointer_y},
        canvas: {x:canvas_x, y:canvas_y}
    },    
    controlEdge: {from:from_node_id, to:to_node_id}
}
1
2
3
4
5
6
7
8
9
10

# 拖动控制节点结束 - controlNodeDragEnd

当控制节点拖动完成时触发。

同controlNodeDragging
1

# 悬停在节点 - hoverNode

当启用了interaction:{hover:true}，并且鼠标悬停在节点上，则触发。

{
    node: id, //悬停的节点id
    event: [Object] original click event,
    pointer: {
        DOM: {x:pointer_x, y:pointer_y},
        canvas: {x:canvas_x, y:canvas_y}
    },    
}
1
2
3
4
5
6
7
8

# 从节点移开 - blurNode

当启用了interaction:{hover:true}，并且鼠标从之前悬停的节点移开，则触发。

同hoverNode
1

# 悬停在边 - hoverEdge

当启用了interaction:{hover:true}，并且鼠标悬停在边上，则触发。

同hoverNode
1

# 从边移开 - blurEdge

当启用了interaction:{hover:true}，并且鼠标从之前悬停的边移开，则触发。

同hoverNode
1

# 缩放 - zoom

当用户放大或缩小视图时触发。在回调函数中可获取的属性对象如下:

{
  direction: '+'/'-', //放大还是缩小
  scale: Number, //缩放级别，大于0,与 network.getScale ()的结果相同
  pointer: {x:pointer_x, y:pointer_y}	// 缩放时指针所在的位置。当通过单击放大或缩小导航按钮触发时，该属性为空
}
1
2
3
4
5

# 弹出窗口显示 - showPopup

当弹出窗口(工具提示)显示时触发。

# 弹出窗口隐藏 - hidePopup

当弹出窗口(工具提示)被隐藏时触发。

# 物理模拟相关事件

# 开始稳定 - startStabilizing

当物理模拟开始稳定时触发。 当拖动一个节点时，物理模拟重新启动并再次稳定（触发稳定）。 稳定并不一定意味着‘不显示’。

# 稳定进展 - stabilizationProgress

当迭代次数达到 updateInterval 的倍数时触发。 这只发生在“隐藏的”稳定中。 在回调函数中可获取的属性对象如下:

{
  iterations: Number // iterations so far,
  total: Number      // total iterations in options
}
1
2
3
4

# 稳定结束 - stabilizationIterationsDone

当“隐藏的”物理模拟稳定结束时触发。 但这并不一定意味着关系图已经稳定; 这也可能意味着物理模拟的稳定迭代次数已经达到配置选项中定义的迭代次数。

# 稳定 - stabilized

当关系已经稳定或调用 stopSimulation ()时触发。 所需的迭代次数可以用来调整稳定关系图所需的最大迭代次数。在回调函数中可获取的属性对象如下:

{
  iterations: Number // iterations it took
}
1
2
3

# canvas相关事件

# 尺寸变化 - resize

当canvas的大小发生变化时触发，容器 div 的大小发生变化时、调用setSize ()设置新的width/height时或调用setOptions ()设置新的width/height时也会触发该事件。 在回调函数中可获取的属性对象如下:

{
  width: Number     // canvas的'新'宽
  height: Number    // canvas的'新'高
  oldWidth: Number  // canvas的'旧'宽
  oldHeight: Number // canvas的'旧'高
}
1
2
3
4
5
6

# 渲染事件

# 初始化渲染 - initRedraw

在重绘开始之前触发。 此时物理模拟已经完成。 可用于在开始绘制新关系图之前移动自定义元素。

# 渲染之前 - beforeDrawing

在关系图被清除、缩放并转换到可视位置之后，但在绘制所有边缘和节点之前触发。 可用来在绘制关系图之前绘制自定义内容。

# 渲染之后 - afterDrawing

当canvas绘制完成后触发。 可用来在绘制关系图之后绘制自定义内容。

# 视图相关事件

# 动画结束 - animationFinished

当动画结束时触发。

# 配置模块相关事件

# 配置更改 - configChange

当用户更改配置器（configurator）中的任何选项时触发。 Options 对象可以与setOptions方法一起使用，也可以使用 JSON.stringify ()进行 string 化。 options将自动作用于关系图中。 可以利用此事件存储用户配置项。

# vis-network 从外部导入数据

vis-network内置了从Gephi或DOT语言导入数据的一系列实用工具

# 从Gephi导入数据

Network可以直接从gephi导出的json文件中导入数据。您可以在这里获得[JSON导出器](https://gephi.org/plugins//plugin/json exporter-plugin)

示例J将演示如何将JSON文件放入到VIS中：

// 加载包含 Gephi关系数据的 JSON 文件。
var gephiJSON = loadJSON("./datasources/WorldCup2014.json");

// 你可以使用这些选项来自定义处理数据的方式。
//默认选项
var parserOptions = {
  edges: {
    inheritColors: false
  },
  nodes: {
    fixed: true,
    parseColor: false
  }
}

// 解析gephi文件并返回数据对象
// 包含满足vis要求的nodes与edges数据
var parsed = vis.parseGephiNetwork(gephiJSON, parserOptions);

// 按照vis-network格式放入数据
var data = {
  nodes: parsed.nodes,
  edged: parsed.edges
};

// 创建关系图
var network = new vis.Network(container, data);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# Gephi解析器配置项

以下选项可以用来告诉VIS如何处理Gephi的数据。

名称 类型 默认 描述
nodes.fixed Boolean true 如果为false，则在导入后节点将根据物理模型移动。如果为真，则节点将不会移动。如果设置为true，则必须定义节点位置，以避免在物理模拟过程中出现‘无穷迭代’。
nodes.parseColor Boolean false 如果为true，颜色将由VIS解析器解析，为``border、highlights和hover`设置额外的颜色。如果为false，该节点将会是为其提供的颜色。
edges.inheritColor Boolean false 如果为true，则忽略gephi提供的颜色，并将继承颜色模式与全局配置项一起使用。

# 以DOT语言导入数据

Network支持DOT语言的数据。你可以使用vis.parseDOTNetwork转换器将DOT语言转换为Network兼容的节点、边和选项对象。当然你也可以修改或扩展返回的节点、边和选项。

示例：

// 用DOT语言提供数据
var DOTstring = 'dinetwork {1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }';
var parsedData = vis.parseDOTNetwork(DOTstring);

var data = {
  nodes: parsedData.nodes,
  edges: parsedData.edges
}

var options = parsedData.options;

// 你可以像普通 JSON 变量一样扩展选项:
options.nodes = {
  color: 'red'
}

// 创建关系图
var network = new vis.Network(container, data, options);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# vis-network configure

处理canvas中的HTML 部分。

提示

提示：该配置项主要用来生成一个可视化的配置器

配置项必须包含在一个名为“configure”的对象中。

# 完整配置项预览

// these are all options in full.
var options = {
  configure: {
    enabled: true,
    filter: 'nodes,edges',
    container: undefined,
    showButton: true
  }
}

network.setOptions(options);
1
2
3
4
5
6
7
8
9
10
11

# 配置项详情

名称 类型 默认 说明
enabled Boolean true 打开或关闭配置界面。这是一个可选参数。如果此项未定义但是定义了configure的任何其他属性，则自动添加enabled: true。
filter String, Array, Boolean, Function true 当类型是Boolean，且为true时，所有的配置项均显示，false将不显示任何选项。
当类型为String或字符串数组，则允许以下任意组合：nodes, edges, layout, interaction, manipulation, physics, selection, renderer。
当类型为Function时，您将收到两个参数。配置项和配置项路径。如果返回true，则选项将显示在配置器中。
例子:
//只显示物理模拟配置项
function (option, path) {
return path.indexOf('physics') !== -1;
}
container DOM element undefined 配置器容器，默认放在关系图实例下面。
showButton Boolean true 在配置器底部显示生成配置项按钮。

# vis-network edges(边)

# 完整配置项预览

处理边的创建和删除，及全局边配置和样式

边的配置项必须包含在名为“edges”的对象中。

单个节点也可以添加配置项。因此，应当为每个节点定义“id”属性。全局节点配置项将作用于所有节点。

//自定义一个边框宽为2，边框颜色为红色的节点
const edges = [{ id: 1,label:'测试', arrows: { to: { enabled: false, ... }...},color: { color: 'red'}... }]
1
2

注意

警告：为边单独添加配置项后，将覆盖该边对应的全局配置，如果该边位于组中，还将覆盖该边对应的的组配置。如果你在随后将该边配置项设置为``null`，边配置将恢复为默认值。

var options = {
  edges:{
    arrows: {
      to: {
        enabled: false,
        imageHeight: undefined,
        imageWidth: undefined,
        scaleFactor: 1,
        src: undefined,
        type: "arrow"
      },
      middle: {
        enabled: false,
        imageHeight: 32,
        imageWidth: 32,
        scaleFactor: 1,
        src: "https://visjs.org/images/visjs_logo.png",
        type: "image"
      },
      from: {
        enabled: false,
        imageHeight: undefined,
        imageWidth: undefined,
        scaleFactor: 1,
        src: undefined,
        type: "arrow"
      }
    },
    arrowStrikethrough: true,
    chosen: true,
    color: {
      color:'#848484',
      highlight:'#848484',
      hover: '#848484',
      inherit: 'from',
      opacity:1.0
    },
    dashes: false,
    font: {
      color: '#343434',
      size: 14, // px
      face: 'arial',
      background: 'none',
      strokeWidth: 2, // px
      strokeColor: '#ffffff',
      align: 'horizontal',
      multi: false,
      vadjust: 0,
      bold: {
        color: '#343434',
        size: 14, // px
        face: 'arial',
        vadjust: 0,
        mod: 'bold'
      },
      ital: {
        color: '#343434',
        size: 14, // px
        face: 'arial',
        vadjust: 0,
        mod: 'italic',
      },
      boldital: {
        color: '#343434',
        size: 14, // px
        face: 'arial',
        vadjust: 0,
        mod: 'bold italic'
      },
      mono: {
        color: '#343434',
        size: 15, // px
        face: 'courier new',
        vadjust: 2,
        mod: ''
      }
    },
    hidden: false,
    hoverWidth: 1.5,
    label: undefined,
    labelHighlightBold: true,
    length: undefined,
    physics: true,
    scaling:{
      min: 1,
      max: 15,
      label: {
        enabled: true,
        min: 14,
        max: 30,
        maxVisible: 30,
        drawThreshold: 5
      },
      customScalingFunction: function (min,max,total,value) {
        if (max === min) {
          return 0.5;
        }
        else {
          var scale = 1 / (max - min);
          return Math.max(0,(value - min)*scale);
        }
      }
    },
    selectionWidth: 1,
    selfReferenceSize: 20,
    selfReference:{
        size: 20,
        angle: Math.PI / 4,
        renderBehindTheNode: true
    },
    shadow:{
      enabled: false,
      color: 'rgba(0,0,0,0.5)',
      size:10,
      x:5,
      y:5
    },
    smooth: {
      enabled: true,
      type: "dynamic",
      roundness: 0.5
    },
    title:undefined,
    value: undefined,
    width: 1,
    widthConstraint: false
  }
}

network.setOptions(options);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

# 配置项详情

这些配置项也可以为每个边设置。

名称 类型 默认 说明
arrows Object or String undefined 使用默认配置绘制箭头（指向，标记等，下同），可以以arrows:'to, from,middle'、'to;from'等字符串形式来配置'开始'、'结束'、'中间'的箭头显示。
如果要更细致的控制箭头样式，请使用一个to、from、middle对象。
arrows.
    to		 Object or Boolean Object 如果为true，则绘制一个指向to节点的，在边的to(终点)侧的箭头，
如果要更细致的控制箭头样式，请使用一个to对象。
arrows.
    to.
      enabled		 Boolean false 可选配置项，打开或关闭箭头。
如果为undefined但设置了scaleFactor属性，则将其设置为true
arrows.
    to.
      imageHeight		 Number 图像箭头的高度。如果为undefined，则使用图像的高度。
arrows.
    to.
      imageWidth		 Number 图像箭头的宽度。如果为undefined，则使用图像的宽度。
arrows.
    to.
      scaleFactor		 Number 1 箭头缩放的比例因子
arrows.
    to.
      src		 String 图像箭头的URL
arrows.
    to.
      type		 String arrow 边的to侧类型。可能的值有：'arrow', 'bar', 'circle', 'box', 'crow', 'curve', 'inv_curve', 'diamond', 'triangle', 'inv_triangle', 'vee'。
arrows.
    middle		 Object or Boolean Object 同to，在边的middle(中间)的箭头。当arrows.middle.scaleFactor为负值时将翻转箭头的方向。
arrows.
    from		 Object or Boolean Object 同to，在边的from(起点)的箭头。
arrowStrikethrough Boolean true 如果为false，则边将在箭头处停止。中间箭头不受此影响。
chosen Object or Boolean true 对选择及悬停做出反应
如果为true，则选择或悬停在边时将根据默认值更改其及标签的特性。
如果为false，则在选择边时不会更改其及标签的特性。
如果为Object，则在选择边时，可对边和标签特性进行更细致的调整。
chosen.
    edge		 Function or Boolean undefined 如果为true，选择或悬停在边上将根据默认值更改其特性。
如果为false，则在选择边时不会更改其特性。
如果提供了函数，则在选择边时调用该函数。
function(values, id, selected, hovering) {
  values.property = chosenValue;
}
任何输入参数都可用于改变节点特性。如果一个属性不存在于values，那设置的该属性将不会起作用。该函数可作用于全局或某边。
values中的可更改的属性如下：
PropertyEdge Reference
dashes同 dashes
toArrow同 arrows.to.enabled
toArrowScale同 arrows.to.scaleFactor
toArrowType同 arrows.to.type
middleArrow同 arrows.middle.enabled
middleArrowScale同 arrows.middle.scaleFactor
middleArrowType同 arrows.middle.type
fromArrow同 arrows.from.enabled
fromArrowScale同 arrows.from.scaleFactor
fromArrowType同 arrows.from.type
arrowStrikethrough同 arrowStrikethrough
color同 color.color
inheritsColor同 color.inherit
opacity同 color.opacity
hidden同 hidden
length同 length
shadow同 shadow.enabled
shadowColor同 shadow.color
shadowSize同 shadow.size
shadowX同 shadow.x
shadowY同 shadow.y
width同 width
chosen.
    label		 Function or Boolean undefined 如果为true，选择或悬停在边上将根据默认值更改其标签特性。
如果为false，则在选择边时不会更改其标签特性。
如果提供了函数，则在选择边时调用该函数。
function(values, id, selected, hovering) {
  values.property = chosenValue;
}
任何输入参数都可用于改变边特性。如果一个属性不存在于values，那设置的该属性将不会起作用。该函数可作用于全局或某边。
values中的可更改的属性如下：
PropertyEdge Reference
color同 font.color
size同 font.size
face同 font.face
mod同 modifier ('bold', 'italic', etc.)
vadjust同 font.vadjust
strokeWidth同 font.strokeWidth
strokeColor同 font.strokeColor
color Object or String Object 颜色对象包含了各种情况下边的颜色信息。
当边只需要一种颜色时，格式可为rgba(120,32,14,1), #ffffff或red。
color.
    color		 String '#848484' 未选中或悬停在边上时的颜色（假设在交互模块中启用了悬停）。
color.
    highlight		 String '#848484' 选中边时的颜色。
color.
    hover		 String '#848484' 鼠标悬停在边缘上时的颜色（假设在交互模块中启用了悬停）。
color.
    inherit		 String or Boolean 'from' 当color、highlight或hover有值时，inherit将被设置为false。
inherit的可选值有:true, false,'from','to','both'。
inherit为from时，边将从'from'侧的节点边框继承颜色。
inherit为to时，边将从to侧的节点边框继承颜色。
inherit为both时，边颜色为从'from'侧的节点边框颜色到to侧的节点边框颜色的渐变色。在这种情况下由于每次重新绘制时都会重新计算渐变，both的计算量很大（因为当节点移动时角度会改变）。
color.
    opacity		 Number 1.0 设置边的不透明度。值在0和1之间。
dashes Array or Boolean false 为true，绘制一系列短的方形虚线。数组格式：【短划线长度，间隙长度，短划线长度，间隙长度，短划线长度，间隙长度，。。。】,重复数组值，直到填充边距离。在大于11的IE版本中使用虚线时，将直线绘制，而不是平滑。在小于11版本的IE中将直线绘制而不是平滑线。
font Object or String false 此对象定义标签的详细信息。还支持size face color形式的简写，例如：14px arial red。
font.
    color		 String '#343434' 标签文本的颜色。
font.
    size		 Number 14 标签文本的大小。
font.
    face		 String 'arial' 标签文本的字体（或字体系列）。
font.
    background		 String undefined 用提供的颜色给标签绘制一个矩形背景。
font.
    strokeWidth		 Number 2 标签文本描边宽度，这个样式会覆盖上述的矩形样式。
font.
    strokeColor		 String '#ffffff' 标签文本描边颜色，在strokeWidth大于0时显示。
font.
    align		 String 'horizontal' 标签与边的对齐方式，有 'horizontal(水平)','top(顶部)','middle(中间)','bottom(底部)'。默认值horizontal为标签水平对齐，将不考虑边的方向。
如果选择了horizontal以外的选项，标签将根据边对齐。
font.
    vadjust		 String 0 调整标签文本的垂直位置，值越大离节点越远。
font.
    multi		 Boolean or String false 如果为false，标签将被视为用基本字体绘制的纯文本。
如果为true或HTML（带有粗体、斜体和代码标记等）。
如果为markdown或md（带有粗体、斜体和代码标记）
可以分别在font.bold，font.ital，font.boldital和font.mono属性下设置粗体，斜体，粗斜体和等宽字体。
font.
    bold		 Object or String false 定义标签中粗体字体的样式。支持size face color形式的简写，例如：14px arial red。
font.
    bold.
      color		 String '#343434' 标签文本中粗体字体的颜色。默认为基本字体的颜色。
font.
    bold.
      size		 Number 14 标签文本中粗体字体的大小。默认为基本字体的大小。
font.
    bold.
      face		 String 'arial' 标签文本中粗体字体的字体（或字体系列）。默认为基础字体的字体。
font.
    bold.
      mod		 String 'bold' 在确定标签文本中的粗体字体时添加到face和size的字符串。
font.
    bold.
      vadjust		 String 0 调整标签文本中的粗体字体的垂直位置，值越大离节点越远。
font.
    ital		 Object or String false 定义标签中斜体字体的详细信息。支持size face color形式的简写，例如：14px arial red。
font.
    ital.
      color		 String '#343434' 标签文本中斜体字体的颜色，默认为基本字体的颜色。
font.
    ital.
      size		 Number 14 标签文本中斜体字体的大小。默认为基本字体的大小。
font.
    ital.
      face		 String 'arial' 标签文本中斜体字体的字体（或字体系列）。默认为基础字体的字体。
font.
    ital.
      mod		 String 'italic' 在确定标签文本中的斜体字体时添加到face和size的字符串。
font.
    ital.
      vadjust		 String 0 调整标签文本中的斜体字体的垂直位置，值越大离节点越远。
font.
    boldital		 Object or String false 定义标签中粗斜体字体的详细信息。支持size face color形式的简写，例如：14px arial red。
font.
    boldital.
      color		 String '#343434' 标签文本中粗斜体字体的颜色。默认为基本字体的颜色。
font.
    boldital.
      size		 Number 14 标签文本中粗斜体字体的大小。默认为基本字体的大小。
font.
    boldital.
      face		 String 'arial' 标签文本中粗斜体字体的字体（或字体系列）。默认为基础字体的字体。
font.
    boldital.
      mod		 String 'bold' 在确定标签文本中粗斜体字体时添加到face和size的字符串。
font.
    boldital.
      vadjust		 String 0 调整标签文本中的粗斜体字体的垂直位置，值越大离节点越远。
font.
    mono		 Object or String false 定义标签中单空格字体的详细信息。还支持size face color形式的速记，例如： 15px courier red。
font.
    mono.
      color		 String '#343434' 标签文本中等宽字体的颜色。默认为基本字体的颜色。
font.
    mono.
      size		 Number 15 标签文本中等宽字体的大小。默认为基本字体的大小。
font.
    mono.
      face		 String 'courier new' 标签文本中等宽字体的字体（或字体系列）。
font.
    mono.
      mod		 String '' 在确定标签文本中的等宽字体时添加到face和size的字符串。
font.
    mono.
      vadjust		 String 2 调整标签文本中的等宽字体的垂直位置，值越大离节点越远。
from Number or String 边位于两个节点之间，from节点,to节点。这是定义from节点的位置。
必须提供相应的节点ID。这仅适用于单个边。
hidden Boolean false 如果为true，则不会显示边。但是它仍然是物理模拟的一部分。
hoverWidth Number or Function 0.5 鼠标悬停在边上时边的宽度（假设在交互模块中启用了悬停）。
如果值为Number，这个数字将被添加到宽度。因为宽度可以通过value和scale来更改，所以这种方式可能无法呈现出最佳显示效果。为了解决这个问题，您可以提供一个函数。
例子:
var options: {
    edges: {
        hoverWidth: function (width) {
            return width+1;
} }}
它接收边的数字宽度。在这个简单的例子中，我们将宽度增加1。
您可以在函数中使用任何合法语句，只要它最终返回一个Number值即可。
id String undefined 边的id。边的id是可选的。如果为undefined，则会将一个自动生成的UUID分配给边缘。只适用于单个边。
label String undefined 边的标签。HTML将不会起作用，因为关系图是基于HTML5 canvas。
labelHighlightBold Boolean true 选中边时标签是否变为粗体。
length Number undefined 在物理模拟中边的弹簧长度。该值会覆盖静止时的弹簧长度。
physics Boolean true 如果为true，边是物理模拟的一部分。如果是false，它就不会像弹簧一样。
scaling Object Object 如果提供了value选项，则边的宽度取决于这个对象中定义的属性。请记住，使用缩放时，忽略width选项。
scaling.
    min		 Number 1 如果节点具有值，则它们的大小由值，缩放函数和最小最大值决定。最小值是最小允许值。
scaling.
    max		 Number 15 最大缩放值。
scaling.
    label		 Object or Boolean Object 是否允许标签缩放。
scaling.
    label.
      enabled		 Boolean false 打开或关闭标签的缩放。如果未定义此配置项，但定义了此配置对象中的任何其它属性，则将其设置为true。
scaling.
    label.
      min		 Number 14 缩放时标签的最小字体大小。
scaling.
    label.
      max		 Number 30 缩放时标签的最大字体大小。
scaling.
    label.
      maxVisible		 Number 30 标签放大时，字体也会放大。可以使用此选项限制可感知的字体大小。如果设置为30，则字体将永远不会比以100％缩放的30号字体大。
scaling.
    label.
      drawThreshold		 Number 5 标签缩小时，字体将被缩小。这定义了字体绘制时的下限。使用字体缩放时，可以将其与maxVisible一起使用，以便在缩小时显示重要节点的标签，而在放大时仅显示其余节点。
scaling.
    customScalingFunction		 Function in description 如果节点具有value字段，此函数将根据节点的值确定节点大小的缩放方式。默认函数为:
function (min,max,total,value) {
if (max === min) {
return 0.5;
} else {
var scale = 1 / (max - min);
return Math.max(0,(value - min)*scale);
}}
函数参数为最小值、最大值、所有值的总和、它所处理的节点或边的值。该必须返回一个介于0和1之间的值。
然后计算节点和边的大小的语句如下:
var scale = customScalingFunction(min,max,total,value);
var diff = maxSize - minSize;
mySize = minSize + diff * scale;
请注意：maxSize和minSize是配置项中scaling.max和scaling.min的值
selectionWidth Number or Function 1 选择边时边的宽度。
如果值为Number，这个数字将被添加到宽度。因为宽度可以通过value和scale来更改，所以这种方式可能无法呈现出最佳显示效果。为了解决这个问题，您可以提供一个函数。
例子:
var options: {
    edges: {
        selectionWidth: function (width) {
            return width*2;
} }}
selfReferenceSize Number false 当to和from节点相同时，将绘制一个圆。这个值就是圆的半径。
如果需要自定义属性，请使用selfReference配置对象。
selfReference Object Object 同selfReferenceSize
selfReference.
    size		 Number 20 圆的半径
selfReference.
    angle		 Number π/ 4 圆的位置（以弧度表示）。如果undefined，则它将位于右上角（π/ 4）。
selfReference.
    renderBehindTheNode		 Boolean true 圆是否应该绘制成一个完整的圆，或者不应该与父节点重叠。
shadow Object or Boolean Object 如果为true，则节点使用默认设置投射阴影。可以使用shadow对象自定义。
shadow.
    enabled		 Boolean false 打开或关闭阴影。如果undefined，但定义了此配置对象中的任何其它属性，则将其设置为true。
shadow.
    color		 String 'rgba(0,0,0,0.5)' 阴影的颜色。支持的格式有rgb(255,255,255)、rgba(255,255,255,1)和#ffffff。
shadow.
    size		 Number 10 阴影的模糊大小。
shadow.
    x		 Number 5 X偏移。
shadow.
    y		 Number 5 Y偏移。
smooth Object or Boolean Object 如果为true，则将以二次贝塞尔曲线绘制边。这种绘制方式比较耗时但是渲染效果要好过直线绘制。
动态平滑曲线和静态平滑曲线之间存在差异。动态平滑曲线绘制有一个不可见的支撑节点参与物理模拟。
如果有很多边，可以考虑使用与动态曲线不同类型的平滑曲线，以获得更好的性能。
smooth.
    enabled		 Boolean true 打开和关闭平滑曲线。这是一个可选选项。如果定义了此配置对象中的任何其它属性，则将其设置为true。
smooth.
    type		 String 'dynamic' 可能的选项: 'dynamic', 'continuous', 'discrete', 'diagonalCross', 'straightCross', 'horizontal', 'vertical', 'curvedCW', 'curvedCCW', 'cubicBezier'。
使用动态时，边将有一个不可见的支撑节点来引导形状。这个节点是物理模拟的一部分。
smooth.
    forceDirection		 String or Boolean false 用于分层布局的配置项，可选值有: ['horizontal', 'vertical', 'none']。
此选项仅用于cubicbezier曲线。如果为true，则选择水平方向，如果为false，则选择较大的方向(节点间距离为 x vs 节点间距离为 y)。 如果 x 距离较大，则为水平距离。
smooth.
    roundness		 Number 0.5 值范围：0 .. 1.0。此参数调整除动态外所有类型的平滑曲线的平滑度（圆度）。
title String undefined 当用户悬停在节点上时显示的标题。
to Number or String 边缘位于两个节点之间，一从个到另一个。这是定义“to”节点的位置。必须提供相应的节点ID。这自然只适用于单个边。
value Number undefined 设置值后，将使用上面定义的缩放对象中的选项缩放边的宽度。.
width Number 1 边缘的宽度。如果设置了值，则不使用.
widthConstraint Number, Boolean or Object false 如果为false，则不限制宽度。如果指定了值，则将节点的最小和最大宽度设置为该值。节点标签将在空格处换行以保持在最大值以下，如果小于该值，则节点的宽度将设置为最小值。
widthConstraint.
    maximum		 Number undefined 如果指定了值，则将节点的最大宽度设置为该值。节点标签将在空格处换行，以保持在最大值以下。

# vis-network nodes(节点)

处理节点的创建和删除，及全局节点配置和样式

节点的配置项必须包含在名为“nodes”的对象中。

单个节点也可以添加配置项。因此，应当为每个节点定义“id”属性。全局节点配置项将作用于所有节点。

//自定义一个边框宽为2，边框颜色为红色的节点
const nodes = [{ id: 1,label:'测试', borderWidth: 2,color: { border: 'red'}... }]
1
2

注意

警告：为节点单独添加配置项后，将覆盖该节点对应的全局配置，如果该节点位于组中，还将覆盖该节点对应的的组配置。如果你在随后将该节点配置项设置为``null`，节点配置将恢复为默认值。

# 完整配置项预览

var options = {
  nodes:{
    borderWidth: 1,
    borderWidthSelected: 2,
    brokenImage:undefined,
    chosen: true,
    color: {
      border: '#2B7CE9',
      background: '#97C2FC',
      highlight: {
        border: '#2B7CE9',
        background: '#D2E5FF'
      },
      hover: {
        border: '#2B7CE9',
        background: '#D2E5FF'
      }
    },
    opacity: 1,
    fixed: {
      x:false,
      y:false
    },
    font: {
      color: '#343434',
      size: 14, // px
      face: 'arial',
      background: 'none',
      strokeWidth: 0, // px
      strokeColor: '#ffffff',
      align: 'center',
      multi: false,
      vadjust: 0,
      bold: {
        color: '#343434',
        size: 14, // px
        face: 'arial',
        vadjust: 0,
        mod: 'bold'
      },
      ital: {
        color: '#343434',
        size: 14, // px
        face: 'arial',
        vadjust: 0,
        mod: 'italic',
      },
      boldital: {
        color: '#343434',
        size: 14, // px
        face: 'arial',
        vadjust: 0,
        mod: 'bold italic'
      },
      mono: {
        color: '#343434',
        size: 15, // px
        face: 'courier new',
        vadjust: 2,
        mod: ''
      }
    },
    group: undefined,
    heightConstraint: false,
    hidden: false,
    icon: {
      face: 'FontAwesome',
      code: undefined,
      weight: undefined,
      size: 50,  //50,
      color:'#2B7CE9'
    },
    image: undefined,
    imagePadding: {
      left: 0,
      top: 0,
      bottom: 0,
      right: 0
    },
    label: undefined,
    labelHighlightBold: true,
    level: undefined,
    mass: 1,
    physics: true,
    scaling: {
      min: 10,
      max: 30,
      label: {
        enabled: false,
        min: 14,
        max: 30,
        maxVisible: 30,
        drawThreshold: 5
      },
      customScalingFunction: function (min,max,total,value) {
        if (max === min) {
          return 0.5;
        }
        else {
          let scale = 1 / (max - min);
          return Math.max(0,(value - min)*scale);
        }
      }
    },
    shadow:{
      enabled: false,
      color: 'rgba(0,0,0,0.5)',
      size:10,
      x:5,
      y:5
    },
    shape: 'ellipse',
    shapeProperties: {
      borderDashes: false, // only for borders
      borderRadius: 6,     // only for box shape
      interpolation: false,  // only for image and circularImage shapes
      useImageSize: false,  // only for image and circularImage shapes
      useBorderWithImage: false  // only for image shape
    },
    size: 25,
    title: undefined,
    value: undefined,
    widthConstraint: false,
    x: undefined,
    y: undefined
  }
}

network.setOptions(options);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129

# 配置项详情

名称 类型 默认值 说明
borderWidth Number 1 节点边框的宽度.
borderWidthSelected Number 2 选中节点的边框宽度。
未定义时为borderwidth*2。
brokenImage String undefined 图像的备用URL。
当shape设置为image或circularimage且无法解析image配置项中提供的URL时起作用。
chosen Object or Boolean true 对选择及悬停做出反应
如果为true，则选择或悬停在节点将根据默认值更改其及标签的特性。
如果为false，则在选择节点时不会更改其及标签的特性。
如果为Object，则在选择节点时，可对节点和标签特性进行更细致的调整。
chosen.
    node		 Function or Boolean undefined 如果为true，选择或悬停在节点上将根据默认值更改其特性。
如果为false，则在选择节点时不会更改其特性。
如果提供了函数，则在选择节点时调用该函数。
function(values, id, selected, hovering) {
  values.property = chosenValue;
}
任何输入参数都可用于改变节点特性。如果一个属性不存在于values，那设置的该属性将不会起作用。该函数可作用于全局或某节点。
values中的可更改的属性如下：
Property Node Reference
color同 color.background
borderWidth同 borderWidth
borderColor同 color.border
size同 size
borderDashes同 shapeProperties.borderDashes
borderRadius同 shapeProperties.borderRadius
shadow同 shadow.enabled
shadowColor同 shadow.color
shadowSize同 shadow.size
shadowX同 shadow.x
shadowY同 shadow.y
chosen.
    label		 Function or Boolean undefined 如果为true，选择或悬停在节点上将根据默认值更改其标签特性。
如果为false，则在选择节点时不会更改其标签特性。
如果提供了函数，则在选择节点时调用该函数。
function(values, id, selected, hovering) {
  values.property = chosenValue;
}
任何输入参数都可用于改变节点特性。如果一个属性不存在于values，那设置的该属性将不会起作用。该函数可作用于全局或某节点。
values中的可更改的属性如下：
Property Node Reference
color同 color.background
size同 font.size
face同 font.face
mod字体修饰(粗体、斜体等)
vadjust同 font.vadjust
strokeWidth同 font.strokeWidth
strokeColor同 font.strokeColor
color Object or String Object 颜色对象包含了各种情况下节点的颜色信息。
当节点只需要一种颜色时，格式可为rgba(120,32,14,1), #ffffff或red。
color.
    border		 String '#2B7CE9' 未选中或悬停在节点上时其边框颜色（假设在交互(interaction)模块中启用了悬停）。
color.
    background		 String '#D2E5FF' 未选中或悬停在节点上时其背景颜色（假设在交互模块中启用了悬停）。
color.
    highlight		 Object or String Object 选中节点时的颜色。你可以只提供一个字符串颜色值或一个颜色对象。
color.
    highlight.
        border		 String '#2B7CE9' 选中节点时其边框的颜色。
color.
    highlight.
        background		 String '#D2E5FF' 选中节点时其背景的颜色。
color.
    hover		 Object or String Object 鼠标悬停在节点上时的节点颜色（假设在交互模块中启用了悬停）。
color.
    hover.
        border		 String '#2B7CE9' 鼠标悬停在节点上时其边框的颜色（假设在交互模块中启用了悬停）。
color.
    hover.
        background		 String '#D2E5FF' 鼠标悬停在节点上时其背景颜色（假设在交互模块中启用了悬停）。
fixed Object or Boolean Object 如果为true，节点不会移动，但还是物理模拟的一部分。
定义为对象时，可以禁用X或Y方向的移动。
fixed.
    x		 Boolean false 如果为true，节点不能沿X方向移动。
fixed.
    y		 Boolean false 如果为true，节点不能沿Y方向移动。
font Object or String false 此对象定义标签的详细信息。还支持size face color形式的简写，例如：14px arial red。
font.
    color		 String '#343434' 标签文本的颜色。
font.
    size		 Number 14 标签文本的大小。
font.
    face		 String 'arial' 标签文本的字体（或字体系列）。
font.
    background		 String undefined 用提供的颜色给标签绘制一个矩形背景。
font.
    strokeWidth		 Number 0 标签文本描边宽度，这个样式会覆盖上述的矩形样式。
font.
    strokeColor		 String '#ffffff' 标签文本描边颜色，在strokeWidth大于0时显示。
font.
    align		 String 'center' 标签的对齐方式，有left,center,right。
font.
    vadjust		 Number 0 调整标签文本的垂直位置，值越大离节点越远。
font.
    multi		 Boolean or String false 如果为false，标签将被视为用基本字体绘制的纯文本。
如果为true或HTML（带有粗体、斜体和代码标记等）。
如果为markdown或md（带有粗体、斜体和代码标记）
可以分别在font.bold，font.ital，font.boldital和font.mono属性下设置粗体，斜体，粗斜体和等宽字体。
font.
    bold		 Object or String false 定义标签中粗体字体的样式。支持size face color形式的简写，例如：14px arial red。
font.
    bold.
        color		 String '#343434' 标签文本中粗体字体的颜色。默认为基本字体的颜色。
font.
    bold.
    size		 Number 14 标签文本中粗体字体的大小。默认为基本字体的大小。
font.
    bold.
        face		 String 'arial' 标签文本中粗体字体的字体（或字体系列）。默认为基础字体的字体。
font.
    bold.
        mod		 String 'bold' 在确定标签文本中的粗体字体时添加到face和size的字符串。
font.
    bold.
        vadjust		 String 0 调整标签文本中的粗体字体的垂直位置，值越大离节点越远。
font.
    ital		 Object or String false 定义标签中斜体字体的详细信息。支持size face color形式的简写，例如：14px arial red。
font.
    ital.
        color		 String '#343434' 标签文本中斜体字体的颜色，默认为基本字体的颜色。
font.
    ital.
        size		 Number 14 标签文本中斜体字体的大小。默认为基本字体的大小。
font.
    ital.
        face		 String 'arial' 标签文本中斜体字体的字体（或字体系列）。默认为基础字体的字体。
font.
    ital.
        mod		 String 'italic' 在确定标签文本中的斜体字体时添加到face和size的字符串。
font.
    ital.
        vadjust		 String 0 调整标签文本中的斜体字体的垂直位置，值越大离节点越远。
font.
    boldital		 Object or String false 定义标签中粗斜体字体的详细信息。支持size face color形式的简写，例如：14px arial red。
font.
    boldital.
        color		 String '#343434' 标签文本中粗斜体字体的颜色。默认为基本字体的颜色。
font.
    boldital.
        size		 Number 14 标签文本中粗斜体字体的大小。默认为基本字体的大小。
font.
    boldital.
        face		 String 'arial' 标签文本中粗斜体字体的字体（或字体系列）。默认为基础字体的字体。
font.
    boldital.
        mod		 String 'bold' 在确定标签文本中粗斜体字体时添加到face和size的字符串。
font.
    boldital.
        vadjust		 String 0 调整标签文本中的粗斜体字体的垂直位置，值越大离节点越远。
font.
    mono		 Object or String false 定义标签中单空格字体的详细信息。还支持size face color形式的速记，例如： 15px courier red。
font.
    mono.
        color		 String '#343434' 标签文本中等宽字体的颜色。默认为基本字体的颜色。
font.
    mono.
        size		 Number 15 标签文本中等宽字体的大小。默认为基本字体的大小。
font.
    mono.
        face		 String 'courier new' 标签文本中等宽字体的字体（或字体系列）。
font.
    mono.
        mod		 String ' ' 在确定标签文本中的等宽字体时添加到face和size的字符串。
font.
    mono.
        vadjust		 String 2 调整标签文本中的等宽字体的垂直位置，值越大离节点越远。
group String undefined 节点的归属组。
heightConstraint Number, Boolean or Object false 如果为false，则不受高度限制。
如果指定了高度，则该值将用作节点的最小高度。如果节点高度小于该值，则将其高度设置为此最小高度。
heightConstraint.
    minimum		 Number undefined 该值将用作节点的最小高度。如果节点高度小于该值，则将其高度设置为此最小高度。
heightConstraint.
    valign		 String 'middle' 偏移位置，值可为top、middle和bottom。
当标签文本的高度小于最小值（包括任何上下边距），则标签文本将垂直偏移到指定位置。
hidden Boolean false 如果为true，则不会显示节点。但是它仍然是物理模拟的一部分。
icon Object Object 这些选项仅在形状设置为icon时使用。
icon.
    face		 String 'FontAwesome' 可能值是给定页面上加载的任何字体，例如 FontAwesome或Ionicons。
icon.
    code		 String undefined 图标的代码(名称) ，例如'\uf007'。
icon.
    size		 Number 50 图标的大小。
icon.
    color		 String '#2B7CE9' 图标的颜色。
icon.
    weight		 Number or String undefined 强制性设置字重，
Font Awesome 5只有在字重被强制设置为粗体或700时才能正常工作。 如果设置了这个选项，请选择更大的字体尺寸而不是粗体字体。
id String undefined 节点的id。节点的id是必需且唯一的。
image Object or String undefined 当形状设置为image或circularImage时，此选项应为图像的URL。如果找不到图像，可以使用brokenimage选项。
image.
    unselected		 String undefined 未选中（默认）图像的URL。
image.
    selected		 String undefined 选中图像的URL。
imagePadding Object or Number 0 设置图片的内边距。
imagePadding.
    top		 Number 0 设置图片的上内边距。
imagePadding.
    right		 Number 0 设置图片的右内边距。
imagePadding.
    bottom		 Number 0 设置图片的下内边距。
imagePadding.
    left		 Number 0 设置图片的左内边距。
label String undefined 在节点中或节点下显示的一段文本，位置取决于设置的形状。
labelHighlightBold Boolean true 选中节点时其标签是否变为粗体。
level Number undefined 使用hierarchical布局时，该值将决定节点的位置。
margin Object or Number 5 标签的外边距。该配置项仅在形状设置为box, circle, database, icon 或 text时使用。
margin.
    top		 Number 5 标签的上外边距。
margin.
    right		 Number 5 标签的右外边距。
margin.
    bottom		 Number 5 标签的下外边距。
margin.
    left		 Number 5 标签的左外边距。
mass Number 1 Barneshut物理模型(默认启用)是基于一个反重力模型的,通过增加节点的质量，可以增加节点之间的排斥力。
不建议将该值设为介于0和1之间的值。
不允许设为负值或零值。否则将抛出一个控制台错误并设置为1。
physics Boolean true 如果为false，则节点不是物理模拟的一部分。除了手动拖动外，它不会移动。
scaling Object Object 节点缩放。
所有节点形状都可以缩放，但ellipse, circle, database, box, text形状只有在启用标签缩放时才会有效， 而image, circularImage, diamond, dot, star, triangle, triangleDown, hexagon, square 和 icon形状始终可以缩放。
请注意，使用缩放时，将忽略大小选项。
scaling.
    min		 Number 10 如果节点具有值，则它们的大小由值，缩放函数和最小最大值决定。最小值是最小允许值。
scaling.
    max		 Number 30 最大缩放值。
scaling.
    label		 Object or Boolean Object 是否允许标签缩放。
scaling.
    label.
        enabled		 Boolean false 打开或关闭标签的缩放。如果未定义此配置项，但定义了此配置对象中的任何其它属性，则将其设置为true。
scaling.
    label.
        min		 Number 14 缩放时标签的最小字体大小。
scaling.
    label.
        max		 Number 30 缩放时标签的最大字体大小。
scaling.
    label.
        maxVisible		 Number 30 标签放大时，字体也会放大。可以使用此选项限制可感知的字体大小。如果设置为30，则字体将永远不会比以100％缩放的30号字体大。
scaling.
    label.
        drawThreshold		 Number 5 标签缩小时，字体将被缩小。这定义了字体绘制时的下限。使用字体缩放时，可以将其与maxVisible一起使用，以便在缩小时显示重要节点的标签，而在放大时仅显示其余节点。
scaling.
    customScalingFunction		 Function 如果节点具有value字段，此函数将根据节点的值确定节点大小的缩放方式。默认函数为:
 function (min,max,total,value) {
  if (max === min) {
    return 0.5;
  } else {
    var scale = 1 / (max - min);
    return Math.max(0,(value - min)*scale);
 }}
函数参数为最小值、最大值、所有值的总和、它所处理的节点或边的值。该必须返回一个介于0和1之间的值。
然后计算节点和边的大小的语句如下:
var scale = customScalingFunction(min,max,total,value);
var diff = maxSize - minSize;
mySize = minSize + diff * scale;
请注意：maxSize和minSize是配置项中scaling.max和scaling.min的值
shadow Object or Boolean Object 如果为true，则节点使用默认设置投射阴影。可以使用shadow对象自定义。
shadow.
    enabled		 Boolean false 打开或关闭阴影。如果未定义此选项，但定义了此配置对象中的任何其它属性，则将其设置为true。
shadow.
    color		 String 'rgba(0,0,0,0.5)' 阴影的颜色。支持的格式有rgb(255,255,255)、rgba(255,255,255,1)和#ffffff。
shadow.
    size		 Number 10 阴影的模糊大小。
shadow.
    x		 Number 5 X偏移。
shadow.
    y		 Number 5 Y偏移。
shape String 'ellipse' 定义节点的外观。有两种类型的节点。
一类是标签在节点内部: ellipse, circle, database, box, text
另一类是标签在节点下面: image, circularImage, diamond, dot, star, triangle, triangleDown, hexagon, square和 icon。
shapeProperties Object Object 特定形状的配置项。
shapeProperties.
    borderDashes		 Array or Boolean false 此配置项适用于所有有边框的形状。显示为一系列短的方形虚线。数组格式：【短划线长度，间隙长度】。
还可以使用布尔值，false为禁用，true时为默认值[5,15]。
shapeProperties.
    borderRadius		 Number 6 此配置项仅用于box形状，定义形状圆角的程度。
shapeProperties.
    interpolation		 Boolean true 此配置项仅适用于image和circularImage。如果为真，则图像在缩小后会以牺牲计算时间为代价而生成更好的图像。
shapeProperties.
    useImageSize		 Boolean false 此配置项仅适用于image和circularImage。如果为false，则使用size选项；如果为true，则使用图像的大小。
重要提示：如果设置为true，则无法使用value选项缩放图像！
shapeProperties.
    useBorderWithImage		 Boolean false 此配置项仅适用于image形状。如果为true，在image形状后绘制一个有背景色（使用color配置项）、有边框（使用border配置项）的矩形。
size Number 25 用于确定标签不在节点内部的节点的大小。这些形状是: image, circularImage, diamond, dot, star, triangle, triangleDown, hexagon, square 和 icon。
title String or Element undefined 当用户悬停在节点上时显示的标题。标题可以是HTML元素或包含纯文本或HTML的字符串。
value Number undefined 设置值后，将使用上面定义的缩放对象中的配置项缩放节点。
widthConstraint Number, Boolean or Object false 如果为false，则不限制宽度。如果指定了值，则将节点的最小和最大宽度设置为该值。节点标签将在空格处换行以保持在最大值以下，如果小于该值，则节点的宽度将设置为最小值。
widthConstraint.
    minimum		 Number undefined 如果指定了值，则将节点的最小宽度设置为该值。如果小于该值，则节点的宽度将设置为最小值。
widthConstraint.
    maximum		 Number undefined 如果指定了值，则将节点的最大宽度设置为该值。节点标签将在空格处换行，以保持在最大值以下。
x Number undefined 给节点设置初始X位置。使用分层布局时，布局引擎根据视图类型设置节点的X或Y位置。另一个值保持不变。使用stabilization（稳定）时，稳定位置可能与初始位置不同。要将节点固定到该位置，请使用physics或fixed配置项。
y Number undefined 给节点设置初始Y位置。使用分层布局时，布局引擎根据视图类型设置节点的X或Y位置。另一个值保持不变。使用stabilization（稳定）时，稳定位置可能与初始位置不同。要将节点固定到该位置，请使用physics或fixed配置项。

# vis-network groups(组)

包含组和一些关于如何处理具有不存在组的节点的选项

# 完整配置项预览

var options = {
  groups:{
    useDefaultGroups: true,
    myGroupId:{
      /*node options*/
    }
  }
}

network.setOptions(options);
1
2
3
4
5
6
7
8
9
10

# 配置项详情

名称 类型 默认值 说明
useDefaultGroups Boolean true 当节点定义了不在Groups模块中的组，那么Groups模块将循环遍历它所定义的所有组，然后为每个未知组分配一个组。当组全部被使用时，它会返回到第一个组。设置为false时，默认组将不会在此循环中使用。
group* Object 自定义组配置项，节点模块中所有的配置项都可以在这里使用（但不能为一组节点设置相同的id或x、y位置）。
例子
var nodes = [
    {id:1, group:'myGroup', label:"I'm in a custom group called 'myGroup'!"}
]
var options = {
      groups: {
            myGroup: {color:{background:'red'}, borderWidth:3}
    }
}
*)该选项不称为group，
如示例所示，但可以通过任何自定义组id来调用，但“useDefaultGroups”除外。

# vis-network layout(布局)

充当canvas上的摄像机，进行动画、缩放和对焦。

布局的配置项必须包含在名为“layout”的对象中。

注意

警告：当启用层次布局时，该布局会覆盖一些其它配置项。 物理模拟被设置为层排斥、动态光滑边缘转换为静态光滑边缘。

# 完整配置项预览

var options = {
  layout: {
    randomSeed: undefined,
    improvedLayout: true,
    clusterThreshold: 150,
    hierarchical: {
      enabled: false,
      levelSeparation: 150,
      nodeSpacing: 100,
      treeSpacing: 200,
      blockShifting: true,
      edgeMinimization: true,
      parentCentralization: true,
      direction: 'UD',        // UD, DU, LR, RL
      sortMethod: 'hubsize',  // hubsize, directed
      shakeTowards: 'leaves'  // roots, leaves
    }
  }
}

network.setOptions(options);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 配置项详情

名字 类型 默认 说明
randomSeed Number undefined 当不使用层次布局时，初始渲染时节点位置是随机的。这意味着每次渲染得到的布局均不相同。
如果该配置项的值为一个确定的布局‘’种子''时，那么每次渲染后得到的布局都将相同（都为这个‘’种子‘’）。
可以使用network实例的getseed()方法获取这个布局‘’种子‘’。
improvedLayout Boolean true 为true，关系图将使用‘’Kamada Kawai‘’算法进行初始布局渲染。
对于大于100个节点的关系图，将自动执行‘’集群‘’以减少初次渲染的节点数量。提高渲染性能减少稳定时间。如果关系图节点或边连接十分紧密（没有或只有几个叶节点），这种方式可能不起作用，关系图将使用旧方法渲染。
clusterThreshold Number 150 improvedLayout阈值。''集群''阈值。
hierarchical Object or Boolean Object 如果为true，布局引擎将使用默认设置以分层方式放置节点（层次布局）。可提供 hierarchical对象以自定义。
hierarchical.
    enabled		 Boolean false 为true则为层次布局。如果为undefined，但定义了hierarchical对象中的任何属性，则将其设置为true。
hierarchical.
    levelSeparation		 Number 150 不同层之间的距离
hierarchical.
    nodeSpacing		 Number 100 节点之间的最小距离。这仅用于初始布局。如果启用物理模拟，这里的节点距离就是有效节点距离。
hierarchical.
    treeSpacing		 Number 200 不同树之间的距离（独立关系图实例）。这仅用于初始布局。如果启用物理模拟，在排斥模型中为树之间的距离。
hierarchical.
    blockShifting		 Boolean true 减少canvas中空白的方法。 可单独使用，也可与边最小化（edgeMinimization）配合使用。
每个节点都将检查空白，并将其和其分支（子层）尽可能远地移动，并在各层级中均遵守nodeSpacing。 这主要用于初始布局。
如果启用物理模拟，则布局将由物理模拟确定。 不过，这将大大加快稳定时间！
hierarchical.
    edgeMinimization		 Boolean true 减少canvas中空白的方法。 可单独使用，也可与块移位（blockShifting）配合使用。 启用此项一般情况下会加快布局过程。
每个节点将尝试沿着自由轴移动，以减少其边的总长度。 这主要用于初始布局。
如果启用物理模拟，布局将由物理模拟决定。不过，这将大大加快稳定时间！
hierarchical.
    parentCentralization		 Boolean true 如果为true，则布局算法完成后，父节点将再次居中。
hierarchical.
    direction		 String 'UD' 层次结构的方向。可用选项包括: up-down, down-up, left-right, right-left。可简写为UD,DU,LR,RL。
hierarchical.
    sortMethod		 String 'hubsize' 指定确定节点层级的算法。可选: hubsize, directed。
hubsize 将边最多的节点放在顶部。 由此计算层次布局的其余部分。
directed根据边的“to”和“from”数据计算层级。A->B，因此B低于A的层级。
hierarchical.
   shakeTowards		 String 'roots' 控制在directed布局中：
所有的根节点是否应该排列在顶部，它们的子节点应该尽可能靠近它们的根(roots) 。
还是所有的叶子节点排列在底部，它们的父节点应该尽可能靠近它们的子叶子节点(leaves)。

# vis-network interaction(交互)

用于与关系网的所有用户交互。处理鼠标和触摸事件，以及导航按钮和弹出窗的配置项。

布局的配置项必须包含在名为“interaction”的对象中。

# 完整配置项预览

var options = {
  interaction:{
    dragNodes:true,
    dragView: true,
    hideEdgesOnDrag: false,
    hideEdgesOnZoom: false,
    hideNodesOnDrag: false,
    hover: false,
    hoverConnectedEdges: true,
    keyboard: {
      enabled: false,
      speed: {x: 10, y: 10, zoom: 0.02},
      bindToWindow: true
    },
    multiselect: false,
    navigationButtons: false,
    selectable: true,
    selectConnectedEdges: true,
    tooltipDelay: 300,
    zoomView: true
  }
}

network.setOptions(options);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 配置项详情

名称 类型 默认 说明
dragNodes Boolean true 如果为true，则用户可以拖动未被固定的节点。
dragView Boolean true 如果为true，则用户可以拖动视图。
hideEdgesOnDrag Boolean false 如果为true，则在拖动视图时不会绘制边。这会加快拖动时的响应速度，提升用户体验。
hideNodesOnDrag Boolean false 如果为true，则在拖动视图时不会绘制节点。这会加快拖动时的响应速度，提升用户体验。
hover Boolean false 如果是true，启用悬停，当鼠标移到节点上时，节点使用其悬停颜色。
hoverConnectedEdges Boolean true 如果为true，则当鼠标悬停在节点上时，与其连接的边将以高亮（高亮色）显示。
keyboard Object or Boolean Object 如果为true，则使用默认设置启用键盘快捷键。可以提供keyboard对象来进行更细致的调整。
keyboard.
    enabled		 Boolean false 切换键盘快捷方式的使用。如果此项为undefined，但定义了keyboard对象中的任何属性，则将其设置为true。
keyboard.
    speed.x		 Number 1 按一个键或按一个导航按钮时，视图沿X方向移动的速度。
keyboard.
    speed.y		 Number 1 按一个键或按一个导航按钮时，视图沿Y方向移动的速度。
keyboard.
    speed.
        zoom		 Number 0.02 按一个键或按一个导航按钮，视图放大或缩小的速度。
keyboard.
    bindToWindow		 Boolean true 将键盘快捷键绑定到窗口时。
无论那个DOM对象具有焦点，它们都可以工作。如果页面上有多个关系图实例，可以将其设置为false，确保键盘快捷键仅在具有焦点的关系图实例上工作。
multiselect Boolean false 如果为true，则长时间单击（或触摸）以及控件单击将添加到’选择中‘。
navigationButtons Boolean false 如果为true，则在关系图canvas上绘制导航按钮。这些按钮是HTML，可以使用CSS自定义样式。
selectable Boolean true 如果为true，则用户可以选择节点和边。
selectConnectedEdges Boolean true 如果为true，则在选中节点时，与其连接的边将高亮（高亮色）显示。。
tooltipDelay Number 300 提示框显示的延迟时间（毫秒）。
当节点或边具有“title”属性时，可以将其用提示框显示。提示框本身是一个HTML元素，可以使用CSS自定义样式。
zoomView Boolean true 如果为true，则允许用户缩放视图。

# vis-network manipulation(可视化操作)

充当canvas上的摄像机，进行动画、缩放和对焦。

布局的配置项必须包含在名为“manipulation”的对象中。

# 完整配置项预览

var options = {
  manipulation: {
    enabled: false,
    initiallyActive: false,
    addNode: true,
    addEdge: true,
    editNode: undefined,
    editEdge: true,
    deleteNode: true,
    deleteEdge: true,
    controlNodeStyle:{
      // all node options are valid.
    }
  }
}

network.setOptions(options);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 配置项详情

名称 类型 默认 说明
enabled Boolean false 打开或关闭可视化操作系统。此属性是可选的。如果使用了以下任何配置项，则此配置项设置为true。
initiallyActive Boolean true 为true时，工具栏中‘’添加节点‘’，‘’添加边‘’按钮显示
为false时，只有‘’编辑‘’按钮显示。
addNode Boolean or Function true 为true时，工具栏中显示‘’添加节点‘’按钮
当用户在“添加节点”模式下单击画布时，将调用该函数。此函数将接收两个变量：可以创建的节点的属性和回调函数。
例子: var options = {
                manipulation: {
                    addNode: function(nodeData,callback) {
                                          nodeData.label = 'hello world';
                                          callback(nodeData);
                                        }
                     }
            }
此函数将新节点的标签属性更改为“hello world”。如果不希望创建节点，则可以不调用callback，或者使callback参数为null或不带参数。
addEdge Boolean or Function true 同addNode
editNode Function undefined 只有在提供处理函数时，才能编辑节点。
如果此配置项的值为undefined，则将禁用节点的编辑。
选择节点并按下工具栏上的“编辑节点”按钮时，将调用该函数。这个函数的功能与addNode函数一样
editEdge Boolean or Function true 如果是true，则可在工具栏中切换边的编辑。
如果提供了函数，则当选择边后并按下工具栏上的“编辑边”按钮时，将调用该函数。
在节点编辑的最初状态，可以拖动边的端点连接到不同的节点，然后调用与addEdge函数功能相同的一个函数。
如果值为对象，如果为editWithOutDrag属性指定了函数，则将立即调用该函数（不拖动任何端点），该函数与addEdge函数相同。如果不执行回调，则边将保持编辑状态，直到状态释放为止。
要取消，则可以不调用callback，或者使callback参数为null或不带参数。
deleteNode Boolean or Function true 如果是true，则在选中节点后工具栏中'显示''删除所选''按钮。
如果是函数，则在选择节点并按下“删除所选”按钮时将调用该函数。该函数将接收到一个回调和一个对象，该对象具有一个选定的节点ID数组和一个选定的边ID数组。这些是在执行回调时将被删除的项。
deleteEdge Boolean or Function true 如果是true，则在选中边后工具栏中'显示''删除所选''按钮。
如果是函数，则在选择边并按下“删除所选”按钮时将调用该函数。该函数将接收到一个回调和一个对象，该对象具有一个选定的节点ID数组和一个选定的边ID数组。这些是在执行回调时将被删除的项。
controlNodeStyle Object Object 可以在此配置项中配置任何样式信息。节点模块中的配置项都是允许的，除了x, y 和 fixed。 默认值:
{
    shape:'dot',
    size:6,
    color: {
        background: '#ff0000',
        border: '#3c3c3c',
        highlight: {
            background: '#07f968',
            border: '#3c3c3c'
        }
    },
    borderWidth: 2,
    borderWidthSelected: 2
}

# vis-network physics(物理引擎，物理模拟)

处理物理模拟，移动节点和边以清晰地显示它们。

# 完整配置项预览

var options = {
  physics:{
    enabled: true,
    barnesHut: {
      theta: 0.5,
      gravitationalConstant: -2000,
      centralGravity: 0.3,
      springLength: 95,
      springConstant: 0.04,
      damping: 0.09,
      avoidOverlap: 0
    },
    forceAtlas2Based: {
      theta: 0.5,
      gravitationalConstant: -50,
      centralGravity: 0.01,
      springConstant: 0.08,
      springLength: 100,
      damping: 0.4,
      avoidOverlap: 0
    },
    repulsion: {
      centralGravity: 0.2,
      springLength: 200,
      springConstant: 0.05,
      nodeDistance: 100,
      damping: 0.09
    },
    hierarchicalRepulsion: {
      centralGravity: 0.0,
      springLength: 100,
      springConstant: 0.01,
      nodeDistance: 120,
      damping: 0.09,
      avoidOverlap: 0
    },
    maxVelocity: 50,
    minVelocity: 0.1,
    solver: 'barnesHut',
    stabilization: {
      enabled: true,
      iterations: 1000,
      updateInterval: 100,
      onlyDynamicEdges: false,
      fit: true
    },
    timestep: 0.5,
    adaptiveTimestep: true,
    wind: { x: 0, y: 0 }
  }
}

network.setOptions(options);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

# 配置项详情

名称 类型 默认 说明
enabled Boolean true 打开或关闭物理模拟。此属性是可选的。如果undefined,但定义了下面的任何选项，则此配置项将设置为true.
barnesHut Object Object Barneshut是一个基于四叉树的重力模型。这是非层次布局的中最快、默认和推荐的物理模拟引擎（算法）。
barnesHut.
    theta		 Number 0.5 此参数确定了合并的远程力和各个短程力之间的边界。
较高的值会更快，但是会产生更多的错误，较低的值会很慢，但是会减少错误。
barnesHut.
    gravitationalConstant		 Number -2000 重力吸引。我们喜欢斥力。所以这个值是负数。如果你想要更强的排斥力，降低这个值（-10000至-50000）。
barnesHut.
    centralGravity		 Number 0.3 中心引力的值，该引力将整个网络拉回到中心。
barnesHut.
    springLength		 Number 95 模拟弹簧的边缘，这里的弹簧长度是弹簧的剩余长度。
barnesHut.
    springConstant		 Number 0.04 弹簧的“硬度”。更高的值意味着更强的弹性。
barnesHut.
    damping		 Number 0.09 值范围: [0 .. 1]。阻尼因子是前一次物理模拟迭代中有多少速率传递到下一次迭代（弹簧的抖动）。
barnesHut.
    avoidOverlap		 Number 0 值范围：[0 .. 1]。当大于0时，将考虑节点的大小。 对于重力模型，距离将根据节点围成的圆的半径来计算。 值为1时是最大程度的避免重叠。
forceAtlas2Based Object Object Force Atlas 2由Jacomi等人于2014开发，用于Gephi。基于forceAtlas2的物理引擎利用了它们提供的一些方程，并结合了vis中的barneshut实现。主要的区别是它是中心重力模型，与距离无关，排斥力是线性的而不是平方（二次方，下同）的。
最后，所有节点质量都有一个基于连接边数量加一的乘数(倍数)。
forceAtlas2Based.
    theta		 Number 0.5 此参数确定了合并的远程力和各个短程力之间的边界。
较高的值会更快，但是会产生更多的错误，较低的值会很慢，但是会减少错误。
forceAtlas2Based.
    gravitationalConstant		 Number -50 这与Barneshut.gravitationalConstant类似，只不过斥力的衰减是线性的，而不是平方的。连通性也被视为影响质量的一个因素。如果你想要更强的排斥力，降低这个值（-1000至-2000）。
forceAtlas2Based.
    centralGravity		 Number 0.01 中心引力的值，该引力将整个网络拉回到中心。与距离无关
forceAtlas2Based.
    springLength		 Number 100 模拟弹簧的边缘，这里的弹簧长度是弹簧的剩余长度。
forceAtlas2Based.
    springConstant		 Number 0.08 弹簧的“硬度”。更高的值意味着更强的弹性。
forceAtlas2Based.
    damping		 Number 0.4 值范围: [0 .. 1]。阻尼因子是前一次物理模拟迭代中有多少速率传递到下一次迭代（弹簧的抖动）。
forceAtlas2Based.
    avoidOverlap		 Number 0 值范围：[0 .. 1]。当大于0时，将考虑节点的大小。 对于重力模型，距离将根据节点围成的圆的半径来计算。 值为1时是最大程度的避免重叠。
repulsion Object Object 排斥模型假定节点周围有一个简化的排斥场。力从1（0.5 * nodedistance及更小）线性减小到0（2 * nodedistance）.
repulsion.
    nodeDistance		 Number 100 这是排斥力的影响范围。
repulsion.
    centralGravity		 Number 0.2 中心引力的值，该引力将整个网络拉回到中心。
repulsion.
    springLength		 Number 200 模拟弹簧的边缘，这里的弹簧长度是弹簧的剩余长度。
repulsion.
    springConstant		 Number 0.05 弹簧的“硬度”。更高的值意味着更强的弹性。
repulsion.
    damping		 Number 0.09 值范围: [0 .. 1]。阻尼因子是前一次物理模拟迭代中有多少速率传递到下一次迭代（弹簧的抖动）。
hierarchicalRepulsion Object Object 该模型是基于排斥力物理模拟器的，但考虑了层级和力的标准化。
hierarchicalRepulsion.
    nodeDistance		 Number 120 这是排斥力的影响范围。
hierarchicalRepulsion.
    centralGravity		 Number 0.0' 中心引力的值，该引力将整个网络拉回到中心。
hierarchicalRepulsion.
    springLength		 Number 100 模拟弹簧的边缘，这里的弹簧长度是弹簧的剩余长度。
hierarchicalRepulsion.
    springConstant		 Number 0.01 弹簧的“硬度”。更高的值意味着更强的弹性。
hierarchicalRepulsion.
    damping		 Number 0.09 值范围: [0 .. 1]。阻尼因子是前一次物理模拟迭代中有多少速率传递到下一次迭代（弹簧的抖动）。
maxVelocity Number 50 物理引擎模块限制节点的最大速度，以增加稳定时间。这是最大值。
minVelocity Number 0.1 一旦达到所有节点的最小速度，我们假设关系图已经稳定，模拟停止
solver String 'barnesHut' 物理模拟器。可能的选项: 'barnesHut', 'repulsion', 'hierarchicalRepulsion', 'forceAtlas2Based'。
当为层级布局时，无论此配置项的值是什么，都会自动设置为hierarchicalRepulsion。
stabilization Object or Boolean Object 如果为true，则使用默认设置在加载时稳定关系图。如果为false，则禁用稳定。可以使用stabilization对象自定义。
stabilization.
    enabled		 Boolean true 是否稳定。这是一个可选属性。如果undefined，但却定义了此对象的任何属性时，它将自动设置为true。
stabilization.
    iterations		 Number 1000 物理引擎模块尝试在加载时稳定网络，直到此处定义的最大迭代次数为止。如果网络稳定的次数较少，则在最大数量之前完成。
stabilization.
    updateInterval		 Number 50 更新间隔，当稳定时，DOM 可以冻结。 例如，你可以把稳定器分割成小块来显示进度条。 间隔决定了在多少次迭代之后，stabilizationProgress 事件被触发。
stabilization.
    onlyDynamicEdges		 Boolean false 如果已经预先定义了所有节点的位置，并且只想稳定动态平滑边，请将其设置为“真”。它冻结除不可见动态平滑曲线支持节点之外的所有节点。如果希望可见节点移动并稳定，请不要使用此选项。
stabilization.
    fit		 Boolean true 稳定完成后是否希望视图缩放以适合所有节点。
timestep Number 0.5 时间步长，物理模拟是离散的。 这意味着我们应及时进行一步：计算出力，移动节点，然后再进行下一步。 如果你增加这个数字，'步'会变大，关系图会变得不稳定。 如果您在网络中看到大量的抖动，可以稍微降低这个值。
adaptiveTimestep Boolean true 如果启用此功能，则时间步将智能调整（仅在启用稳定功能的稳定阶段！）大大减少稳定时间。以上配置的时间步长被视为最小时间步长。This can be further improved by using the improvedLayout algorithm (opens new window).
wind Object object 在给定方向上推动所有非固定节点的力,要求所有节点都已连接到“固定”的节点，否则未连接的节点将无限移动。
wind.
    x		 Number 0 将非固定节点推向右边(正值)或左边(负值)的力。
wind.
    y		 Number 0 将非固定节点推向下(正值)或向上(负值)的力
编辑 (opens new window)
#vue#Vis-Network
上次更新: 2024/09/29, 9:09:00
最近更新
01
前端工程师生产环境 debugger 技巧
10-17
02
独立开发者资源
09-05
03
iphone模型样式demo
01-09
更多文章>
Theme by Vdoing | Copyright © 2019-2025 DK Rao | MIT License