JointJS实现节点自动布局

以你之姓@ 2022-10-12 15:52 342阅读 0赞

[官方文档节点布局][Link 1]

使用场景：当我们有一组数据，我们想把这组数据通过 JointJS 的节点和连线等元素给绘制出来的话，如果我们手动设置 绘制元素的位置的话，就很麻烦，JointJS 为我们提供了这样的 API

## 在Vue 中使用： ##

### 安装 `dagre` 和 `graphlib` 依赖 ###

npm install jointjs
    npm install dagre
    npm install @dagrejs/graphlib

### 引入依赖 ###

// import * as joint from 'jointjs' 或者只引入需要的部分
    import { dia, layout, shapes} from 'jointjs'
    import dagre from 'dagre'
    import graphlib from '@dagrejs/graphlib'

### 使用 ###

const canvasRect = this.$refs.canvas.getClientRects()[0]
    this.graph = new dia.Graph()
    this.paper = new dia.Paper({ 
      el: this.$refs.canvas,
      model: this.graph,
      width: canvasRect.width,
      height: canvasRect.height,
      gridSize: 1
    })
     
    
    let rect = new shapes.standard.Rectangle()
    rect.addTo(this_.graph)
     
    //注意：这个要放在生成节点之后的位置，否则不会生效
    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
    })

[Link 1]: https://resources.jointjs.com/docs/jointjs/v3.3/joint.html#layout

发表评论取消回复

表情：

评论列表（有 0 条评论，342人围观）

还没有评论，来说两句吧...

相关阅读

相关 el-tree：实现父节点自动关联选中、子节点自动关联取消选中功能

element plus的Tree 树形控件提供了一种显示层级关系记录的可视化方案，比如权限记录、组织架构记录等，大大优化了数据显示效果、提升客户感知度。但原生的Tree控件却

系统管理员/ 2024年03月17日 22:19/ 0 赞/ 82 阅读

相关 JointJS：JavaScript 流程图绘制框架

目录 JointJS：JavaScript 流程图绘制框架 JointJS 简介 JointJS Hello world

深藏阁楼爱情的钟/ 2023年06月02日 15:56/ 0 赞/ 78 阅读

相关结合给定数据使用JointJS自动绘制元素

我们给定一串数据，然后结合数据用 JointJS 在画布中绘制出元素 data.js export default [{ id: 1, t

向右看齐/ 2022年10月12日 15:53/ 0 赞/ 70 阅读

相关 JointJS实现节点自动布局

[官方文档节点布局][Link 1] 使用场景：当我们有一组数据，我们想把这组数据通过 JointJS 的节点和连线等元素给绘制出来的话，如果我们手动设置绘制元素的位置的话

以你之姓@/ 2022年10月12日 15:52/ 0 赞/ 343 阅读

相关 JointJS与vue集成初体验

将 JointJS 添加到 Vue 项目中安装需要的包 npm 方式 npm install jointjs yarn 方式 yarn ad

清疚/ 2022年10月12日 14:59/ 0 赞/ 188 阅读

相关 storyboard的自动布局

原文链接：[http://justsee.iteye.com/blog/2148987][http_justsee.iteye.com_blog_2148987] 通用

忘是亡心i/ 2022年08月20日 07:16/ 0 赞/ 259 阅读

相关 Auto Layout界面自动布局 (Interface Builder布局)

添加自动布局约束（下文简称约束）有以下三种方式：使用Xcode的Interface Builder界面设计器添加并设置约束通过代码逐条添加约束通过可视

深碍√TFBOYSˉ_/ 2022年08月08日 21:29/ 0 赞/ 177 阅读

相关 vue flex 布局实现div均分自动换行

vue flex 布局实现div均分自动换行许久没有更新了，今天才意外发现以前还是没有看懂

刺骨的言语ヽ痛彻心扉/ 2022年03月29日 13:58/ 0 赞/ 534 阅读

相关自动布局之-NSLayoutConstraint

AutoLayout概念是苹果自iOS6开始引入的概念。目前为止，实现自动布局技术选型方面也可以使用xib和storyboard。在开发过程中通常登录、注册等变动可能性较小

男娘i/ 2022年03月22日 10:42/ 0 赞/ 257 阅读

相关在JointJS元素中使用html

问题背景 > 在工作中有个需求需要画一幅“树图”，本想使用echarts进行绘制的。奈何echarts的label中不支持formatter html，即[html文本的

柔光的暖阳◎/ 2022年03月22日 06:26/ 0 赞/ 235 阅读