可視化圖佈局算法淺析
前言
圖算法在前端領域考察的較少，通常除非是要寫框架或者打包工具對依賴關係處理（DAG）會用到，前端對圖算法的考察通常是比較少的，而對於可視化領域而言，圖又是必不可少的一種展現方式，其中對於邊和節點的展現佈局方案結合美學效果會有不一樣的算法實現，本文旨在介紹一些常見的通用佈局算法，其中的每一個小的佈局方案也會有不一樣的分支實現前端
分類
| 簡寫 | 算法名稱 | 分類 | 備註 |
|---|---|---|---|
| grid | 網格佈局算法 | 幾何佈局 | |
| circle | 環形佈局算法 | 幾何佈局 | |
| concentric | 同心圓佈局算法 | 幾何佈局 | |
| radial | 輻射狀佈局算法 | 幾何佈局 | |
| avsdf | 鄰接點最小度優先算法（Adjacent Vertex with Smallest Degree First） | 幾何佈局 | |
| dagre | 有向無環圖樹佈局算法（Directed Acyclic Graph and Trees） | 層級佈局 | |
| breadthfirst | 廣度優先佈局算法 | 層級佈局 | |
| elk | Eclipse佈局算法（Eclipse Layout Kernel） | 層級佈局 | |
| klay | K層佈局算法（K Lay） | 層級佈局 | |
| fcose | 最快複合彈簧內置佈局算法（Fast Compound Spring Embedder） | 力導佈局 | |
| cola | 約束佈局（Constraint-based Layout） | 力導佈局 | |
| cise | 環形彈簧內置佈局算法（Circular Spring Embedder） | 力導佈局 | |
| elk2 | Eclipse佈局算法（Eclipse Layout Kernel） | 力導佈局 | |
| euler | 歐拉布局算法 | 力導佈局 | |
| spread | 擴展布局算法 | 力導佈局 | |
| fruchterman | Fruchterman-Reingold佈局算法 | 力導佈局 | |
| combo | 混合佈局算法 | 力導佈局 | |
| mds | 高維數據降維佈局算法（Multi Dimensional Scaling） | 其餘佈局算法 | |
| random | 隨機佈局算法 | 其餘佈局 | |
常見算法
Fruchterman-Reingold佈局算法
Fruchterman-Reingold算法屬於力導佈局的一種，其本質是將以前Eades的布點算法中的基於胡克定律模型進行了改進，使用了庫倫斥力而且聚焦在最近相鄰節點之間的能量模型，利用模擬退火等優化策略，結合美學標準對總體進行減小線交叉及總體均勻佈局，其僞碼描述以下圖：node
對於更加細節的關於FR算法的推到，能夠參看這篇論文Graph Drawing by Force-directed Placement；接下來，咱們來看一下前端可視化領域的一些具體實現，咱們結合Antv G6中的源碼看一下實現思路：git
/**
* Antv的layout是專門發佈了一個npm包 源碼地址：https://github.com/antvis/layout
* FR算法目錄位置 https://github.com/antvis/layout/blob/master/src/layout/fruchterman.ts
*/
import {
OutNode,
Edge,
PointTuple,
IndexMap,
Point,
FruchtermanLayoutOptions
} from "./types";
import { Base } from "./base";
import { isNumber } from "../util";
type NodeMap = {
[key: string]: INode;
};
type INode = OutNode & {
cluster: string;
};
const SPEED_DIVISOR = 800;
/**
* fruchterman 佈局
*/
export class FruchtermanLayout extends Base {
/** 佈局中心 */
public center: PointTuple;
/** 中止迭代的最大迭代數 */
public maxIteration: number = 1000;
/** 重力大小，影響圖的緊湊程度 */
public gravity: number = 10;
/** 速度 */
public speed: number = 1;
/** 是否產生聚類力 */
public clustering: boolean = false;
/** 聚類力大小 */
public clusterGravity: number = 10;
public nodes: INode[] = [];
public edges: Edge[] = [];
public width: number = 300;
public height: number = 300;
public nodeMap: NodeMap = {};
public nodeIdxMap: IndexMap = {};
/** 迭代結束的回調函數 */
public onLayoutEnd: () => void = () => {};
constructor(options?: FruchtermanLayoutOptions) {
super();
this.updateCfg(options);
}
public getDefaultCfg() {
return {
maxIteration: 1000,
gravity: 10,
speed: 1,
clustering: false,
clusterGravity: 10
};
}
/**
* 執行佈局
*/
public execute() {
const self = this;
const nodes = self.nodes;
if (!nodes || nodes.length === 0) {
if (self.onLayoutEnd) self.onLayoutEnd();
return;
}
if (!self.width && typeof window !== "undefined") {
self.width = window.innerWidth;
}
if (!self.height && typeof window !== "undefined") {
self.height = window.innerHeight;
}
if (!self.center) {
self.center = [self.width / 2, self.height / 2];
}
const center = self.center;
if (nodes.length === 1) {
nodes[0].x = center[0];
nodes[0].y = center[1];
if (self.onLayoutEnd) self.onLayoutEnd();
return;
}
const nodeMap: NodeMap = {};
const nodeIdxMap: IndexMap = {};
nodes.forEach((node, i) => {
if (!isNumber(node.x)) node.x = Math.random() * this.width;
if (!isNumber(node.y)) node.y = Math.random() * this.height;
nodeMap[node.id] = node;
nodeIdxMap[node.id] = i;
});
self.nodeMap = nodeMap;
self.nodeIdxMap = nodeIdxMap;
// layout
return self.run();
}
public run() {
const self = this;
const nodes = self.nodes;
const edges = self.edges;
const maxIteration = self.maxIteration;
const center = self.center;
const area = self.height * self.width;
const maxDisplace = Math.sqrt(area) / 10;
const k2 = area / (nodes.length + 1);
const k = Math.sqrt(k2);
const gravity = self.gravity;
const speed = self.speed;
const clustering = self.clustering;
const clusterMap: {
[key: string]: {
name: string | number;
cx: number;
cy: number;
count: number;
};
} = {};
if (clustering) {
nodes.forEach(n => {
if (clusterMap[n.cluster] === undefined) {
const cluster = {
name: n.cluster,
cx: 0,
cy: 0,
count: 0
};
clusterMap[n.cluster] = cluster;
}
const c = clusterMap[n.cluster];
if (isNumber(n.x)) {
c.cx += n.x;
}
if (isNumber(n.y)) {
c.cy += n.y;
}
c.count++;
});
for (const key in clusterMap) {
clusterMap[key].cx /= clusterMap[key].count;
clusterMap[key].cy /= clusterMap[key].count;
}
}
for (let i = 0; i < maxIteration; i++) {
const displacements: Point[] = [];
nodes.forEach((_, j) => {
displacements[j] = { x: 0, y: 0 };
});
self.applyCalculate(nodes, edges, displacements, k, k2);
// gravity for clusters
if (clustering) {
const clusterGravity = self.clusterGravity || gravity;
nodes.forEach((n, j) => {
if (!isNumber(n.x) || !isNumber(n.y)) return;
const c = clusterMap[n.cluster];
const distLength = Math.sqrt(
(n.x - c.cx) * (n.x - c.cx) + (n.y - c.cy) * (n.y - c.cy)
);
const gravityForce = k * clusterGravity;
displacements[j].x -= (gravityForce * (n.x - c.cx)) / distLength;
displacements[j].y -= (gravityForce * (n.y - c.cy)) / distLength;
});
for (const key in clusterMap) {
clusterMap[key].cx = 0;
clusterMap[key].cy = 0;
clusterMap[key].count = 0;
}
nodes.forEach(n => {
const c = clusterMap[n.cluster];
if (isNumber(n.x)) {
c.cx += n.x;
}
if (isNumber(n.y)) {
c.cy += n.y;
}
c.count++;
});
for (const key in clusterMap) {
clusterMap[key].cx /= clusterMap[key].count;
clusterMap[key].cy /= clusterMap[key].count;
}
}
// gravity
nodes.forEach((n, j) => {
if (!isNumber(n.x) || !isNumber(n.y)) return;
const gravityForce = 0.01 * k * gravity;
displacements[j].x -= gravityForce * (n.x - center[0]);
displacements[j].y -= gravityForce * (n.y - center[1]);
});
// move
nodes.forEach((n, j) => {
if (!isNumber(n.x) || !isNumber(n.y)) return;
const distLength = Math.sqrt(
displacements[j].x * displacements[j].x +
displacements[j].y * displacements[j].y
);
if (distLength > 0) {
// && !n.isFixed()
const limitedDist = Math.min(
maxDisplace * (speed / SPEED_DIVISOR),
distLength
);
n.x += (displacements[j].x / distLength) * limitedDist;
n.y += (displacements[j].y / distLength) * limitedDist;
}
});
}
if (self.onLayoutEnd) self.onLayoutEnd();
return {
nodes,
edges
};
}
private applyCalculate(
nodes: INode[],
edges: Edge[],
displacements: Point[],
k: number,
k2: number
) {
const self = this;
self.calRepulsive(nodes, displacements, k2);
self.calAttractive(edges, displacements, k);
}
// 計算斥力
private calRepulsive(nodes: INode[], displacements: Point[], k2: number) {
nodes.forEach((v, i) => {
displacements[i] = { x: 0, y: 0 };
nodes.forEach((u, j) => {
if (i === j) {
return;
}
if (
!isNumber(v.x) ||
!isNumber(u.x) ||
!isNumber(v.y) ||
!isNumber(u.y)
)
return;
let vecX = v.x - u.x;
let vecY = v.y - u.y;
let vecLengthSqr = vecX * vecX + vecY * vecY;
if (vecLengthSqr === 0) {
vecLengthSqr = 1;
const sign = i > j ? 1 : -1;
vecX = 0.01 * sign;
vecY = 0.01 * sign;
}
// 核心計算項 C常數值
const common = k2 / vecLengthSqr;
displacements[i].x += vecX * common;
displacements[i].y += vecY * common;
});
});
}
// 計算引力
private calAttractive(edges: Edge[], displacements: Point[], k: number) {
edges.forEach(e => {
if (!e.source || !e.target) return;
const uIndex = this.nodeIdxMap[e.source];
const vIndex = this.nodeIdxMap[e.target];
if (uIndex === vIndex) {
return;
}
const u = this.nodeMap[e.source];
const v = this.nodeMap[e.target];
if (!isNumber(v.x) || !isNumber(u.x) || !isNumber(v.y) || !isNumber(u.y))
return;
const vecX = v.x - u.x;
const vecY = v.y - u.y;
const vecLength = Math.sqrt(vecX * vecX + vecY * vecY);
const common = (vecLength * vecLength) / k;
displacements[vIndex].x -= (vecX / vecLength) * common;
displacements[vIndex].y -= (vecY / vecLength) * common;
displacements[uIndex].x += (vecX / vecLength) * common;
displacements[uIndex].y += (vecY / vecLength) * common;
});
}
public getType() {
return "fruchterman";
}
}
Grid佈局算法
在dom中佈局，咱們最常想到的就是網格佈局，在最先的沒有div的時代，都是經過table進行佈局的，這裏圖的佈局也是最容易想到的一種佈局方式，雖然簡單，但咱們也能夠看一下對應的實現思路，咱們看一下在Cytoscape中的實現方案：github
// grid佈局目錄位置 https://github.com/cytoscape/cytoscape.js/blob/unstable/src/extensions/layout/grid.js
function GridLayout( options ){
this.options = util.extend( {}, defaults, options );
}
GridLayout.prototype.run = function(){
let params = this.options;
let options = params;
let cy = params.cy;
let eles = options.eles;
let nodes = eles.nodes().not( ':parent' );
if( options.sort ){
nodes = nodes.sort( options.sort );
}
let bb = math.makeBoundingBox( options.boundingBox ? options.boundingBox : {
x1: 0, y1: 0, w: cy.width(), h: cy.height()
} );
if( bb.h === 0 || bb.w === 0 ){
eles.nodes().layoutPositions( this, options, function( ele ){
return { x: bb.x1, y: bb.y1 };
} );
} else {
// width/height * splits^2 = cells where splits is number of times to split width
let cells = nodes.size();
let splits = Math.sqrt( cells * bb.h / bb.w );
let rows = Math.round( splits );
let cols = Math.round( bb.w / bb.h * splits );
let small = function( val ){
if( val == null ){
return Math.min( rows, cols );
} else {
let min = Math.min( rows, cols );
if( min == rows ){
rows = val;
} else {
cols = val;
}
}
};
let large = function( val ){
if( val == null ){
return Math.max( rows, cols );
} else {
let max = Math.max( rows, cols );
if( max == rows ){
rows = val;
} else {
cols = val;
}
}
};
let oRows = options.rows;
let oCols = options.cols != null ? options.cols : options.columns;
// if rows or columns were set in options, use those values
if( oRows != null && oCols != null ){
rows = oRows;
cols = oCols;
} else if( oRows != null && oCols == null ){
rows = oRows;
cols = Math.ceil( cells / rows );
} else if( oRows == null && oCols != null ){
cols = oCols;
rows = Math.ceil( cells / cols );
}
// otherwise use the automatic values and adjust accordingly
// if rounding was up, see if we can reduce rows or columns
else if( cols * rows > cells ){
let sm = small();
let lg = large();
// reducing the small side takes away the most cells, so try it first
if( (sm - 1) * lg >= cells ){
small( sm - 1 );
} else if( (lg - 1) * sm >= cells ){
large( lg - 1 );
}
} else {
// if rounding was too low, add rows or columns
while( cols * rows < cells ){
let sm = small();
let lg = large();
// try to add to larger side first (adds less in multiplication)
if( (lg + 1) * sm >= cells ){
large( lg + 1 );
} else {
small( sm + 1 );
}
}
}
let cellWidth = bb.w / cols;
let cellHeight = bb.h / rows;
if( options.condense ){
cellWidth = 0;
cellHeight = 0;
}
if( options.avoidOverlap ){
for( let i = 0; i < nodes.length; i++ ){
let node = nodes[ i ];
let pos = node._private.position;
if( pos.x == null || pos.y == null ){ // for bb
pos.x = 0;
pos.y = 0;
}
let nbb = node.layoutDimensions( options );
let p = options.avoidOverlapPadding;
let w = nbb.w + p;
let h = nbb.h + p;
cellWidth = Math.max( cellWidth, w );
cellHeight = Math.max( cellHeight, h );
}
}
let cellUsed = {}; // e.g. 'c-0-2' => true
let used = function( row, col ){
return cellUsed[ 'c-' + row + '-' + col ] ? true : false;
};
let use = function( row, col ){
cellUsed[ 'c-' + row + '-' + col ] = true;
};
// to keep track of current cell position
let row = 0;
let col = 0;
let moveToNextCell = function(){
col++;
if( col >= cols ){
col = 0;
row++;
}
};
// get a cache of all the manual positions
let id2manPos = {};
for( let i = 0; i < nodes.length; i++ ){
let node = nodes[ i ];
let rcPos = options.position( node );
if( rcPos && (rcPos.row !== undefined || rcPos.col !== undefined) ){ // must have at least row or col def'd
let pos = {
row: rcPos.row,
col: rcPos.col
};
if( pos.col === undefined ){ // find unused col
pos.col = 0;
while( used( pos.row, pos.col ) ){
pos.col++;
}
} else if( pos.row === undefined ){ // find unused row
pos.row = 0;
while( used( pos.row, pos.col ) ){
pos.row++;
}
}
id2manPos[ node.id() ] = pos;
use( pos.row, pos.col );
}
}
let getPos = function( element, i ){
let x, y;
if( element.locked() || element.isParent() ){
return false;
}
// see if we have a manual position set
let rcPos = id2manPos[ element.id() ];
if( rcPos ){
x = rcPos.col * cellWidth + cellWidth / 2 + bb.x1;
y = rcPos.row * cellHeight + cellHeight / 2 + bb.y1;
} else { // otherwise set automatically
while( used( row, col ) ){
moveToNextCell();
}
x = col * cellWidth + cellWidth / 2 + bb.x1;
y = row * cellHeight + cellHeight / 2 + bb.y1;
use( row, col );
moveToNextCell();
}
return { x: x, y: y };
};
nodes.layoutPositions( this, options, getPos );
}
return this; // chaining
};
export default GridLayout;
MDS算法
MDS是Multidimensional Scaling的簡稱，即爲高維數據降維算法，其是一種力導算法高維數據下的穩定下佈局的優化，避免數據超載而致使的總體的佈局不穩定，上圖中方程式通過數學推導化簡後（ps：對於具體推導感興趣的同窗能夠看這篇文章圖佈局算法之Stress Majorization），其僞碼描述以下：算法
接下來，咱們來看一下前端的具體實現，來看一下Antv G6中的實現方案：npm
/**
* Antv的layout是專門發佈了一個npm包 源碼地址：https://github.com/antvis/layout
* MDS算法目錄位置 https://github.com/antvis/layout/blob/master/src/layout/mds.ts
*/
// ml-matrix是機器學習相關的一些矩陣操做
import { Matrix as MLMatrix, SingularValueDecomposition } from "ml-matrix";
import { PointTuple, OutNode, Edge, Matrix, MDSLayoutOptions } from "./types";
import { floydWarshall, getAdjMatrix, scaleMatrix } from "../util";
import { Base } from "./base";
/**
* mds 佈局
*/
export class MDSLayout extends Base {
/** 佈局中心 */
public center: PointTuple = [0, 0];
/** 邊長度 */
public linkDistance: number = 50;
private scaledDistances: Matrix[];
public nodes: OutNode[] = [];
public edges: Edge[] = [];
/** 迭代結束的回調函數 */
public onLayoutEnd: () => void = () => {};
constructor(options?: MDSLayoutOptions) {
super();
this.updateCfg(options);
}
public getDefaultCfg() {
return {
center: [0, 0],
linkDistance: 50
};
}
/**
* 執行佈局
*/
public execute() {
const self = this;
const { nodes, edges = [] } = self;
const center = self.center;
if (!nodes || nodes.length === 0) {
if (self.onLayoutEnd) self.onLayoutEnd();
return;
}
if (nodes.length === 1) {
nodes[0].x = center[0];
nodes[0].y = center[1];
if (self.onLayoutEnd) self.onLayoutEnd();
return;
}
const linkDistance = self.linkDistance;
// the graph-theoretic distance (shortest path distance) matrix
const adjMatrix = getAdjMatrix({ nodes, edges }, false);
const distances = floydWarshall(adjMatrix);
self.handleInfinity(distances);
// scale the ideal edge length acoording to linkDistance
const scaledD = scaleMatrix(distances, linkDistance);
self.scaledDistances = scaledD;
// get positions by MDS
const positions = self.runMDS();
self.positions = positions;
positions.forEach((p: number[], i: number) => {
nodes[i].x = p[0] + center[0];
nodes[i].y = p[1] + center[1];
});
if (self.onLayoutEnd) self.onLayoutEnd();
return {
nodes,
edges
};
}
/**
* mds 算法
* @return {array} positions 計算後的節點位置數組
*/
public runMDS(): PointTuple[] {
const self = this;
const dimension = 2;
const distances = self.scaledDistances;
// square distances
const M = MLMatrix.mul(MLMatrix.pow(distances, 2), -0.5);
// double centre the rows/columns
const rowMeans = M.mean("row");
const colMeans = M.mean("column");
const totalMean = M.mean();
M.add(totalMean)
.subRowVector(rowMeans)
.subColumnVector(colMeans);
// take the SVD of the double centred matrix, and return the
// points from it
const ret = new SingularValueDecomposition(M);
const eigenValues = MLMatrix.sqrt(ret.diagonalMatrix).diagonal();
return ret.leftSingularVectors.toJSON().map((row: number[]) => {
return MLMatrix.mul([row], [eigenValues])
.toJSON()[0]
.splice(0, dimension) as PointTuple;
});
}
public handleInfinity(distances: Matrix[]) {
let maxDistance = -999999;
distances.forEach(row => {
row.forEach(value => {
if (value === Infinity) {
return;
}
if (maxDistance < value) {
maxDistance = value;
}
});
});
distances.forEach((row, i) => {
row.forEach((value, j) => {
if (value === Infinity) {
distances[i][j] = maxDistance;
}
});
});
}
public getType() {
return "mds";
}
}
總結
可視化圖佈局是可視化領域一個比較精深的方向，其設計了美學理念、機器學習、數據分析等相關知識，對於智能佈局預測，能夠結合機器學習等人工智能方法進行處理，業界常見的好比對於OpenOrd的一些大規模圖佈局的邊切優化等，具體感興趣的同窗能夠參看這篇文章OpenOrd-面向大規模圖佈局的開源算法-研讀；對於前端智能化與可視化結合的方面，能夠將tensorflow與可視化圖佈局進行拓展，具體能夠看一下G6的圖佈局預測方案G6 智能佈局預測，其大概實現思路是藉助tensorflow，對於卷積層和池化層的處理以及相關操做。綜上，可視化圖佈局領域的拓展結合了前端智能化與前端數據可視化兩大前端方向，因而可知，前端的七大發展方向並不是是割裂開來的，他們之間相互影響、相互借鑑，對於交叉領域深刻研究或許能有不一樣的啓發！數組
參考
- Using layouts
- G6-圖佈局
- G6 智能佈局預測
- antv/vis-predict-engine源碼
- 圖可視化之圖佈局
- OpenOrd-面向大規模圖佈局的開源算法-研讀
- 全棧之計算機基礎系列 - 圖佈局算法與可視化
- 圖可視化之圖佈局
- P問題、NP問題、NP徹底問題和NP難問題
- 圖佈局算法之Stress Majorization
- 關係網絡圖(分析&可視化)的13個JavaScript庫
- Graph Drawing by Force-directed Placement
- 深度學習 --- 模擬退火算法詳解（Simulated Annealing， SA）
- TensorFlow學習（十七）：高級API之tf.layers
相關文章
- 1. 可視化圖佈局算法簡介
- 2. 圖形算法可視化
- 3. Vue-Layout（可視化佈局）
- 4. CBoard 圖表佈局淺析
- 5. 可視化不確定網絡的概率圖佈局方法
- 6. 算法可視化
- 7. ConstraintLayout優化佈局-上-Android可視化界面佈局
- 8. 視圖佈局
- 9. 瀑布流佈局淺析
- 10. 在線可視化佈局HTML
- 更多相關文章...
- • SQLite 視圖（View） - SQLite教程
- • SQL 視圖（Views） - SQL 教程
- • Git可視化極簡易教程 — Git GUI使用方法
- • 算法總結-廣度優先算法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 可視化圖佈局算法簡介
- 2. 圖形算法可視化
- 3. Vue-Layout（可視化佈局）
- 4. CBoard 圖表佈局淺析
- 5. 可視化不確定網絡的概率圖佈局方法
- 6. 算法可視化
- 7. ConstraintLayout優化佈局-上-Android可視化界面佈局
- 8. 視圖佈局
- 9. 瀑布流佈局淺析
- 10. 在線可視化佈局HTML