d3入门demo1-简单的树

简介：

想做个家族族谱的树状呈现，看到d3很火就学着使用中。

一开始啥都不会怎么学呢，就去组织网站去逛发现d3做的还是不错的这里提供地址：https://d3js.org/

这里有直接的用例效果，点开需要的效果就可以看到聚体的代码还是很不错的。（这里有个细节d3已经更新了很多网上有很多资源需要积分啥的下下来的都是老版本不能用的，建议使用最新版本或者v3版本也可以，我这里用的是v3版本）

话不多说上效果图：

细节说明：

这里代码里不光过了相应是处理

由于最终想做成族谱当然点击对应的人需要弹出对应的跟人信息所以在每个几点上需要同时绑定单击和双击事件

d3上有更好的处理，但我英文差不想费脑子直接使用jquery的延迟时间标记的方法，

// 单击时切换子项.
function click(d) {
	clearTimeout(clickTimeFn);
	clickTimeFn = setTimeout(function() {
		if (d.children) {
			d._children = d.children;
			d.children = null;
		} else {
			d.children = d._children;
			d._children = null;
		}
		update(d);
	},200);

}

function dblclick(d) {
	clearTimeout(clickTimeFn);
	alert(d.name);
}

想看其他的树的代码这里提供了源码下载地址（容我无耻收点积分）

http://download.csdn.net/download/gudujohn/10124113