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-05-27

    vis-network 配置项

    var options = {
      autoResize: true,
      height: '100%',
      width: '100%'
      locale: 'en',
      locales: locales,
      clickToUse: false,
      configure: {...},    // 详细配置请查看'配置'模块,
      edges: {...},        // 详细配置请查看'边'模块,
      nodes: {...},        // 详细配置请查看'节点'模块,
      groups: {...},       // 详细配置请查看'组'模块,
      layout: {...},       // 详细配置请查看'布局'模块,
      interaction: {...},  // 详细配置请查看'交互'模块,
      manipulation: {...}, // 详细配置请'可视化操作'模块,
      physics: {...},      // 详细配置请查看'物理引擎'模块,
    }
    
    network.setOptions(options);
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18

    # 配置项

    名称 类型 默认值 描述
    autoResize Boolean true 设置为true,network实例将自动调整容器的大小,并重绘。
    设置为 false,network实例将不会自动调整,但是你可以使用redraw()和 setSize()手动调整容器大小及重绘。
    width String '100%' 绘制区域的宽度,注意区分容器宽度。
    示例:'60%'或'400px'
    height String '100%' 绘制区域的高度,注意区分容器高度。
    示例:'60%'或'400px'
    locale String 'en' 选择语言,默认为英语。
    locales Object defaultLocales 设置语言格式化对象。
    默认支持 'en', 'de', 'es', 'it', 'nl' 'pt-br', 'ru' ,可自定义locales 。
    clickToUse Boolean false 当 clickToUse设置为true时,network实例只有在激活时才会对鼠标和触摸事件作出响应。
    当激活时,一个蓝色的阴影边框将围绕实例。
    通过点击实例设置为激活,通过点击实例外部或按 ESC 键将其设置为失活。
    configure Object Object 点击 配置模块 查看配置详情
    edges Object Object 点击 边模块 查看配置详情
    nodes Object Object 点击 节点模块查看配置详情
    groups Object Object 点击 组模块 查看配置详情
    layout Object Object 点击 布局模块 查看配置详情
    interaction Object Object 点击 交互模块 查看配置详情
    manipulation Object Object 点击可视化操作模块 查看配置详情
    physics Object Object 点击 物理引擎模块 查看配置详情

    # 自定义locales

    locales 对象具有以下格式:

    //主要是配置'可视化编辑'时的提示。
    var locales = {
      en: {
        edit: 'Edit',
        del: 'Delete selected',
        back: 'Back',
        addNode: 'Add Node',
        addEdge: 'Add Edge',
        editNode: 'Edit Node',
        editEdge: 'Edit Edge',
        addDescription: 'Click in an empty space to place a new node.',
        edgeDescription: 'Click on a node and drag the edge to another node to connect them.',
        editEdgeDescription: 'Click on the control points and drag them to a node to connect to it.',
        createEdgeError: 'Cannot link edges to a cluster.',
        deleteClusterError: 'Clusters cannot be deleted.',
        editClusterError: 'Clusters cannot be edited.'
      }
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18

    如果想要重新定义你自己的语言环境,你可以更改'键'(示例是“en”),并修改该对象内部的‘value’(例如Edit“)。 这样你就可以得到你想要的locales

    编辑 (opens new window)
    上次更新: 2020/06/10, 10:06:00
    vis-network 模块系统
    vis-network Methods(方法)

    ← vis-network 模块系统 vis-network Methods(方法) →

    最近更新
    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
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式