vue.js中使用D3树状图异步按需加载数据绘制人物关系图

vue.js中使用D3树状图异步按需加载数据绘制人物关系图，网上查了好多资料没找到合适的，就自己写个简单的，方便以后查看，附上效果图

重点：这个树状图不管是Vue的，还是HTML的，使用的D3.js 版本是3.5.17，如果使用别的版本，可能里面的语法不同，所以使用者请确认好下载的D3.js的版本

D3.js是一个基于 web 标准的 JavaScript 可视化库. D3 可以借助 SVG, Canvas 以及 HTML 将你的数据生动的展现出来. D3 结合了强大的可视化交互技术以及数据驱动 DOM 的技术结合起来, 让你可以借助于现代浏览器的强大功能自由的对数据进行可视化.

图形绘制，D3默认采用的是异步加载，但是，这里的异步加载，指的是一次性的将图形展示所需要的数据异步的方式加载到浏览器前端显示，最终以树状图展现给用户。 若一次性加载所有的数据，会比较影响用户体验，因为一次遍历数据库所有的跟踪记录，无论是递归先根遍历还是非递归方式循环查找，最终的体验都是不令人满意的。 我们便采取按需的异步加载数据方式，即，当用户点击节点时，才从后台取数据。由于D3的优秀数据管理架构，数据一旦加载了，后续便可以不用再从服务器后台取数据。

先使用HTML创建异步按需加载数据绘制的树状图

 

这个HTML是参考：https://www.cnblogs.com/shihuc/p/6064448.html

Vue的是我自己改写的，里面使用了elementUI样式库，如果没有下载的话，可以把“”这个标签删掉自己写，引入的D3的版本是3.5.17，如果是新版本，语法被简写了，可能不支持，所以下载D3.js版本的时候，要注意版本号。