莫方教程网

专业程序员编程教程与实战案例分享

前端实现知识图谱-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标签容器--缩放


想看完整代码私信。

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言