vis-network 事件

这些事件由交互模块触发。它们与用户输入相关。

# 交互、选择、拖动等事件

# 单击 - click

当用户单击鼠标或触摸屏设备时激发。

network.on('click',function(properties){})

**properties**包含的内容如下，同时这也是所有事件共有的结构。
{
  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}
  }
}
对于单击事件，添加了以下属性:
{
...
  items: [], //点击的对象组成的数组,当发生节点与节点，节点与边，边与边位置重叠时，按照`z-index`递减排序
}
点击对象可以是:
  {nodeId:NodeId}            // 单击具有给定 id 的节点
  {nodeId:NodeId labelId:0}  // 单击具有给定id的节点的标签
  {edgeId:EdgeId}            // 单击具有给定id的边
  {edge:EdgeId, labelId:0}   // 单击具有给定id的边的标签
item数组的顺序是按 `z-index` 顺序递减的。 因此，要获取最顶层的点击对象，可以使用`item[0]`获取值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 双击 - doubleClick

当用户双击鼠标或触摸屏设备时触发。

由于双击实际上是两次单击，所以在双击时首先触发两次单击事件，紧接着才是双击事件。如果只想触发双击事件，只需在处理单击事件时检查事件之间的时间间隔。

同click

# 右键单击 - oncontext

当用户用鼠标右键单击canvas时触发。默认情况下，鼠标右键不会发生选择也不会触发选择事件。但你可以使用 getNodeAt 方法手动选择节点。

同click

# 按住 - hold

当用户单击并按住鼠标或在触摸屏设备上按住时触发。在这种情况下，还会触发一个单击事件。

同click，但是会有一定的延迟（这个延迟主要是区分`hold`、`click`、'doubleclick'等事件）

# 发布 - release

在画布上绘制完成后触发。可用于在关系图上绘制。

同click

# 选择 - select

当用户修改选择时触发（节点或边被选择，被添加到选择或取消选择时）。所有选择事件只在click和hold时触发。

同click

# 选中节点 - selectNode

当用户选择了一个节点时触发。

同click

# 选中边 - selectEdge

当用户选择了一个边时触发。

同click

# 取消选中节点 - deselectNode

当用户取消选择节点(或多个节点)时触发。在回调函数中可获取的属性对象如下:

{
  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]
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 取消选中边 - deselectEdge

当用户取消选择边(或多个边)时触发。

同deselectNode

# 拖动开始 - dragStart

当用户开始拖动时触发

同click

# 拖动中 - dragging

当用户正在拖动节点（多个节点）或视图时触发。

同click

# 拖动结束 - dragEnd

当用户结束拖动时触发

同click

# 拖动控制节点中 - controlNodeDragging

拖动控制节点时触发。 Control Edge 是被拖动的并包含from和to节点的 id的边。如果未将控制节点拖过另一个节点，to为undefined。在回调函数中可获取的属性对象如下:

{
    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}
}

1
2
3
4
5
6
7
8
9
10

# 拖动控制节点结束 - controlNodeDragEnd

当控制节点拖动完成时触发。

同controlNodeDragging

# 悬停在节点 - hoverNode

当启用了interaction:{hover:true}，并且鼠标悬停在节点上，则触发。

{
    node: id, //悬停的节点id
    event: [Object] original click event,
    pointer: {
        DOM: {x:pointer_x, y:pointer_y},
        canvas: {x:canvas_x, y:canvas_y}
    },    
}

1
2
3
4
5
6
7
8

# 从节点移开 - blurNode

当启用了interaction:{hover:true}，并且鼠标从之前悬停的节点移开，则触发。

同hoverNode

# 悬停在边 - hoverEdge

当启用了interaction:{hover:true}，并且鼠标悬停在边上，则触发。

同hoverNode

# 从边移开 - blurEdge

当启用了interaction:{hover:true}，并且鼠标从之前悬停的边移开，则触发。

同hoverNode

# 缩放 - zoom

当用户放大或缩小视图时触发。在回调函数中可获取的属性对象如下:

{
  direction: '+'/'-', //放大还是缩小
  scale: Number, //缩放级别，大于0,与 network.getScale ()的结果相同
  pointer: {x:pointer_x, y:pointer_y}	// 缩放时指针所在的位置。当通过单击放大或缩小导航按钮触发时，该属性为空
}

1
2
3
4
5

# 弹出窗口显示 - showPopup

当弹出窗口(工具提示)显示时触发。

# 弹出窗口隐藏 - hidePopup

当弹出窗口(工具提示)被隐藏时触发。

# 物理模拟相关事件

# 开始稳定 - startStabilizing

当物理模拟开始稳定时触发。当拖动一个节点时，物理模拟重新启动并再次稳定（触发稳定）。稳定并不一定意味着‘不显示’。

# 稳定进展 - stabilizationProgress

当迭代次数达到 updateInterval 的倍数时触发。这只发生在“隐藏的”稳定中。在回调函数中可获取的属性对象如下:

{
  iterations: Number // iterations so far,
  total: Number      // total iterations in options
}

1
2
3
4

# 稳定结束 - stabilizationIterationsDone

当“隐藏的”物理模拟稳定结束时触发。但这并不一定意味着关系图已经稳定; 这也可能意味着物理模拟的稳定迭代次数已经达到配置选项中定义的迭代次数。

# 稳定 - stabilized

当关系已经稳定或调用 stopSimulation ()时触发。所需的迭代次数可以用来调整稳定关系图所需的最大迭代次数。在回调函数中可获取的属性对象如下:

{
  iterations: Number // iterations it took
}

1
2
3

# canvas相关事件

# 尺寸变化 - resize

当canvas的大小发生变化时触发，容器 div 的大小发生变化时、调用setSize ()设置新的width/height时或调用setOptions ()设置新的width/height时也会触发该事件。在回调函数中可获取的属性对象如下:

{
  width: Number     // canvas的'新'宽
  height: Number    // canvas的'新'高
  oldWidth: Number  // canvas的'旧'宽
  oldHeight: Number // canvas的'旧'高
}

1
2
3
4
5
6

# 渲染事件

# 初始化渲染 - initRedraw

在重绘开始之前触发。此时物理模拟已经完成。可用于在开始绘制新关系图之前移动自定义元素。

# 渲染之前 - beforeDrawing

在关系图被清除、缩放并转换到可视位置之后，但在绘制所有边缘和节点之前触发。可用来在绘制关系图之前绘制自定义内容。

# 渲染之后 - afterDrawing

当canvas绘制完成后触发。可用来在绘制关系图之后绘制自定义内容。

# 视图相关事件

# 动画结束 - animationFinished

当动画结束时触发。

# 配置模块相关事件

# 配置更改 - configChange

当用户更改配置器（configurator）中的任何选项时触发。 Options 对象可以与setOptions方法一起使用，也可以使用 JSON.stringify ()进行 string 化。 options将自动作用于关系图中。可以利用此事件存储用户配置项。

编辑

上次更新: 2021/10/15, 0:10:00

← vis-network Cluster(集群配置项) vis-network 从外部导入数据→