1

这个没有中文api真的非常的不好弄,所以从网上学习总结一下:


vis.js分为模块如下:

模块名 描述
configure 生成带有筛选的交互式选项编辑器
edges 处理边的创建和删除,并包含全局边选项和样式。
groups 包含组和一些有关如何处理具有不存在组的节点的选项。
interaction 用于所有用户与网络的交互。处理鼠标和触摸事件和选择,以及导航按钮和弹出窗口。
layout 控制初始和层次定位。
manipulation 提供一个API和可选的GUI来更改网络中的数据。
nodes 处理节点的创建和删除,并包含全局节点选项和样式。
physics 是否所有的模拟都将节点和边移动到它们的最终位置,并控制稳定性。

var options = {
  autoResize: true,
  height: '100%',
  width: '100%'
  locale: 'en',
  locales: locales,
  clickToUse: false,
  configure: {...},    // defined in the configure module.
  edges: {...},        // defined in the edges module.
  nodes: {...},        // defined in the nodes module.
  groups: {...},       // defined in the groups module.
  layout: {...},       // defined in the layout module.
  interaction: {...},  // defined in the interaction module.
  manipulation: {...}, // defined in the manipulation module.
  physics: {...},      // defined in the physics module.
}

network.setOptions(options);

模块configure属性:

参数名 类型 默认值 描述
enabled Boolean true 打开或关闭配置界面。这是一个可选参数。如果未定义该对象的任何其他属性,则将被设置为true。
filter String, Array, Boolean, Function true 当是一个布尔值,为true时将显示所有选项,false将不显示任何选项。如果提供了一个字符串,则可选项为:nodes, edges, layout, interaction, manipulation, physics, selection, renderer。最后,当提供一个字数组时,那么前面提到的字段可多选。当提供函数时,接收两个参数。选项中的选项和路径。如果它返回true,选项将显示在配置器中。例如:function (option, path) {return path.indexOf(‘physics’) !==-1;}这只显示了physics选项。
container DOM element undefined 这允许您将配置列表放在网络下面的另一个HTML容器中。
showButton Boolean true 显示配置程序底部的“生成选项”按钮。

模块layout属性:

参数名 类型 默认值 描述
randomSeed Number undefined 配置每次生成的节点位置是否一样,参数为数字1、2等。当不使用分层布局时,节点最初是随机定位的。这意味着每次固定的位置是不同的。如果手动提供一个随机种子,每次布局都是相同的。理想情况下,您尝试使用未定义的种子,重新加载,直到您对布局感到满意,并使用getSeed()方法来确定种子。
improvedLayout Boolean true 当启用时,网络将使用Kamada Kawai算法进行初始布局。对于大于100个节点的网络,将自动执行聚类以减少节点的数量。这可以大大提高稳定时间。如果网络是非常互联的(没有或很少的叶节点),这可能不起作用,它将恢复到旧的方法。性能将在未来得到改善。
hierarchical Object or Boolean Object 层级结构显示。当为true时,布局引擎使用默认设置以分层方式对节点进行定位。对于定制,您可以提供对象。

关于hierarchical里面object里面的属性填写规范参考博客:https://blog.csdn.net/cuishiz...



模块group参数规范:

参数名 类型 默认值 描述
useDefaultGroups Boolean true 如果节点定义的组不在组模块中,则模块在它所拥有的组上循环,为每个未知组分配一个。当所有被使用时,它回到第一组。通过将此设置为false,默认组将不在此循环中使用。
group* Object 可以添加多个包含样式信息的多个组,这些样式信息适用于组的某个子集。在nodes模块中描述的所有有意义的选项都可以在这里使用(您不会为一组节点设置相同的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} }}该选项不被称为组,如示例所示,但可以由任何自定义ID,除了“UndoDebug组”之外

模块interaction属性参数规范:

参数名 类型 默认值 描述
dragNodes Boolean true 当TRUE时,不固定的节点可以被用户拖动。
dragView Boolean true 当TRUE时,视图可以被用户拖拽。
hideEdgesOnDrag Boolean false 当为真时,拖动视图时不绘制边沿。这可以大大加快拖动的响应性,提高用户体验。
hideNodesOnDrag Boolean false 如果为true,则在拖动视图时不绘制节点。这可以大大加快拖动的响应性,提高用户体验。
hover Boolean false 如果为true,则当鼠标移到节点上时,节点将使用其悬停颜色
hoverConnectedEdges Boolean true 当TRUE,悬停在一个节点上,它的连接边缘突出显示
keyboard Object or Boolean Object 如果为true,则使用默认设置启用键盘快捷键。为了进一步定制,可以提供对象。
multiselect Boolean false 当为真时,长时间单击(或触摸)以及控件单击将添加到选择。
navigationButtons Boolean false 如果为真,则在网络画布上绘制导航按钮。这些是HTML按钮,可以使用CSS完全定制。
selectable Boolean true 当为真时,节点和边可以由用户选择。
selectConnectedEdges Boolean true 当为true时,在选择节点时,其连接边被高亮显示。
tooltipDelay Number 300 当节点或边具有定义的“title”字段时,这可以显示为弹出工具提示。工具提示本身是一个HTML元素,可以使用CSS完全样式化。延迟是在显示工具提示之前花费的毫秒时间。
zoomView Boolean true 当为真时,用户可以放大。
关于keyboard参数规范:

keyboard.png


模块physics属性规范:

参数名 类型 默认值 描述
enabled Boolean true 打开或关闭物理系统。此属性是可选的。如果您定义了下面的任何选项,并且enabled未定义,则此选项将设置为true。
barnesHut Object Object BarnesHut是一个基于四叉树的重力模型。这是非分层布局的最快、默认和推荐的解算器。
forceAtlas2Based Object Object Jacomi等人(2014)开发了Force Atlas 2,用于Gephi。基于forceatlas2的解算器使用了提供的一些方程并利用vis中的barnesHut实现。主要的区别是中心引力模型,它与距离无关,斥力是线性的而不是二次的。最后,所有节点质量都有基于连接边数加1的乘数。
repulsion Object Object 排斥模型假设节点周围有一个简化的排斥场。它的力从1(0.5nodeDistance或更小)线性减少到0(2nodeDistance)
hierarchicalRepulsion Object Object 该模型基于斥力解算器,但考虑了水平和力的规范化。
maxVelocity Number 50 物理模块限制节点的最大速度以增加稳定时间。这是最大值。
minVelocity Number 0.1 一旦达到所有节点的最小速度,我们假设网络已经稳定并且模拟停止。
solver String 'barnesHut' 您可以选择自己的解算器。可能的选项:“barnesHut”、“hierarchicalRepulsion”、“repulsion”、“forceatlas2base”。设置层次布局时,层次排斥解算器将自动选中,而不管您在此处填写什么。
stabilization Object或Boolean Object 如果为true,则使用默认设置在加载时稳定网络。如果为false,则禁用稳定。要进一步自定义此对象,可以提供一个对象。
timestep Number 0.5 物理模拟是离散的。这意味着我们在时间上迈出一步,计算力,移动节点,然后再迈出一步。如果您增加这个数字,步骤将太大,网络可能变得不稳定。如果您看到网络中有很多不稳定的移动,您可能需要稍微降低这个值。
adaptiveTimestep Boolean true 如果启用此选项,则将智能地调整时间步长(仅在启用稳定的稳定阶段!)大大减少稳定时间。上面配置的时间步将作为最小时间步。这可以通过使用改进的布局算法进一步改进。
wind Object Object 按给定方向推动所有非固定节点的力。要求所有节点都连接到“固定”节点,否则未连接的节点将无限期地继续移动。

模块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.
    }
  }
}
参数名 类型 默认值 描述
enabled Boolean false 打开或关闭操纵系统。即使是false,通过这些方法的操作API仍然可以工作。此属性是可选的。如果您定义了下面的任何选项,并且enabled未定义,则此选项将设置为true。
initiallyActive Boolean true 切换工具栏最初是否可见,或是否只有“编辑”按钮最初可见。
addNode Boolean or Function true 您可以使用这些选项打开或关闭某些功能,以便将处理程序函数附加到它们。在执行操作之前调用这些函数。如果要通过操作系统添加一个节点,那么将首先调用addNode函数。有了它,您可以为您的用户提供一个gui,中止进程或任何您想做的事情。对于除editNode功能之外的所有功能,这些处理程序功能都是可选的。 提供布尔值时,只需在操作系统的GUI上切换“添加节点”按钮。在使用方法时,缺少处理函数可能会影响API。当提供函数时,当用户在“addNode”模式下单击画布时,将调用该函数。此函数将接收两个变量:可以创建的节点的属性和回调函数。如果使用新节点的属性调用回调函数,则将添加该节点。
addEdge Boolean or Function true 如果是boolean,在GUI中切换addEdge按钮的可用性,通过这些方法的API仍然可以工作,除非(显然)没有处理函数。当提供一个函数时,当用户以“addEdge”模式将新边从一个节点拖到下一个节点时,将调用该函数。此函数将接收两个变量:可以创建的边的属性和回调函数。如果使用新边的属性调用回调函数,则将添加该边。
editNode Function underfind 只有在提供处理功能时,才可以编辑节点。如果不是这样,则将禁用对节点的编辑。当选择一个节点并按下工具栏上的“编辑节点”按钮时,将调用该函数。这个函数将像addNode函数一样被调用,其中包含节点的数据和回调函数。
editEdge Boolean or Function true 如果是布尔值,则在图形用户界面中切换边的编辑。如果提供了一个函数,则在选择边并按下工具栏上的“Edit Edge”按钮时将调用该函数。最初,可以拖动边的端点以连接到不同的节点,然后以调用addEdge函数的相同方式调用该函数。如果对象为“editWithoutDrag”属性指定了函数,则将立即调用该函数(不拖动任何端点),调用方式与调用addEdge函数的方式相同。如果不执行回调,则边缘将保持挂起状态。若要取消,请使用null作为参数或不使用参数调用回调函数。
deleteNode Boolean or Function true 如果是布尔值,则切换删除图形用户界面中的节点。如果是函数,则在选择节点并按下“删除选定对象”按钮时将调用该函数。当使用一个函数时,它将接收一个回调和一个具有一个选定nodeid数组和一个选定edges id数组的对象。如果执行回调,这些项将被删除。
deleteEdge Boolean or Function true 如果为布尔值,则切换删除图形用户界面中的边。如果是函数,则在选择边并按下“删除选定对象”按钮时将调用该函数。当使用一个函数时,它将接收一个回调和一个具有一个选定nodeid数组(空)和一个选定edges id数组的对象。如果执行回调,这些项将被删除。
controlNodeStyle Object Object 你可以在这里提供任何你想要的样式信息。除了id、x、y和fixed之外,nodes模块中描述的所有字段都是允许的。

模块nodes属性规范:

英文API文档:https://visjs.github.io/vis-n...
visjs首页:https://visjs.org/~~~~


史晶晶
78 声望3 粉丝

菜鸟爱学习