多维系统中布局算法(SkyFNetwork)

安装

cnpm install --save ch-skyfnetwork

使用

import { ForestCircularLayouts, ForestLine, ForestLineCover，ForestMatrix, ForestMatrixCrosswise, UnionFindSet } from 'ch-skyfnetwork'

导出类包括（可以有选择导出使用到的布局类）

• ForestCircularLayouts：环形布局,充分利用屏幕空间，可以链式调用
• ForestLine：有优化的树布局，消除部分同层次遮挡问题，但是可能会出现比较异常问题，可以链式调用
• ForestLineCover: 没有优化的树布局，可能存在同层遮挡问题(算法适应能力强)，可以链式调用
• ForestMatrix: 块状纵向树，可以链式调用
• ForestMatrixCrosswise: 块状横向树，可以链式调用
• UnionFindSet: 根据节点连同性，划分森林个数 (必引入类，布局的基础)

布局算法 输入数据格式

1 如果links数组中source和target是索引，该索引代表节点在nodes数组中下标， nodes数组中的每个对象都必须有identify属性

const data = {
	"nodes": [
	  {"identify": "Alice",...},
	  {"identify": "Bob",...},
	  {"identify": "Carol",...},
      ...
	  ],
	 "links": [
	  {"source": 0, "target": 1}, // Alice → Bob
	  {"source": 1, "target": 2}, // Bob → Carol
      ...
	 ]
}

2 如果links数组中source和target都是对象，该对象必须有identify属性，nodes数组中的每个对象都必须有identify属性

const data = {
	"nodes": [
	  {"identify": "Alice",...},
	  {"identify": "Bob",...},
	  {"identify": "Carol",...}
      ...
	  ],
	 "links": [
	  {"source": {"identify": "Alice",...}, "target": {"identify": "Bob",...}}, // Alice → Bob
	  {"source": {"identify": "Bob",...}, "target":  {"identify": "Carol",...}}, // Bob → Carol
      ...
	 ]
}

如果原始数据不符合上述需求，需要转化成上述的一种数据输入结构即可

如果原始数据如下不符合上述任一种类型，举例：采用第一种方法转化

const data = {
	"nodes": [
	  {"id": "Alice",...},
	  {"id": "Bob",...},
	  {"id": "Carol",...},
      ...
	  ],
	 "links": [
	  {"source": 0, "target": 1}, // Alice → Bob
	  {"source": 1, "target": 2}, // Bob → Carol
      ...
	 ]
}

const _graphData = {
    nodes: data.nodes.map(node => ({ identify: node.id })),
    links: data.links.map((link, index) => {
	      return {
		    identify: link.source + link.target ,
		    source:  link.source,
		    target:  link.target
          }
  })
}

布局算法 输出数据格式

执行main函数之后，返回当前类对象，通过类对象访问布局之后的nodes和links

树布局APIS

ForestLine布局类使用方法

• const unionFindSet = new UnionFindSet(data) // 原始数据预处理
  • data 待布局的数据
• unionFindSet.main() // 根据节点连同性，划分森林
• unionFindSet.connectedComp // 得到连通信息
• const tree = new ForestLine(data,width,height)
  • data：Object对象,待布局的数据以及连通性信息
    • nodes[必填]： 待布局的nodes数据
    • links[必填]： 待布局的links数据
    • connectedComp[必填]：待布局数据的连通性信息，unionFindSet.connectedComp得到
  • width[必填]: 默认画布的宽度
  • height[必填]: 默认画布的高度
• tree.setParams (params)
  • params：Object对象，设置参数 根据需要设置相关的参数
    • childStep: 15, // 同一棵树同层次节点之间的距离
    • levelStep: 100, // 同一棵树内层次之间的距离 如果为0,会自动计算,建议设置
    • treeStep: 100, // 树与树之间的距离
    • isShowLinkType: true // 是否获取节点类型信息
• tree.main(style=0)
  • style
  • 0 是横向布局 1 是纵向 默认是 0
• const nodes = tree.nodes // 获取布局之后的nodes
• const links = tree.links // 获取布局之后的links

ForestLineCover布局类使用方法

• 使用方法同ForestLine布局类

ForestMatrix布局类使用方法

• const unionFindSet = new UnionFindSet(data) // 原始数据预处理

  • data 待布局的数据

• unionFindSet.main() // 根据节点连同性，划分森林

• unionFindSet.connectedComp // 得到连通信息

• const tree = new ForestMatrix(data,width,height)

  • data：Object对象,待布局的数据以及连通性信息
    • nodes[必填]： 待布局的nodes数据
    • links[必填]： 待布局的links数据
    • connectedComp[必填]：待布局数据的连通性信息，unionFindSet.connectedComp得到
  • width[必填]: 默认画布的宽度
  • height[必填]: 默认画布的高度

• tree.setParams (params) // 设置参数

  • params：Object对象，设置参数 根据需要设置相关的参数
    • childStep: 15, // 同一棵树同层次节点之间的距离
    • levelStep: 100, // 同一棵树内层次之间的距离 如果为0,会自动计算,建议设置
    • treeStep: 100, // 树与树之间的距离
    • matrixLength: 20, // matrix中最大节点数
    • matrixBox: 0, // matrix中节点box距离
    • isShowLinkType: true // 是否获取节点类型信息，默认是true

• tree.main(style=0)

  • style
  • 0代表横向布局 1代表纵向 默认是 0

• const nodes = tree.nodes // 获取布局之后的nodes

• const links = tree.links // 获取布局之后的links

ForestMatrixCrosswise布局类使用方法

• 使用方法同ForestMatrix布局类

环形布局APIS

ForestCircularLayouts布局类使用方法

• const circular = new CircularAllLayout(data,width,height) 参数配置 - data[必填]: Object对象,待布局的数据 - nodes[必填]： 待布局的nodes数据 - links[必填]： 待布局的links数据 - width[必填]: 默认画布的宽度 - height[必填]: 默认画布的高度

• circular.setParams(options) 设置布局参数

  • options
    • nodeRadius: 7.5, // 默认节点半径
    • layerDistance: 30,// 层与层之间的距离
    • firstSpaceRadius: 30, // 空白圆的半径
    • treeLayout: 0, // 树与树之前的关系
    • isMerge: true // 当最外层节点 没有放满 是否合并到 倒数第二个环内 默认合并

• circular.main(style=0)

  • style
  • 0 是横向布局 1 是纵向 （针对多个环而已） 默认是 0

• const nodes = circular.nodes // 获取布局之后的nodes

• const links = circular.links // 获取布局之后的links

综合实例

  let mode = 'circle' // 圆形
  let width = 100
  let height = 100
  let skyEyeSimulation = null
  let result = null
  const _graphData // 上面有定义

  switch (mode) {
    case 'circle':
      skyEyeSimulation = new ForestCircularLayouts(_graphData, width, height)
      skyEyeSimulation.setParams({
	    nodeRadius: 7.5, // 默认节点半径
	    layerDistance: 30, // 层与层之间的距离
	    firstSpaceRadius: 30, // 空白圆的半径
	    treeLayout: 30, // 树与树之前的关系
	    isMerge: true  // 当最外层节点 没有放满 是否合并到 倒数第二个环内 默认合并
      })
      result = skyEyeSimulation.main(0)
      break
    case 'tree':
      const unionFindSet = new UnionFindSet(_graphData)
      unionFindSet.main()
      skyEyeSimulation = new ForestLine({
	    nodes: _graphData.nodes,
	    links: _graphData.links,
	    connectedComp: unionFindSet.connectedComp
      }, width, height)
    
      skyEyeSimulation.setParams({
	    childStep: 15, //  同一棵树同层次节点之间的距离
	    levelStep: 100, // 同一棵树内层次之间的距离 如果为0,会自动计算,建议设置
	    treeStep: 100, // 树与树之间的距离
	    isShowLinkType: true // 是否获取节点类型信息
      })
    result = skyEyeSimulation.main(1) // 树根点在视图上方
  }
  if (result) {
   let nodes = result.nodes // 布局之后的nodes数据
   let links = result.links // 布局之后的links数据
   // 防止计算布局时意外修改了节点的其他属性，只使用坐标值，有可能布局算法增加一些额外的属性
   ...
  }

修正新增ForestLineCover类布局函数丢失问题