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);

配置项详情

名称	类型	默认	说明
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 }