当前位置: 首页 > Web前端 > vue.js

vis.js使用文档总结

时间:2023-03-31 18:44:23 vue.js

这个没有中文api真的很难做,所以从网上学习总结一下:vis.js分为模块如下:模块名称描述configure生成交互选项editingwithfiltering的edger处理边的创建和删除,并包含全局边选项和样式。groups包含组和一些关于如何处理具有不存在组的节点的选项。interaction用于所有用户与网络的交互。处理鼠标和触摸事件和选择,以及导航按钮和弹出窗口。布局控制初始和分层定位。manipulation提供API和可选的GUI来更改网络中的数据。nodes处理节点的创建和删除,并包含全局节点选项和样式。physics是否所有模拟都将节点和边缘移动到它们的最终位置,并控制稳定性。varoptions={autoResize:true,height:'100%',width:'100%'locale:'en',locales:locales,clickToUse:false,configure:{...},//在配置模块中定义.edges:{...},//在边缘模块中定义。nodes:{...},//在节点模块中定义。groups:{...},//在组模块中定义。layout:{...},//在布局模块中定义。interaction:{...},//在交互模块中定义。manipulation:{...},//在操作模块中定义。physics:{...},//在physics模块中定义。}network.setOptions(options);模块配置属性:参数名称类型默认值说明enabledBooleantrue打开或关闭配置界面。这是一个可选参数。如果没有定义此对象的其他属性,则将设置为true。filterString,Array,Boolean,Functiontrue为boolean值时,true会显示所有选项,false则不显示任何选项。如果提供了字符串,则选项为:节点、边缘、布局、交互、操作、物理、选择、渲染器。最后,当提供单词数组时,上述字段是多选的。当提供一个函数时,它接收两个参数。选项中的选项和路径。如果它返回true,选项将显示在配置器中。例如:function(option,path){returnpath.indexOf('physics')!==-1;}这只显示物理选项。containerDOMelementundefined这允许您将配置列表放置在web下的另一个HTML容器中。showButtonBooleantrue在配置器底部显示构建选项按钮。模块布局属性:参数名称类型默认值说明randomSeedNumberundefined配置每次生成的节点位置是否相同,参数为编号1、2等。不使用分层布局时,节点初始位置随机。这意味着每次的固定位置都不一样。如果您手动提供随机种子,则布局每次都会相同。理想情况下,您尝试使用未定义的种子,重新加载直到您对布局满意为止,然后使用getSeed()方法确定种子。improvedLayoutBooleantrue启用后,网络将使用KamadaKawai算法进行初始布局。对于大于100个节点的网络,会自动执行聚类以减少节点数。这可以大大缩短建立时间。如果网络非常互连(没有或只有很少的叶节点),这可能行不通,它将恢复到旧方法。性能将在未来得到改善。hierarchicalObject或BooleanObject层级显示。为真时,布局引擎使用默认设置分层定位节点。对于自定义,您可以提供对象。关于hierarchy中对象中属性的填写参考博客:https://blog.csdn.net/cuishiz...不在组模块中,则该模块循环遍历它拥有的组,为每个未知组分配一个。当全部使用时,它会退回到第一组。通过将其设置为false,将不会在此循环中使用默认组。group*Object可以添加多个包含适用于某些组子集的样式信息的组。节点模块中描述的所有有意义的选项都可以在这里使用(您不需要为一组节点设置相同的ID或x,y位置)。示例:varnodes=[{id:1,group:'myGroup',label:"我在一个名为'myGroup'的自定义组中!"}]varoptions={groups:{myGroup:{color:{background:'red'},borderWidth:3}}}该选项不叫组,如示例所示,但可以由任何自定义ID定义,除了“UndoDebug组”模块交互属性参数说明:参数名称类型默认值说明dragNodesBooleantrue当为TRUE时,用户可以拖动不固定的节点。dragViewBool??eantrue当为TRUE时,视图可以被用户拖动。hideEdgesOnDragBooleanfalse当为true时,拖动视图时不绘制边。这样可以大大加快拖拽的响应速度,提升用户体验。hideNodesOnDragBooleanfalse如果为true,则在拖动视图时不绘制节点。这样可以大大加快拖拽的响应速度,提升用户体验。hoverBooleanfalse如果为true,当鼠标悬停在一个节点上时,节点将使用它的悬停颜色为了进一步定制,可以提供对象。multiselectBooleanfalse当为true时,长按(或触摸)以及控制点击将被添加到选择中。navigationButtonsBooleanfalse如果为true,则在网络画布上绘制导航按钮。这些是HTML按钮,可以使用CSS完全自定义。selectableBooleantrue当为真时,用户可以选择节点和边。selectConnectedEdgesBooleantrue当为true时,当一个节点被选中时,它的连接边被高亮显示。tooltipDelayNumber300当节点或边定义了“标题”字段时,这可以显示为弹出工具提示。工具提示本身是一个HTML元素,可以使用CSS完全设置样式。延迟是显示工具提示之前花费的时间(以毫秒为单位)。zoomViewBool??eantrue为true时,用户可以放大。关于键盘参数说明:模块物理属性说明:参数名称类型默认值说明enabledBooleantrue启用或禁用物理系统。该属性是可选的。如果您定义了以下任何选项,并且未定义启用,则此选项将设置为true。barnesHutObjectObjectBarnesHut是一个基于四叉树的引力模型。这是非分层布局的最快、默认和推荐的求解器。forceAtlas2BasedObjectObjectJacomi等人。(2014)开发了用于Gephi的ForceAtlas2。基于forceatlas2的求解器使用了一些提供的方程,并在vis中使用barnesHut实现。主要区别在于中心引力模型,它与距离无关,排斥力是线性的而不是二次方的。最后,所有节点质量都有一个基于连接边数加1的乘数。repulsionObjectObject排斥模型假设节点周围有一个简化的排斥场。它的力从1(0.5nodeDistance或更小)线性减小到0(2nodeDistance)hierarchicalRepulsionObjectObject该模型基于排斥求解器,但考虑了水平和力的归一化。maxVelocityNumber50物理模块限制节点的最大速度以增加稳定时间。这是最大值。minVelocityNumber0.1一旦达到所有节点的最小速度,我们假设网络已经稳定并且模拟停止。solverString'barnesHut'您可以选择自己的求解器。可能的选项:“barnesHut”、“hierarchicalRepulsion”、“repulsion”、“forceatlas2base”。设置分层布局时,无论您在此处填写什么,都会自动选择分层排除求解器。stabilizationObject或BooleanObject如果为true,则使用默认设置来稳定负载网络。如果为false,则禁用稳定性。要进一步自定义此对象,可以提供一个对象。timestepNumber0.5物理模拟是离散的。这意味着我们在时间上迈出一步,计算能力,移动节点,然后再迈出一步。如果增加这个数字,步数会太大,网络可能会变得不稳定。如果您看到网络中有很多不稳定的运动,您可能需要稍微降低该值。adaptiveTimestepBooleantrue如果启用此选项,时间步长将智能调整(仅当稳定阶段启用时!)大大减少了稳定时间。上面配置的时间步将用作最小时间步。这可以通过使用改进的布局算法进一步改进。windObjectObject在给定方向上推动所有非固定节点的力。所有节点都需要连接到一个“静止”节点,否则未连接的节点将无限期地继续移动。模块操作属性规范:varoptions={manipulation:{enabled:false,initiallyActive:false,addNode:true,addEdge:true,editNode:undefined,editEdge:true,deleteNode:true,deleteEdge:true,controlNodeStyle:{//all节点选项有效。}}}参数名称类型默认值说明enabledBooleanfalse启用或禁用操作系统。即使为false,通过这些方法的操作API仍然有效。该属性是可选的。如果您定义了以下任何选项,并且未定义启用,则此选项将设置为true。initiallyActiveBooleantrue切换工具栏最初是否可见,或者是否只有编辑按钮最初可见。addNodeBoolean或Functiontrue您可以使用这些选项打开或关闭某些功能,以便将处理程序功能附加到它们。这些函数在执行操作之前被调用。如果要通过操作系统添加节点,那么首先会调用addNode函数。有了它,您可以为您的用户提供一个图形用户界面,中止进程或任何您想要的。这些处理函数对于除editNode函数之外的所有函数都是可选的。提供布尔值时,只需在操作系统的GUI上切换“添加节点”按钮即可。使用方法时,缺少处理函数会影响API。提供函数后,当用户在“addNode”模式下单击画布时将调用该函数。该函数将接收两个变量:可以创建的节点的属性和回调函数。如果使用新节点的属性调用回调函数,则将添加该节点。addEdgeBoolean或Functiontrue如果是布尔值,则切换GUI中addEdge按钮的可用性,通过这些方法的API仍然可以工作,除非(显然)没有处理函数。当用户在“addEdge”模式下将新边从一个节点拖动到下一个节点时,将调用一个函数。该函数将接收两个变量:可以创建的边的属性和回调函数。如果使用新边的属性调用回调函数,则将添加该边。editNodeFunctionunderfind只有提供了处理函数才能编辑节点。否则,节点的编辑将被禁用。选择节点并按下工具栏上的“编辑节点”按钮时,将调用此功能。该函数将像addNode函数一样被调用,其中包含节点的数据和回调函数。editEdgeBoolean或Functiontrue如果为布尔值,则在GUI中切换边的编辑。如果提供了函数,则选择边缘并按下工具栏上的“编辑边缘”按钮时将调用。最初,可以拖动边的端点连接到不同的节点,然后以与addEdge函数相同的方式调用该函数。如果对象为“editWithoutDrag”属性指定了一个函数,该函数将立即被调用(不拖动任何端点),与调用addEdge函数的方式相同。如果不执行回调,边缘将保持挂起状态。要取消,请使用null作为参数或不使用任何参数调用回调函数。deleteNodeBoolean或Functiontrue如果为布尔值,则切换GUI中节点的删除。如果它是一个函数,它将在选择一个节点并按下“删除所选”按钮时调用。当使用一个函数时,它会收到一个回调和一个对象,其中包含一组选定的nodeids和一组选定的边ids。如果执行回调,项目将被删除。deleteEdgeBoolean或Functiontrue如果为布尔值,则切换GUI中边的删除。如果是函数,则在选择边并按下“删除选定项”按钮时将调用该函数。当使用一个函数时,它将接收一个回调和一个对象,其中包含一个选定的nodeids数组(空)和一个选定的边ids数组。如果执行回调,项目将被删除。controlNodeStyleObjectObject你可以在这里提供任何你想要的样式信息。除了id、x、y和fixed之外,节点模块中描述的所有字段都是允许的。模块节点属性规范:英文API文档:https://visjs.github.io/vis-n...visjs主页:https://visjs.org/~~~~