JOINTJs笔记-5 实现节点的自动布局

文档传送门 - https://resources.jointjs.com/docs/jointjs/v3.2/joint.html#layout

我是使用的vue，所以，

第一步：先安装 Dagre and Graphlib 依赖

npm install dagre 

npm install @dagrejs/graphlib

第二步：引入

import dagre from 'dagre';

import graphlib from 'graphlib';

import * as joint from 'jointjs';

第三步：使用

this.graph = new joint.dia.Graph;

this.paper = new joint.dia.Paper({

　　el: document.getElementById('model'),

　　model: this.graph,

　　width: "100%",

　　height: 500,

　　gridSize: 1,

});

 

//注意：这个要放在生成节点之后的位置，否则不会生效

例如

var rect = new joint.shapes.standard.Rectangle();

rect.addTo(this_.graph);

 

joint.layout.DirectedGraph.layout(this.graph, {

　　dagre: dagre,

　　graphlib: graphlib,

　　setLinkVertices: false,

　　rankDir: "TB", //节点方向 有几个选项 "TB" (top-to-bottom) / "BT" (bottom-to-top) / "LR" (left-to-right) / "RL" (right-to-left)

　　align:"UL",

　　rankSep: 150, //节点方向 有几个选项 TB / BT / RL / LR

　　marginX: 100,

　　marginY: 200,

　　nodeSep: 80,

　　edgeSep: 50

});