visjs的使用文档总结

60次阅读

共计 3009 个字符，预计需要花费 8 分钟才能阅读完成。

这个没有中文 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);

参数名	类型	默认值	描述
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	显示配置程序底部的“生成选项”按钮。

参数名	类型	默认值	描述
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…

参数名	类型	默认值	描述
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，the 节点土地徘徊的颜色当老鼠移动了他们。
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	当为真时，用户可以放大。