实现功能包含:
1、绘制节点。
2、绘制边。
3、单击节点动态添加关联的节点。
4、双击节点展开/折叠。
5、节点拖拽,容器缩放。
6、节点分组。
安装依赖:npm i d3 --save-dev;
创建SVG:
选择某个元素,在选中的元素中新增一个svg容器,并初始化width,hegiht,viewbox属性
创建force(力学模型)的仿真
绘制节点
绘制边:
下面这个path是为了在path上面绘制文本
画箭头:
节点拖拽
svg绑定节点容器g标签和边g标签容器--缩放
想看完整代码私信。