Graph layout and routing for JavaScript
npm install auto-layoutershell
npm install auto-layouter
`
- ES Module
`JavaScript
import * as al from 'auto-layouter'
`
- CommonJS
`JavaScript
const al = require('auto-layouter/dist/auto-layouter.cjs')
`
- Browser
`HTML
`
使用
示例：
`JavaScript
import { layered, chebyshev} from 'auto-layouter'
const graph = {
nodes: [
{id: 'A', width: 100, height: 40},
{id: 'B', width: 100, height: 40},
{id: 'C', width: 100, height: 40},
{id: 'D', width: 100, height: 40}
],
edges: [
{v: 'A', w: 'B'},
{v: 'A', w: 'C'},
{v: 'B', w: 'D'},
{v: 'C', w: 'D'},
]
}
// 分层布局
layered(graph)
const from = {
x: graph.nodes[0].x + graph.nodes[0].width,
y: graph.nodes[0].y + graph.nodes[0].height / 2,
direction: 'right'
}
const to = {
x: graph.nodes[1].x,
y: graph.nodes[1].y + graph.nodes[1].height / 2,
direction: 'left'
}
// 布线算法
const points = chebyshev(from, to, graph.nodes)
`
API
$3
- layered(graph, [option])
分层布局算法。直接使用dagrejs实现。
传入graph之后，将会把节点的位置信息(即x和y)直接赋给graph.nodes中的每个元素。
参数:
名称| 类型 | 描述
--|--|--
graph | Object | 图的数据，包含顶点和边
option | Object | 与dagre中的graph配置信息一直
graph的数据结构为:
`TypeScript
type graph = {
nodes: Array<{
id: string, // 节点唯一id
width: number,
height: number
}>,
edges: Array<{
v: string, // 起点
w: string // 终点
}>
}
`
$3
- orthogonal(from, to, [option])
基于正交线的算法。根据起点和终点的方向求出一个或者两个正交线，此算法不会避开障碍。
- 参数：
名称| 类型 | 描述
--|--|--
from | Point | 起点
to | Point | 终点
option | Object| 配置信息
- 点的数据结构：
`TypeScript
type Point = {
x: number,
y: number,
direction: enum // 点的方向，可选值为 up|right|down|left|mid, 其中起点方向不能为mid
}
`
- option可选值：
名称| 类型 | 默认值 | 描述 |
--|--|-- | --
extensionCord | number | 10 | 点的延长线
- 返回值：
Array, 从起点到终点的所有控制点集合。
- manhattan(from, to, boxes, [option])
基于曼哈顿距离的算法。采用A*搜索算法(A-star search algorithm)实现。其中启发式函数就是曼哈顿距离(Manhattan distance), 即，路径的搜索方向为上下左右四个方向。
- 参数：
名称| 类型 | 描述
--|--|--
from | Point | 起点
to | Point | 终点
boxes | Array | 网格地图上的障碍物
option | Object| 配置信息
- boxes中的元素的数据结构
`TypeScript
type Box = {
x: number,
y: number,
width: number,
height: number
}
`
- option可选值：
名称| 类型 | 默认值 | 描述 |
--|--|-- | --
step | number | 10 | 搜索的步进长度
- 返回值：
Array