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

实现功能包含：

1、绘制节点。

2、绘制边。

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

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

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

6、节点分组。

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

创建SVG:

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

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

绘制节点

绘制边：

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

画箭头：

节点拖拽

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

想看完整代码私信。