Ame's blog Ame's blog
首页
  • 前端核心

    • HTML
    • CSS
    • JavaScript
    • Web API接口
    • TypeScript
    • 浏览器
    • UI库
    • 前端框架
    • 前端工具库
  • 规范

    • 前端规范
  • 进阶

    • 架构之旅
跨端
后端
UI
  • 编译原理
  • 网络
  • 计算机组成
  • 数据结构与算法
  • 操作系统原理
  • 设计模式
  • 数据库
  • 网站
  • 前端通用资源
  • Vue资源
  • React资源
  • Node资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

Ame

跨端修炼者
首页
  • 前端核心

    • HTML
    • CSS
    • JavaScript
    • Web API接口
    • TypeScript
    • 浏览器
    • UI库
    • 前端框架
    • 前端工具库
  • 规范

    • 前端规范
  • 进阶

    • 架构之旅
跨端
后端
UI
  • 编译原理
  • 网络
  • 计算机组成
  • 数据结构与算法
  • 操作系统原理
  • 设计模式
  • 数据库
  • 网站
  • 前端通用资源
  • Vue资源
  • React资源
  • Node资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • vis-network中文文档

    • vis-network 入门
    • vis-network 功能预览
    • vis-network 模块系统
    • vis-network 配置项
    • vis-network Methods(方法)
    • vis-network Cluster(集群配置项)
    • vis-network 事件
    • vis-network 从外部导入数据
    • vis-network configure
    • vis-network edges(边)
    • vis-network nodes(节点)
    • vis-network groups(组)
    • vis-network layout(布局)
    • vis-network interaction(交互)
    • vis-network manipulation(可视化操作)
      • 完整配置项预览
      • 配置项详情
    • vis-network physics(物理引擎,物理模拟)
  • fabricJS中文文档

  • paperJS中文文档

  • pixiJS教程

  • spritejs

  • 数据可视化
  • vis-network中文文档
Ame
2020-06-02

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

# 配置项详情

名称 类型 默认 说明
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
vis-network interaction(交互)
vis-network physics(物理引擎,物理模拟)

← vis-network interaction(交互) vis-network physics(物理引擎,物理模拟) →

最近更新
01
http状态码
04-18
02
el-lists
02-13
03
test
02-13
更多文章>
Theme by ame | Copyright © 2020-2022 Ame | MIT License | 鲁ICP备18003274号-2
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式