乐趣区

visjs的使用文档总结

jiezi

这个没有中文 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，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 当为真时，用户可以放大。
关于 keyboard 参数规范：

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

退出移动版