D3.js绘制竖向组织架构图

d3新手上路,记个笔记(*^_^*)

先上效果图:

D3.js绘制竖向组织架构图_第1张图片

主要参考:https://bl.ocks.org/mbostock/3184089 

https://github.com/justincy/d3-pedigree-examples

d3版本为3.x

主要代码如下:




  
  
  


  

主要遇到的问题:

树的横向纵向:

这里的x、y和官方例子的树是反的,找到这个不同。。都是泪

树节点的连接线:http://www.w3school.com.cn/svg/svg_path.asp

D3.js绘制竖向组织架构图_第2张图片

还有就是字母大小写也有绝对和相对定位的区别,这也踩坑了。。

你可能感兴趣的:(d3,javascript)