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

太过爱你忘了你带给我的痛 2022-03-02 06:46 863阅读 0赞

# 绘制表ER图 [源码地址][Link 1] #

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

### 难点 ###

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

### 解决方案： ###

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

目前结果：

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

如图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NyaWJ1ZzgwODA_size_16_color_FFFFFF_t_70]

用到d3属性

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

[参考文档][Link 2]

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

[源码地址][Link 1]

[Link 1]: https://github.com/Cribug8080/test/blob/master/days/190319/tables-er-d3.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NyaWJ1ZzgwODA_size_16_color_FFFFFF_t_70]: /images/20220302/406bd09092c0432c8b3a42676ca86883.png
[Link 2]: https://d3js.org.cn/api/d3-force/#forces

发表评论取消回复

表情：

评论列表（有 1 条评论，863人围观）

蒲公英云66477FV铁粉 2022-08-02 10:13

源码没有？？

相关阅读

相关使用Echarts绘制力导向图

文章目录使用Echarts绘制力导向图前言参考文档绘制力导向图准备图文件扩展阅读

桃扇骨/ 2023年06月12日 06:16/ 0 赞/ 41 阅读

相关如何自己开发一款力导向图？

![format_png][] 下图，是本次要讲的项目动态实例： ![format_png 1][] 前言力导向图大家都不陌生，力导向图缺少不了力，而在数据

╰半橙微兮°/ 2022年12月31日 13:25/ 0 赞/ 284 阅读

相关 js动态增加行删除行

//动态增加行 function addRow(tab){ var title = ""; var table = document.get

叁歲伎倆/ 2022年08月07日 05:53/ 0 赞/ 245 阅读

相关【D3.js】力导向布局 + 圆形图片展示的人物关系

![20161118161025881][] 前言使用d3的力学图（力导向图）与生活中常见的人物关系图结合，已经有了很好的例子： [【 D3.js 进阶系列 — 2.

Love The Way You Lie/ 2022年07月16日 13:08/ 0 赞/ 350 阅读

相关 javascript——动态增加删除行

<%@ page language="java" import="java.util.\" pageEncoding="UTF-8"%> <% String path

快来打我*/ 2022年05月09日 13:38/ 0 赞/ 324 阅读

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

绘制表ER图 [源码地址][Link 1] 在页面上使用JS画表关系。难点表位置布局动态添加移除表解决方案：力导向布局（源码使

太过爱你忘了你带给我的痛/ 2022年03月02日 06:46/ 0 赞/ 864 阅读

相关 d3.v4.js数据可视化力导向图 force 产业链

PC和APP（手机网页版均可）静态图（我录好的视频不能上传） ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_

矫情吗；*/ 2021年11月22日 10:08/ 0 赞/ 546 阅读

相关 D3 二维图表的绘制系列（二十四）力导向图

上一篇：旭日图 https://blog.csdn.net/zjw\_python/article/details/98613674 下一篇：中国地图 https://b

柔光的暖阳◎/ 2021年11月08日 16:54/ 0 赞/ 971 阅读

相关 Unity3D 力

Unity中力有两种：普通力和位置力普通力：需要设置力的大小与方向位置力：需要设定目标点的位置示例： using System.Collection

小灰灰/ 2021年10月13日 01:39/ 0 赞/ 542 阅读

相关 D3 v4.x入门（1-5）—— 力导向图

本章主要分享可以拖拽的力导向图代码。力导向图（图左上角）一般可以用于关系展现。本文参考的是乡村爱情中的部分人物关系图。目前研究成果（希望给大家在探索

叁歲伎倆/ 2021年09月16日 00:32/ 0 赞/ 947 阅读