vis-network 是 vis.js 生态中专注于交互式网络拓扑图的库，支持节点与边的灵活配置、物理模拟、用户交互等功能，广泛用于关系图谱、流程图、拓扑结构可视化等场景。本文将从核心配置、常用方法、关键事件三个维度，梳理 vis-network 的实用知识点，帮助快速上手并灵活应用。
1. 核心配置：Options
Options 是初始化 vis-network 实例的核心参数，用于定义画布、节点、边、布局、交互等所有行为。以下是高频使用的配置模块及关键项（精简冗余配置，保留核心功能）：
js
const options = {
autoResize: true, // 自动适配容器大小（默认true）；为true时Network可以自动检测容器的大小，并进行相应地重绘；为false时Network则在容器调整大小之后，使用 redraw() 和 setSize() 函数强制重绘。
height: '100%', // 画布高度（支持百分比/像素，如'500px'）。默认值为'100%'。
width: '100%', // 画布宽度
locale: 'en', // 选择语言环境。默认情况下，语言是英语。默认值为'en'。
// Locales对象. 默认支持 'en', 'de', 'es', 'it', 'nl' 'pt-br', 'ru' are supported. 请参阅下面的区域设置部分，了解如何自定义这些内容。
locales: {
en: {
edit: 'Edit',
del: 'Delete selected',
back: 'Back',
addNode: 'Add Node',
addEdge: 'Add Edge',
editNode: 'Edit Node',
editEdge: 'Edit Edge',
addDescription: 'Click in an empty space to place a new node.',
edgeDescription: 'Click on a node and drag the edge to another node to connect them.',
editEdgeDescription: 'Click on the control points and drag them to a node to connect to it.',
createEdgeError: 'Cannot link edges to a cluster.',
deleteClusterError: 'Clusters cannot be deleted.',
editClusterError: 'Clusters cannot be edited.'
}
},
clickToUse: false, // 是否需点击激活画布才响应交互（默认false，直接响应）。当 Network 配置为 clickToUse 时，它只在激活时对鼠标和触摸事件做出反应。当激活时，网络周围显示一个蓝色阴影边框。Network 通过单击设置为激活，通过单击Network外部或按ESC键将再次变为非激活。
// 生成一个具有过滤功能的交互式选项编辑器。
configure: {
enabled: true, // 打开或关闭配置界面。这是一个可选参数。如果未定义，并且定义了此对象的任何其他属性，则将设置为true。
/**
* 类型：String, Array, Boolean, Function
* 当一个布尔值为true时，它会给你所有的选项，false则不会显示任何选项。
* 如果提供了字符串，则允许以下任意组合：节点、边、布局、交互、操纵、物理、选择、渲染器。随意想出一个有趣的分离角色。最后，当提供字符串数组时，可以接受前面提到的任何字段。
* 提供函数时，您会收到两个参数。选项对象中的选项及其路径。如果返回true，则选项将显示在配置器中。例子：
* function (option, path) { return path.indexOf('physics') !== -1; } // 这只显示了物理选项。
*/
filter: 'nodes,edges',
container: undefined, // 类型：DOM element。这允许您将配置列表放在网络下方以外的另一个HTML容器中。
showButton: true, // 显示配置器底部的生成选项按钮。默认值为true。
},
// 处理edges的创建和删除，并包含全局的edges选项和样式。
// 定义节点间连接的样式、箭头、平滑度等，与节点配置逻辑一致。
edges: {
// 箭头（to/middle/from三个方向）
arrows: {
to: {
enabled: false,
imageHeight: undefined,
imageWidth: undefined,
scaleFactor: 1,
src: undefined,
type: "arrow"
},
middle: {
enabled: false,
imageHeight: 32,
imageWidth: 32,
scaleFactor: 1,
src: "https://visjs.org/images/visjs_logo.png",
type: "image"
},
from: {
enabled: false,
imageHeight: undefined,
imageWidth: undefined,
scaleFactor: 1,
src: undefined,
type: "arrow"
}
},
endPointOffset: {
from: 0,
to: 0
},
arrowStrikethrough: true,
chosen: true,
color: {
color:'#848484',
highlight:'#848484',
hover: '#848484',
inherit: 'from',
opacity:1.0
},
dashes: false,
font: {
color: '#343434',
size: 14, // px
face: 'arial',
background: 'none',
strokeWidth: 2, // px
strokeColor: '#ffffff',
align: 'horizontal',
multi: false,
vadjust: 0,
bold: {
color: '#343434',
size: 14, // px
face: 'arial',
vadjust: 0,
mod: 'bold'
},
ital: {
color: '#343434',
size: 14, // px
face: 'arial',
vadjust: 0,
mod: 'italic',
},
boldital: {
color: '#343434',
size: 14, // px
face: 'arial',
vadjust: 0,
mod: 'bold italic'
},
mono: {
color: '#343434',
size: 15, // px
face: 'courier new',
vadjust: 2,
mod: ''
}
},
hidden: false,
hoverWidth: 1.5,
label: undefined,
labelHighlightBold: true,
length: undefined,
physics: true,
scaling:{
min: 1,
max: 15,
label: {
enabled: true,
min: 14,
max: 30,
maxVisible: 30,
drawThreshold: 5
},
customScalingFunction: function (min,max,total,value) {
if (max === min) {
return 0.5;
}
else {
var scale = 1 / (max - min);
return Math.max(0,(value - min)*scale);
}
}
},
selectionWidth: 1,
selfReferenceSize: 20,
selfReference:{
size: 20,
angle: Math.PI / 4,
renderBehindTheNode: true
},
shadow:{
enabled: false,
color: 'rgba(0,0,0,0.5)',
size:10,
x:5,
y:5
},
// 边的平滑度（默认true，动态弯曲）
smooth: {
enabled: true,
type: "dynamic", // 平滑类型（dynamic/straight/curvedCW等）
roundness: 0.5
},
title: undefined,
value: undefined,
width: 1,
widthConstraint: false
},
// 处理nodes的创建和删除，并包含全局的nodes选项和样式。
// 定义节点的样式、外观、交互行为，支持全局配置或通过`groups`批量设置。
nodes: {
borderWidth: 1,
borderWidthSelected: 2,
brokenImage:undefined,
chosen: true,
// 颜色配置（普通/高亮/hover状态）
color: {
border: '#2B7CE9',
background: '#97C2FC',
highlight: {
border: '#2B7CE9',
background: '#D2E5FF'
},
hover: {
border: '#2B7CE9',
background: '#D2E5FF'
}
},
opacity: 1,
fixed: {
x:false,
y:false
},
// 文本样式
font: {
color: '#343434',
size: 14, // px
face: 'arial',
background: 'none',
strokeWidth: 0, // px
strokeColor: '#ffffff',
align: 'center',
multi: false,
vadjust: 0,
bold: {
color: '#343434',
size: 14, // px
face: 'arial',
vadjust: 0,
mod: 'bold'
},
ital: {
color: '#343434',
size: 14, // px
face: 'arial',
vadjust: 0,
mod: 'italic',
},
boldital: {
color: '#343434',
size: 14, // px
face: 'arial',
vadjust: 0,
mod: 'bold italic'
},
mono: {
color: '#343434',
size: 15, // px
face: 'courier new',
vadjust: 2,
mod: ''
}
},
group: undefined,
heightConstraint: false,
hidden: false,
icon: {
face: 'FontAwesome',
code: undefined,
weight: undefined,
size: 50, //50,
color:'#2B7CE9'
},
image: undefined,
imagePadding: {
left: 0,
top: 0,
bottom: 0,
right: 0
},
label: undefined, // 节点文本（可在数据中单独定义）
labelHighlightBold: true,
level: undefined,
mass: 1,
// 是否参与物理模拟（默认true，固定节点需设为false）
physics: true,
scaling: {
min: 10,
max: 30,
label: {
enabled: false,
min: 14,
max: 30,
maxVisible: 30,
drawThreshold: 5
},
customScalingFunction: function (min,max,total,value) {
if (max === min) {
return 0.5;
}
else {
let scale = 1 / (max - min);
return Math.max(0,(value - min)*scale);
}
}
},
shadow:{
enabled: false,
color: 'rgba(0,0,0,0.5)',
size:10,
x:5,
y:5
},
shape: 'ellipse', // 节点形状（ellipse/circle/box/image/icon等）
shapeProperties: {
borderDashes: false, // only for borders
borderRadius: 6, // only for box shape
interpolation: false, // only for image and circularImage shapes
useImageSize: false, // only for image and circularImage shapes
useBorderWithImage: false, // only for image shape
coordinateOrigin: 'center' // only for image and circularImage shapes
},
size: 25, // 节点大小（默认25）
title: undefined,
value: undefined,
widthConstraint: false,
x: undefined,
y: undefined,
},
// 批量样式（groups）：为不同分组的节点设置统一样式，避免重复配置（需在节点数据中指定`group`字段）。
groups: {
useDefaultGroups: true, // // 未知分组是否复用默认样式（默认true）。如果您的节点定义了不在"组"模块中的组，则该模块会循环使用它所定义的组，为每个未知组分配一个组。当所有这些都被使用时，它会回到第一组。通过将此设置为false，默认组将不会在此循环中使用。默认值为true。
/*
您可以添加多个组，这些组包含适用于特定子集的样式信息。节点模块中描述的所有有意义的选项都可以在这里使用（您不会为一组节点设置相同的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}
}
}
*)该选项不称为group，如示例所示，但可以通过任何自定义id，除了'useDefaultGroups'。
*/
myGroupId:{
/*node options*/
},
// 自定义分组（如"用户"节点）
userGroup: {
color: { background: '#FFC107', border: '#FF9800' },
shape: 'box'
},
// 自定义分组（如"设备"节点）
deviceGroup: {
color: { background: '#4CAF50', border: '#388E3C' },
shape: 'circle'
},
},
// 布局配置（layout），控制节点的初始排列方式，支持普通布局和层级布局（如树形结构）。
layout: {
randomSeed: undefined, // 随机种子（固定值可复现相同布局）
improvedLayout:true,
clusterThreshold: 150,
// 层级布局（默认禁用，适合树形结构）
hierarchical: {
enabled:false,
levelSeparation: 150, // 层级间距
nodeSpacing: 100,
treeSpacing: 200,
blockShifting: true,
edgeMinimization: true,
parentCentralization: true,
direction: 'UD', // 方向（UD：上下/DU：下上/LR：左右/RL：右左）
sortMethod: 'hubsize', // 排序方式（hubsize：按节点度数/directed：按方向）
shakeTowards: 'leaves' // roots, leaves
}
},
// 用户交互（interaction）： 定义用户与画布的交互行为，如拖拽、缩放、选择等。
interaction: {
dragNodes:true, // 是否允许拖拽节点（默认true）
dragView: true, // 是否允许拖拽画布（默认true）
hideEdgesOnDrag: false,
hideEdgesOnZoom: false,
hideNodesOnDrag: false,
hover: false, // 是否启用hover效果（默认false，需配合hoverNode事件）
hoverConnectedEdges: true,
keyboard: {
enabled: false,
speed: {x: 10, y: 10, zoom: 0.02},
bindToWindow: true,
autoFocus: true,
},
multiselect: false, // 是否允许框选多个节点（默认false）
navigationButtons: false,
selectable: true,
selectConnectedEdges: true,
tooltipDelay: 300, // tooltip延迟显示时间（毫秒）
zoomSpeed: 1,
zoomView: true, // 是否允许缩放画布（默认true）
},
// 提供改变Network中数据的API和可选GUI。
manipulation: {
enabled: false,
initiallyActive: false,
addNode: true,
addEdge: true,
editNode: undefined,
editEdge: true,
deleteNode: true,
deleteEdge: true,
controlNodeStyle: {
// all node options are valid.
}
},
// 物理模拟（physics）: 控制节点的运动规则（如排斥力、引力），优化大规模网络的布局稳定性。
physics: {
enabled: true, // 是否启用物理模拟（默认true）
// barnesHut求解器参数
barnesHut: {
theta: 0.5,
gravitationalConstant: -2000, // 引力常数（负值为排斥，绝对值越大效果越强）
centralGravity: 0.3,
springLength: 95, // 弹簧长度（节点间的理想距离）
springConstant: 0.04,
damping: 0.09, // 阻尼（控制运动衰减速度，值越大越稳定）
avoidOverlap: 0
},
forceAtlas2Based: {
theta: 0.5,
gravitationalConstant: -50,
centralGravity: 0.01,
springConstant: 0.08,
springLength: 100,
damping: 0.4,
avoidOverlap: 0
},
repulsion: {
centralGravity: 0.2,
springLength: 200,
springConstant: 0.05,
nodeDistance: 100,
damping: 0.09
},
hierarchicalRepulsion: {
centralGravity: 0.0,
springLength: 100,
springConstant: 0.01,
nodeDistance: 120,
damping: 0.09,
avoidOverlap: 0
},
maxVelocity: 50,
minVelocity: 0.1,
solver: 'barnesHut', // 求解器（barnesHut：大规模网络/repulsion：小规模）
// 稳定化配置（避免节点持续运动）
stabilization: {
enabled: true,
iterations: 1000, // 最大迭代次数（达到次数后停止模拟）
updateInterval: 100,
onlyDynamicEdges: false,
fit: true
},
timestep: 0.5,
adaptiveTimestep: true,
wind: { x: 0, y: 0 }
},
}2. 方法
2.1 全局方法
-
destroy(): 销毁实例，移除DOM引用和事件绑定
jsnetwork.destroy(); -
setData({nodes:vis DataSet/Array, edges:vis DataSet/Array}): 覆盖实例的所有数据（节点/边需为 vis.DataSet 或数组）。
jsconst newNodes = [{ id: 1, label: '新节点' }]; const newEdges = [{ from: 1, to: 2, label: '连接' }]; network.setData({ nodes: newNodes, edges: newEdges }); -
setOptions(Object options): 动态更新配置（支持部分更新）
jsnetwork.setOptions({ nodes: { size: 30 } }); -
on(String event name,Function callback)：绑定事件监听器
jsnetwork.on('click', (params) => console.log(params)); -
off(String event name,Function callback)：移除事件监听器
jsnetwork.off('click', handleClick); -
once(String event name,Function callback)：只设置一次事件侦听器。事件发生后，事件侦听器将被删除。根据事件的类型，回调函数会得到不同的参数。有关更多信息，请参阅文档的事件部分。
2.2 与画布相关的方法
-
canvasToDOM({x:Number,y:Number})：这个函数将画布坐标转换为DOM上的坐标。输入和输出的形式为{x:Number,y:Number}。DOM值是相对于Network容器而言。
-
DOMtoCanvas({x:Number,y:Number})：这个函数将DOM上的坐标转换为画布坐标。输入和输出的形式为{x:Number,y:Number}。DOM值是相对于Network容器而言。
-
redraw()：重绘Network。
-
setSize(String width,String height)：设置画布的大小。这是在窗口调整大小时自动完成的。
2.3 布局
-
getSeed()：如果您喜欢您当前Network的布局，并且希望下次以同样的方式启动，请使用此方法请求Seed并将其放入layout.randomSeed选项中。
2.4 使用没有GUI的操纵系统的操纵方法。
-
enableEditMode()：以编程方式启用编辑模式。类似于按下编辑按钮的效果。
-
disableEditMode()：编程禁用编辑模式。类似于按下关闭图标(工具栏角落的小十字)的效果。
-
addNodeMode()：进入addNode模式。不需要启用编辑模式或操作。要摆脱这种模式，请调用disableEditMode()。handlerFunctions中定义的回调函数仍然适用。要在不使用操作GUI的情况下使用这些方法，请确保设置为false。
-
editNode()：编辑选定的节点。addNodeMode的解释也适用于此。
-
addEdgeMode()：进入addEdge模式。addNodeMode的解释也适用于此。
-
editEdgeMode()：进入editEdge模式。addNodeMode的解释也适用于此。
-
deletedSelected()：删除选中。不需要启用编辑模式或操作。
2.5 获取节点和边信息的方法
-
getPositions([Array of nodeIds or nodeId])：获取节点的画布坐标（支持单个/多个节点）。
- 返回具有所提供节点ID或节点ID的节点或节点组在画布空间中的x、y坐标，以对象形式呈现：
js// All nodes in the network. network.getPositions(); > { a123: { x: 5, y: 12 }, b456: { x: 3, y: 4 }, c789: { x: 7, y: 10 } } // Specific nodes. network.getPositions(['a123', 'b456']); > { a123: { x: 5, y: 12 }, b456: { x: 3, y: 4 }, } // A single node. network.getPositions('a123'); > { a123: { x: 5, y: 12 } }- 示例
js// 获取节点1的坐标 const pos = network.getPositions(1); // { 1: { x: 50, y: 80 } } -
getPosition(nodeId)： 返回特定节点在画布空间中的x y位置。
jsnetwork.getPosition('a123'); > { x: 5, y: 12 }如果没有提供id，该方法将抛出 TypeError 如果提供的id与网络中的节点不对应，则该方法将抛出 ReferenceError。
-
storePositions()：
- 当使用 vis.DataSet 将节点加载到网络中，此方法将所有节点的 X 和 Y 位置放入该数据集中。如果你从数据库加载节点，并将其与 DataSet 动态耦合，你可以使用它来稳定你的网络一次，然后通过 DataSet 保存该数据库中的位置，这样下次加载节点时，稳定几乎是即时的。
- 如果节点仍在移动，并且您正在使用动态平滑边（默认情况下处于启用状态），则可以使用物理模块中的选项 stabilization.onlyDynamicEdges 来缩短初始化时间。
- 此方法不支持聚类。目前，在使用聚类时无法缓存位置，因为它们不能仅从位置正确初始化。
-
moveNode(nodeId, Number x, Number y)：手动移动节点到指定画布坐标。
js// 移动节点1到(200, 200) network.moveNode(1, 200, 200); -
getBoundingBox(String node Id)：
- 返回节点的边界框，其中包含以下格式的标签：
js{ top: Number, left: Number, right: Number, bottom: Number, }这些值位于画布空间中。
-
getConnectedNodes(String nodeId or edgeId, [String direction])：
- 返回直接连接到此节点或边的所有节点的节点ID数组。
- 对于节点id，返回一个数组，其中包含连接节点的id。
- 如果可选参数 direction 设置为字符串 'from'，则只返回父节点。
- 如果 direction 设置为 'to'，则只返回子节点。
- 任何其他值或 undefined 都会返回父节点和子节点。
- 对于边id，返回一个数组：[fromId，toId]。边的参数方向被忽略。
-
getConnectedEdges(String nodeId)：返回连接到此节点的边的edgeId数组。
2.6 控制模拟何时运行的物理方法
物理模拟控制：用于手动启停物理模拟，优化布局稳定性。
-
startSimulation()：启动物理模拟（默认自动启动，手动停止后需调用）。
- 启动物理模拟。这通常在需要时进行，只有当自己停止模拟并希望在之后继续时才真正有用。
-
stopSimulation()：停止物理模拟（触发stabilized事件）。
- 这将停止物理模拟并触发 stabilized 事件。可以通过拖动节点、更改数据集或调用 startSimulation() 来重新启动它。
-
stabilize([iterations])：手动执行稳定化（快速优化布局，可选迭代次数）。
2.7 节点和边的选择方法
-
getSelection()：
- 返回一个具有选定节点和边ID的对象，如下所示：
js{ nodes: [Array of selected nodeIds], edges: [Array of selected edgeIds] } -
getSelectedNodes()：获取当前选中的节点ID数组。
jsconst selected = network.getSelectedNodes(); // [1, 2] -
getSelectedEdges()：
- 返回一个选定边ID的数组，如下所示：[edgeId1, edgeId2, ..]
-
getNodeAt({x: xPosition DOM, y: yPosition DOM})：
- 返回 nodeId 或 undefined。DOM位置预计为画布左上角的像素。
-
getEdgeAt({x: xPosition DOM, y: yPosition DOM})：
- 返回edgeId或undefined。DOM位置预计为画布左上角的像素。
-
selectNodes(Array with nodeIds,[Boolean highlightEdges])：选择指定节点（可选是否高亮关联边）。
js// 选择节点1和2，高亮关联边 network.selectNodes([1, 2], true);- 选择与输入数组中的id对应的节点。如果 highlightEdges 为 true 或 undefined，则相邻边也将被选择。此方法在选择自己的对象之前取消选择所有其他对象。不引发事件。
-
selectEdges(Array with edgeIds)：
- 选择与输入数组中的id对应的边。此方法在选择自己的对象之前取消选择所有其他对象。不引发事件。
-
setSelection( Object selection, [Object options])：
- 设置选择，选择必须是这样的对象：
js{ nodes: [Array of nodeIds], edges: [Array of edgeIds] }- 您还可以仅传递选择对象中的节点（nodes）或边（edges）。可用选项包括：
js{ unselectAll: Boolean, highlightEdges: Boolean } -
unselectAll()：取消选择所有对象，不引发事件。
2.8控制视口缩放和动画的方法
-
getScale()：
- 返回网络的当前比例。1.0相当于100%，0无限缩小
-
getViewPosition()：
- 以以下形式返回视图的当前中心焦点：
{x:{Number}，y:{Number}}
-
fit([Object options])：缩放画布以显示所有节点（支持指定节点或缩放范围）。
- 可以提供选项进行自定义：
js{ nodes?: (string | number)[], minZoomLevel?: number, maxZoomLevel?: number, animation?: boolean | { duration?: number easingFunction?: string } }js// 显示所有节点 network.fit(); // 仅显示节点1和2，最小缩放级别0.5 network.fit({ nodes: [1, 2], minZoomLevel: 0.5 }); -
focus( String nodeId, [Object options])：聚焦到指定节点（自动缩放并锁定视图）。
js{ scale: Number, offset: {x:Number, y:Number} locked: boolean animation: { // -------------------> can be a boolean too! duration: Number easingFunction: String } }js// 聚焦节点1，缩放级别2.0 network.focus(1, { scale: 2.0 });下面的 moveTo() 描述中解释了除锁定之外的所有选项。锁定表示放大动画完成后，视图是否仍锁定到节点。默认值为true。options对象在focus方法中是可选的。
-
moveTo(Object options)：手动控制视图位置和缩放（支持动画）。
- 选项包括：
js{ position: {x:Number, y:Number}, scale: Number, offset: {x:Number, y:Number} animation: { // -------------------> can be a boolean too! duration: Number easingFunction: String } }- 示例：
jsnetwork.moveTo({ position: { x: 100, y: 100 }, // 画布中心位置 scale: 1.5, // 缩放级别 animation: { duration: 1000 } // 动画时长（毫秒） });位置（以画布为单位！）是相机中心焦点的位置。比例是目标缩放级别。默认值为1.0。偏移量（以DOM为单位）是视图从中心聚焦的像素数。默认值为｛x:0，y:0｝。对于动画，可以使用布尔值将其与默认选项一起使用，也可以禁用它，或者可以手动定义持续时间（以毫秒为单位）和缓解功能。可用的有：
linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint。必须至少定义一个比例、位置或偏移。否则，就没有什么可转移的了。 -
releaseNode()：以编程方式释放焦点节点。
2.9 与配置器模块一起使用的方法
-
getOptionsFromConfigurator()：
- 如果使用配置器，可以调用此方法来获取一个选项对象，该对象包含用户与配置器交互导致的与默认选项的所有差异。
2.10 集群方法选项对象
提供给集群函数的选项对象可以包含以下属性：
-
joinCondition( nodeOptions: Object) 或 joinCondition( parentNodeOptions: Object, childNodeOptions: Object)：
- 除集群方法外，其他方法都是可选的。
clusterByConnection是唯一一个将2个 nodeOptions 对象作为参数传递给 joinCondition 回调的函数。- 集群模块循环选择集群中的所有节点，并使用它们的数据作为参数调用此函数。如果此函数返回 true，则此节点将被添加到集群中。您可以访问所有选项（包括默认选项）以及您可能添加到节点的任何自定义字段，以确定是否将其包含在集群中。例子：
jsvar nodes = [ {id: 4, label: 'Node 4'}, {id: 5, label: 'Node 5'}, {id: 6, label: 'Node 6', cid:1}, {id: 7, label: 'Node 7', cid:1} ] var options = { joinCondition:function(nodeOptions) { return nodeOptions.cid === 1; } } network.clustering.cluster(options);clusterByConnection将2个 nodeOptions 对象作为参数传递给 joinCondition 回调函数。 -
processProperties(clusterOptions: Object, childNodesOptions: Array, childEdgesOptions: Array)：
- 可选。在创建新的集群节点之前，将使用您提供的属性（
clusterNodeProperties）、所有包含的节点和所有包含的边调用此（可选）函数。您可以使用此功能根据集群包含的项目更新集群的属性。该函数应返回属性以创建集群节点。在下面的例子中，我们确保在形成集群时保持质量和价值：
jsvar options = { processProperties: function (clusterOptions, childNodes, childEdges) { var totalMass = 0; var totalValue = 0; for (var i = 0; i < childNodes.length; i++) { totalMass += childNodes[i].mass; totalValue = childNodes[i].value ? totalValue + childNodes[i].value : totalValue; } clusterOptions.mass = totalMass; if (totalValue > 0) { clusterOptions.value = totalValue; } return clusterOptions; }, } -
clusterNodeProperties
- 可选。这是一个包含群集节点选项的对象。节点模块中描述的所有选项都是允许的。这允许您以任何方式设置集群节点的样式。这也是 processProperties 函数中提供的用于微调的样式对象。如果未定义，将使用默认节点选项。
- 默认功能仅在集群包含2个或更多节点时才允许集群。要允许对单个节点进行集群，可以使用
allowSingleNodeCluster: true属性。
jsclusterNodeProperties: { allowSingleNodeCluster: true } -
clusterEdgeProperties：
- 可选。这是一个包含连接到集群的边的选项的对象。允许使用边缘模块中描述的所有选项。使用此功能，您可以按任何方式设置连接到集群的边的样式。如果没有提供，则使用被替换的边上的选项。如果未定义，将使用默认边选项。
3. Events
3.1 由人机交互、选择、拖动等触发的事件
-
click： 点击画布时触发（返回点击的节点/边、坐标等信息）。
js{ nodes: [Array of selected nodeIds], edges: [Array of selected edgeIds], event: [Object] original click event, pointer: { DOM: {x:pointer_x, y:pointer_y}, canvas: {x:canvas_x, y:canvas_y} } }这是所有事件的共同结构。针对单击事件，添加了以下属性：
js{ ... items: [Array of click items], }点击项目可以是：
js{nodeId:NodeId} // node with given id clicked on {nodeId:NodeId labelId:0} // label of node with given id clicked on {edgeId:EdgeId} // edge with given id clicked on {edge:EdgeId, labelId:0} // label of edge with given id clicked onitems 数组的顺序按 z-order 递减。因此，要获取最顶部的项，请获取索引0处的值。
- 示例;
jsnetwork.on('click', (params) => { // 点击节点时打印节点ID if (params.nodes.length > 0) { console.log('点击节点：', params.nodes[0]); } }); -
doubleClick：
- 当用户双击鼠标或在触摸屏设备上双击时触发。由于双击实际上是2次点击，因此会触发2次点击事件，然后是双击事件。如果在触发双击事件时不想使用单击事件，只需在处理它们之前检查单击事件之间的时间。
-
oncontext：
- 当用户用鼠标右键单击画布时触发。默认情况下，鼠标右键不选择。如果需要，可以使用
getNodeAt方法选择节点。
-
hold：
- 当用户点击并按住鼠标或在触摸屏设备上点击并按住时触发。在这种情况下，还会触发一个点击事件。
-
release：画布上的绘画完成后发射。可用于在网络上绘图。
-
select：选择状态变化时触发（返回当前选中的节点/边）。
-
selectNode：当用户选择节点时触发。
-
selectEdge：当用户选择边时触发。
-
deselectNode：
- 当用户取消选择一个或多个节点时触发。上一个选择是在上次用户事件之前选择的节点和边的列表。传递具有以下结构的属性的对象：
js{ nodes: [Array of selected nodeIds], edges: [Array of selected edgeIds], event: [Object] original click event, pointer: { DOM: {x:pointer_x, y:pointer_y}, canvas: {x:canvas_x, y:canvas_y} }, previousSelection: { nodes: [Array of previously selected nodeIds], edges: [Array of previously selected edgeIds] } } -
deselectEdge：
- 当用户取消选择一个或多个边时触发。上一个选择是在上次用户事件之前选择的节点和边的列表。
-
dragStart：开始拖动时被触发。
-
dragging： 拖动节点或视图时触发。
-
dragEnd：拖动完成后触发。
-
controlNodeDragging：
- 拖动控制节点时触发。Control Edge 是正在拖动的边，包含'from'和'to'节点的id。若控制节点未拖动到另一个节点上，则'to'字段未定义。传递具有以下结构的属性的对象：
js{ nodes: [Array of selected nodeIds], edges: [Array of selected edgeIds], event: [Object] original click event, pointer: { DOM: {x:pointer_x, y:pointer_y}, canvas: {x:canvas_x, y:canvas_y} }, controlEdge: {from:from_node_id, to:to_node_id} } -
controlNodeDragEnd：控制节点拖动完成后触发。
-
hoverNode：
- 如果启用了选项
interaction: {hover:true}并且鼠标悬停在节点上，则触发。
-
blurNode：
- 如果启用了选项
interaction:{hover:true}，并且鼠标从之前悬停的节点移开，则触发。
-
hoverEdge：
- 如果启用了选项
interaction:{hover:true}并且鼠标悬停在边缘上，则触发。
-
blurEdge：
- 如果启用了选项
interaction:{hover:true}，并且鼠标从之前悬停的边缘移开，则触发。
-
zoom：缩放画布时触发（返回缩放方向和当前缩放级别）。
- 当用户放大或缩小时触发。这些属性告诉你缩放的方向。缩放是一个大于0的数字，这与使用 network.getScale() 得到的数字相同。当通过单击放大或缩小导航按钮触发时，传递的对象的指针属性将为 null。传递具有以下结构的属性的对象：
js{ direction: '+'/'-', scale: Number, pointer: {x:pointer_x, y:pointer_y} } -
showPopup：显示弹出窗口（工具提示）时触发。
-
hidePopup：当弹出窗口（工具提示）隐藏时触发。
3.2 事件触发了物理模拟。可用于触发GUI更新
-
startStabilizing：
- 稳定开始时触发。当您拖动节点并重新启动物理模拟以再次稳定时，也会出现这种情况。稳定并不一定意味着"不表现"。
-
stabilizationProgress：稳定化过程中触发（返回进度，用于显示加载条）。
- 当达到
updateInterval迭代次数的倍数时触发。这只发生在"隐藏"的稳定中。传递具有以下结构的属性的对象：
js{ iterations: Number // iterations so far, total: Number // total iterations in options } -
stabilizationIterationsDone：
- 当"隐藏"稳定功能完成时触发。这并不一定意味着网络是稳定的；这也可能意味着已经达到选项中定义的迭代次数。
-
stabilized：物理模拟稳定或手动停止时触发（返回迭代次数）。
- 当网络稳定或调用
stopSimulation()时触发。它所花费的迭代量可用于调整稳定网络所需的最大迭代量。传递一个具有以下结构的属性的对象：
js{ iterations: Number // iterations it took }jsnetwork.on('stabilized', (params) => { console.log('布局稳定，迭代次数：', params.iterations); });
3.3 画布触发的事件
-
resize：画布大小变化时触发（用于适配窗口 resize 事件）。
- 当画布的大小被调整时触发，可以通过容器div大小改变时的重绘调用、具有新值的 setSize() 调用或具有新宽度和/或高度值的 setOptions() 调用。传递具有以下结构的属性的对象：
js{ width: Number // the new width of the canvas height: Number // the new height of the canvas oldWidth: Number // the old width of the canvas oldHeight: Number // the old height of the canvas }
3.4 渲染模块触发的事件。可用于在画布上绘制自定义元素
-
initRedraw：
- 在重新绘制开始前被解雇。此时模拟步骤已完成。可用于在开始绘制新框架之前移动自定义元素。
-
beforeDrawing：绘制节点/边前触发（可在画布底层绘制自定义内容）。
- 在画布被清除、缩放并平移到查看位置后，但在绘制所有边和节点之前触发。可用于在网络后面绘制。
-
afterDrawing：绘制节点/边后触发（可在画布顶层绘制自定义内容）。
3.5 视图模块触发的事件
-
animationFinished：动画完成时触发
3.6 配置模块触发的事件
-
configChange：
- 当用户更改配置器中的任何选项时触发。options 对象可以与 setOptions 方法一起使用，也可以使用 JSON.stringify() 进行字符串化。您不必手动将选项放入网络：这是自动完成的。您可以使用该事件将用户选项存储在数据库中。