0.2.10 • Published 4 months ago

ch-skyfnetwork v0.2.10

Weekly downloads
-
License
ISC
Repository
-
Last release
4 months ago

多维系统中布局算法(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类布局函数丢失问题

d3force
0.2.10

4 months ago