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 layout(布局)

充当canvas上的摄像机,进行动画、缩放和对焦。

布局的配置项必须包含在名为“layout”的对象中。

注意

警告:当启用层次布局时,该布局会覆盖一些其它配置项。 物理模拟被设置为层排斥、动态光滑边缘转换为静态光滑边缘。

# 完整配置项预览

var options = {
  layout: {
    randomSeed: undefined,
    improvedLayout: true,
    clusterThreshold: 150,
    hierarchical: {
      enabled: false,
      levelSeparation: 150,
      nodeSpacing: 100,
      treeSpacing: 200,
      blockShifting: true,
      edgeMinimization: true,
      parentCentralization: true,
      direction: 'UD',        // UD, DU, LR, RL
      sortMethod: 'hubsize',  // hubsize, directed
      shakeTowards: 'leaves'  // roots, leaves
    }
  }
}

network.setOptions(options);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 配置项详情

名字 类型 默认 说明
randomSeed Number undefined 当不使用层次布局时,初始渲染时节点位置是随机的。这意味着每次渲染得到的布局均不相同。
如果该配置项的值为一个确定的布局‘’种子''时,那么每次渲染后得到的布局都将相同(都为这个‘’种子‘’)。
可以使用network实例的getseed()方法获取这个布局‘’种子‘’。
improvedLayout Boolean true 为true,关系图将使用‘’Kamada Kawai‘’算法进行初始布局渲染。
对于大于100个节点的关系图,将自动执行‘’集群‘’以减少初次渲染的节点数量。提高渲染性能减少稳定时间。如果关系图节点或边连接十分紧密(没有或只有几个叶节点),这种方式可能不起作用,关系图将使用旧方法渲染。
clusterThreshold Number 150 improvedLayout阈值。''集群''阈值。
hierarchical Object or Boolean Object 如果为true,布局引擎将使用默认设置以分层方式放置节点(层次布局)。可提供 hierarchical对象以自定义。
hierarchical.
    enabled
Boolean false 为true则为层次布局。如果为undefined,但定义了hierarchical对象中的任何属性,则将其设置为true。
hierarchical.
    levelSeparation
Number 150 不同层之间的距离
hierarchical.
    nodeSpacing
Number 100 节点之间的最小距离。这仅用于初始布局。如果启用物理模拟,这里的节点距离就是有效节点距离。
hierarchical.
    treeSpacing
Number 200 不同树之间的距离(独立关系图实例)。这仅用于初始布局。如果启用物理模拟,在排斥模型中为树之间的距离。
hierarchical.
    blockShifting
Boolean true 减少canvas中空白的方法。 可单独使用,也可与边最小化(edgeMinimization)配合使用。
每个节点都将检查空白,并将其和其分支(子层)尽可能远地移动,并在各层级中均遵守nodeSpacing。 这主要用于初始布局。
如果启用物理模拟,则布局将由物理模拟确定。 不过,这将大大加快稳定时间!
hierarchical.
    edgeMinimization
Boolean true 减少canvas中空白的方法。 可单独使用,也可与块移位(blockShifting)配合使用。 启用此项一般情况下会加快布局过程。
每个节点将尝试沿着自由轴移动,以减少其边的总长度。 这主要用于初始布局。
如果启用物理模拟,布局将由物理模拟决定。不过,这将大大加快稳定时间!
hierarchical.
    parentCentralization
Boolean true 如果为true,则布局算法完成后,父节点将再次居中。
hierarchical.
    direction
String 'UD' 层次结构的方向。可用选项包括: up-down, down-up, left-right, right-left。可简写为UD,DU,LR,RL。
hierarchical.
    sortMethod
String 'hubsize' 指定确定节点层级的算法。可选: hubsize, directed。
hubsize 将边最多的节点放在顶部。 由此计算层次布局的其余部分。
directed根据边的“to”和“from”数据计算层级。A->B,因此B低于A的层级。
hierarchical.
   shakeTowards
String 'roots' 控制在directed布局中:
所有的根节点是否应该排列在顶部,它们的子节点应该尽可能靠近它们的根(roots) 。
还是所有的叶子节点排列在底部,它们的父节点应该尽可能靠近它们的子叶子节点(leaves)。
编辑 (opens new window)
上次更新: 2020/06/08, 17:06:00
vis-network groups(组)
vis-network interaction(交互)

← vis-network groups(组) vis-network interaction(交互) →

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