vis-network interaction(交互)
用于与关系网的所有用户交互。处理鼠标和触摸事件,以及导航按钮和弹出窗的配置项。
布局的配置项必须包含在名为“interaction”的对象中。
# 完整配置项预览
var options = {
interaction:{
dragNodes:true,
dragView: true,
hideEdgesOnDrag: false,
hideEdgesOnZoom: false,
hideNodesOnDrag: false,
hover: false,
hoverConnectedEdges: true,
keyboard: {
enabled: false,
speed: {x: 10, y: 10, zoom: 0.02},
bindToWindow: true
},
multiselect: false,
navigationButtons: false,
selectable: true,
selectConnectedEdges: true,
tooltipDelay: 300,
zoomView: true
}
}
network.setOptions(options);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# 配置项详情
名称 | 类型 | 默认 | 说明 |
---|---|---|---|
dragNodes | Boolean | true | 如果为true ,则用户可以拖动未被固定的节点。 |
dragView | Boolean | true | 如果为true ,则用户可以拖动视图。 |
hideEdgesOnDrag | Boolean | false | 如果为true ,则在拖动视图时不会绘制边。这会加快拖动时的响应速度,提升用户体验。 |
hideNodesOnDrag | Boolean | false | 如果为true ,则在拖动视图时不会绘制节点。这会加快拖动时的响应速度,提升用户体验。 |
hover | Boolean | false | 如果是true ,启用悬停,当鼠标移到节点上时,节点使用其悬停颜色。 |
hoverConnectedEdges | Boolean | true | 如果为true ,则当鼠标悬停在节点上时,与其连接的边将以高亮(高亮色)显示。 |
keyboard | Object or Boolean | Object | 如果为true ,则使用默认设置启用键盘快捷键。可以提供keyboard 对象来进行更细致的调整。 |
keyboard. enabled | Boolean | false | 切换键盘快捷方式的使用。如果此项为undefined,但定义了keyboard 对象中的任何属性,则将其设置为true 。 |
keyboard. speed.x | Number | 1 | 按一个键或按一个导航按钮时,视图沿X方向移动的速度。 |
keyboard. speed.y | Number | 1 | 按一个键或按一个导航按钮时,视图沿Y方向移动的速度。 |
keyboard. speed. zoom | Number | 0.02 | 按一个键或按一个导航按钮,视图放大或缩小的速度。 |
keyboard. bindToWindow | Boolean | true | 将键盘快捷键绑定到窗口时。 无论那个DOM对象具有焦点,它们都可以工作。如果页面上有多个关系图实例,可以将其设置为 false ,确保键盘快捷键仅在具有焦点的关系图实例上工作。 |
multiselect | Boolean | false | 如果为true ,则长时间单击(或触摸)以及控件单击将添加到’选择中‘。 |
navigationButtons | Boolean | false | 如果为true ,则在关系图canvas上绘制导航按钮。这些按钮是HTML,可以使用CSS自定义样式。 |
selectable | Boolean | true | 如果为true ,则用户可以选择节点和边。 |
selectConnectedEdges | Boolean | true | 如果为true ,则在选中节点时,与其连接的边将高亮(高亮色)显示。。 |
tooltipDelay | Number | 300 | 提示框显示的延迟时间(毫秒)。 当节点或边具有“title”属性时,可以将其用提示框显示。提示框本身是一个HTML元素,可以使用CSS自定义样式。 |
zoomView | Boolean | true | 如果为true ,则允许用户缩放视图。 |
编辑
(opens new window)
上次更新: 2020/06/08, 17:06:00