d3 力导向布局 表ER图 动态增加删除

绘制表ER图 源码地址

在页面上使用JS画表关系。

难点

• 表位置布局
• 动态添加移除表

解决方案：

• 力导向布局（源码使用的是d3v5版本）

目前结果：

• 实现力导向布局
• 动态添加表节点
• 动态添加表中的字段
• 字段悬浮高亮
• 搜索定位
• 删除关联节点
• 生成数据用于下次直接打开之前的样子

如图：

用到d3属性

1. d3.forceManyBody().strength()电荷力
2. d3.forceCollide().radius()碰撞检测
3. d3.forceLink().id(function(d){return d.id}) 链接，指定ID，默认是node节点的index
4. d3.zoom()拖拽、缩放

参考文档

d3可以一起使用多个力，设定好参数，就是一个完美的力导向布局。

//初始化
let initObj = initData(svg);
initObj.svgAddNode()
window.setTimeout(initObj.changePort,100)

//添加字段 -- addCols
if(isOpen){
	initObj.delColsGs() //删除字段
}else{
	initObj.addExtColsGs(data) //添加字段
}
initObj.updateFoot() //更改字段后移动表脚

//添加node节点 --addNode
initObj.svgAddNode()

源码地址