vis-network manipulation(可视化操作)
充当canvas上的摄像机,进行动画、缩放和对焦。
布局的配置项必须包含在名为“manipulation”的对象中。
# 完整配置项预览
var options = {
manipulation: {
enabled: false,
initiallyActive: false,
addNode: true,
addEdge: true,
editNode: undefined,
editEdge: true,
deleteNode: true,
deleteEdge: true,
controlNodeStyle:{
// all node options are valid.
}
}
}
network.setOptions(options);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 配置项详情
名称 | 类型 | 默认 | 说明 |
---|---|---|---|
enabled | Boolean | false | 打开或关闭可视化操作系统。此属性是可选的。如果使用了以下任何配置项,则此配置项设置为true。 |
initiallyActive | Boolean | true | 为true时,工具栏中‘’添加节点‘’,‘’添加边‘’按钮显示 为false时,只有‘’编辑‘’按钮显示。 |
addNode | Boolean or Function | true | 为true时,工具栏中显示‘’添加节点‘’按钮 当用户在“添加节点”模式下单击画布时,将调用该函数。此函数将接收两个变量:可以创建的节点的属性和回调函数。 例子: var options = { manipulation: { addNode: function(nodeData,callback) { nodeData.label = 'hello world'; callback(nodeData); } } } 此函数将新节点的标签属性更改为“hello world”。如果不希望创建节点,则可以不调用callback,或者使callback参数为null或不带参数。 |
addEdge | Boolean or Function | true | 同addNode |
editNode | Function | undefined | 只有在提供处理函数时,才能编辑节点。 如果此配置项的值为undefined,则将禁用节点的编辑。 选择节点并按下工具栏上的“编辑节点”按钮时,将调用该函数。这个函数的功能与 addNode 函数一样 |
editEdge | Boolean or Function | true | 如果是true,则可在工具栏中切换边的编辑。 如果提供了函数,则当选择边后并按下工具栏上的“编辑边”按钮时,将调用该函数。 在节点编辑的最初状态,可以拖动边的端点连接到不同的节点,然后调用与 addEdge 函数功能相同的一个函数。如果值为对象,如果为 editWithOutDrag 属性指定了函数,则将立即调用该函数(不拖动任何端点),该函数与addEdge函数相同。如果不执行回调,则边将保持编辑状态,直到状态释放为止。要取消,则可以不调用callback,或者使callback参数为null或不带参数。 |
deleteNode | Boolean or Function | true | 如果是true,则在选中节点后工具栏中'显示''删除所选''按钮。 如果是函数,则在选择节点并按下“删除所选”按钮时将调用该函数。该函数将接收到一个回调和一个对象,该对象具有一个选定的节点ID数组和一个选定的边ID数组。这些是在执行回调时将被删除的项。 |
deleteEdge | Boolean or Function | true | 如果是true,则在选中边后工具栏中'显示''删除所选''按钮。 如果是函数,则在选择边并按下“删除所选”按钮时将调用该函数。该函数将接收到一个回调和一个对象,该对象具有一个选定的节点ID数组和一个选定的边ID数组。这些是在执行回调时将被删除的项。 |
controlNodeStyle | Object | Object | 可以在此配置项中配置任何样式信息。节点模块中的配置项都是允许的,除了x , y 和 fixed 。 默认值: { shape:'dot', size:6, color: { background: '#ff0000', border: '#3c3c3c', highlight: { background: '#07f968', border: '#3c3c3c' } }, borderWidth: 2, borderWidthSelected: 2 } |
编辑
(opens new window)
上次更新: 2020/06/08, 17:06:00