canvas画一个企业结构图

描述
有时候我们根据需求需要canvas或svg画一些效果图，本案例是画企业树形图，希望各位大大支持与意见。不用废话先上图。

效果图

github地址
https://github.com/callBackFnYDG/EnterpriseStructureTree

案例实现原理
首先我们定义出，节点宽度，节点高度，节点间距离，父子节点间距离

var nodeWidth = 100; // 节点宽度
var nodeHeight = 50; // 节点高度
var heightSpace = 200; // 父子节点间距离
var nodeSpace = 20; // 节点间距离
var treeSpace = nodeWidth + nodeSpace;  // 节点总宽度

以上我们可以得到树最底层没有子节点的宽高节点间距，但是我们往上走的话父节点如果还用这个宽度计算节点位置 那么有可能会出现某些子节点叠加，解决方案，我们用回调函数从最底层计算宽度直至最顶层。

// 计算宽度
var traverse = function(node) {
   
	var nodeWidth = 0
	var childNodes = node.children ? node.children : [];
	var leftWidth = 0
	var rightWidth = 0
	
	for (var i = 0; i < childNodes.length; i++) {
   
		
		var data = traverse(childNodes[i]);
		if (!data.nodeWidth) {
   
			data.<