这个没有中文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参数规范:
模块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/~~~~
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。