专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

前端实现知识图谱-force(d3.js)（前端知识树）

ins518 2025-06-08 21:47:00 技术文章 3 ℃ 0 评论

实现功能包含：

1、绘制节点。

2、绘制边。

3、单击节点动态添加关联的节点。

4、双击节点展开/折叠。

5、节点拖拽，容器缩放。

6、节点分组。


安装依赖：npm i d3 --save-dev;

创建SVG:

选择某个元素，在选中的元素中新增一个svg容器，并初始化width,hegiht,viewbox属性


创建force(力学模型)的仿真


绘制节点


绘制边：


下面这个path是为了在path上面绘制文本

画箭头：


节点拖拽


svg绑定节点容器g标签和边g标签容器--缩放


想看完整代码私信。

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表