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()

改進中…

源碼地址