在最近的项目中,由于表的数据太多,绘制出来的E-R图很乱:所有的表会连续排在一起,有关联的两张表中间可能横着很多张没有关联的表,因此有关联的表之间的关系就会看得很不明了。
这里我用这个方法解决这个问题:把layout设置为ForceDirectedLayout(力导向布局)。这样,有关联关系的表展示在一边,没关联关系的表整齐的排在另一边。修改步骤如下:
首先,在定义画布时,定义一个ForceDirectedLayout布局。
$(go.Diagram, this.title,
{
initialContentAlignment: go.Spot.Center,
'undoManager.isEnabled': true,
// 不允许使用delete键删除节点
'commandHandler.deletesTree': true,
'grid.visible': false, // 画布上面是否出现网格
scale: 0.7,
layout: $(go.ForceDirectedLayout, {
defaultSpringLength: 50,
defaultElectricalCharge: 20
})
})
然后,在定义Link时设置节点不交叉。
$(go.Link,
{
routing: go.Link.Orthogonal,
corner: 0,
layerName: 'Background' // 不要在任何节点前面交叉
}
最终效果如下:
具体代码如下:
<template>
<div
:id='boxId'
class="er-box"
v-loading="loadingChange"
element-loading-text="拼命加载中">
<div
style="z-index: 1;"
v-if="fullShow">
<el-row
:gutter="20">
<el-col
:span="10">
<el-select
v-model="keyword"
filterable
:reserve-keyword="true"
clearable
placeholder="请输入表英文名"
style="width:100%;z-index: 1000;">
<el-option
v-for="item in searchList"
:key="item.tableName"
:label="item.tableName"
:value="item.tableName">
</el-option>
</el-select>
</el-col>
<el-col
:span="2">
<el-button
type="primary"
@click="getData()">
搜索
</el-button>
</el-col>
<el-col
:span="12">
<div
class="header-right-box"
style="float: right; margin-right: 16px;">
<img
class="full-img"
src="../../../../../assets/er-images/fullscreen.png"
@click="enterFullScreen"
v-if="fullShow">
<el-button
style="margin-right: -6px"
icon="el-icon-minus"
@click="changeScale('reduce')"></el-button>
<el-select
v-model="myDiagramScale"
placeholder="请选择"
style="width: 100px"
@change="changeScale('change')">
<el-option
v-for="item in scales"
:key="item.lable"
:label="item.lable"
:value="item.val">
</el-option>
</el-select>
<el-button
style="margin-left: -6px ;font-size: 14px"
icon="el-icon-plus"
@click="changeScale('add')"></el-button>
</div>
</el-col>
</el-row>
</div>
<div
class="full-btn-box"
v-if="!fullShow">
<img
src="../../../../../assets/er-images/ic_er_renew.png"
@click="exitFullScreen"
v-if="!fullShow"
class="exitFullScreenBtn">
</div>
<div
:id='title'
style='width:100%; height:690px;background:#fff'
@contextmenu.prevent="showRight"></div>
<!--点击画板右击弹出框-->
<div
:id="rightId"
class="er-right-box"
v-show="erRight">
<el-menu
default-active="1-4-1"
class="el-menu-vertical-demo"
:collapse="isCollapse"
v-if="erRight"
style="z-index:99999;">
<el-submenu
index="1">
<template
slot="title">
<div
class="submenu-item">
视图
</div>
</template>
<el-menu-item
index="1-1">
<el-checkbox
v-model="showItem.isType"
label="显示数据类型"
name="type"
@change="changeData"></el-checkbox>
</el-menu-item>
<el-menu-item
index="1-2">
<el-checkbox
v-model="showItem.isNull"
label="显示为空"
name=