如何实现这种树状结构

Question

目前有个类似家谱的树状结构的需求（如下图，样式基本一样）

数据是从后端传过来的，不是定死的。
后端管理页需要对这个树结构进行增删改查，前端APP是调用h5来只展示而已。
是用canvas来实现吗？我目前存疑的问题是，用canvas画时，竖向的如何避免重叠，毕竟横向的距离基本不会变，但纵向的得根据后代的高度自动变化，这样才能避免重叠。
可以用html标签来实现吗？
大家有什么好的想法吗？有类似的插件吗？难道只能原生写了？如果原生写，这个高度问题怎么解决呢？
实在没思路，特地来提问，希望大佬不吝赐教，万分感谢。

Answer 1

推荐蚂蚁金服的G6关系图类库。G6 是解决流程图和关系分析的图表库，集成了大量的交互，可以轻松的进行动态流程图和关系网络的开发。链接：https://antv.alipay.com/zh-cn...

Answer 2

http://blog.csdn.net/wanglei1... 这是用D3.js框架实现的，利用svg画出来的，希望对你有帮助

Answer 3

zTree.js

Answer 4

你是使用vue.js框架吗？
如果是使用vue.js的话推荐一个比较好用的画组织结构图的插件https://github.com/hukaibaihu...

如果不是，可以使用楼上所说的d3,是非常好的选择，可能对前端知识要求会高点