D3序

最近作公司的APM项目涉及到数据可视化，简单调研了一下目前业内推崇的工具，天然最终选择是非D3莫属，特别是看了官网上那些绝妙的示例以后,感受这玩意儿炫到爆！选择D3最重要的一点是D3提供基础的必要的功能，在这些功能之上咱们能够高度自定义本身的图表。看了俩天《Data Visualization with D3.js Cookbook》算是入门了吧，看一点就记录一下，之后也好回顾！

`
D3的简介在网上有不少，《Data Visualization with D3.js Cookbook》中用了很短的一段做介绍：'D3.js is a JavaScript library designed to display digital data in a dynamic graphical form. It helps you to bring data to life using HTML, SVG, and CSS. D3 allows great control over the final visual result, and it is the hottest and most powerful web-based data visualization technology on the market today.'[1]

关键词： dynamic graphical form driven by data , 而后就是hottest and most powerful（我相信群众的眼睛是雪亮的） ，看到这俩点也就敲定就选他了！

D3基本的几个功能包括：元素选择，数据绑定，值域映射，坐标定义，动画。除此以外还提供多种经常使用的图形布局，如饼图，树状图，力学图等。

D3的选择器（支持CSS选择器语法）跟jquery的选择器存在很大差异，D3的选择器能够选择不存在的元数，而后更据后面绑定的数据的数量动态的建立对应数量的元素。在根据数据动态生成元素这里要提到三个个操做 enter(), update(), exit() enter()通常用在data()以后能够理解成匹配数据和显示元素（显示元素这里我指的不是一个动做，而是指表明数据显示在界面上的html元素）的个数，update即更新绑定到html元素上的数据，exit呢就是获得多于的html元素，enter以后呢通常要append（若是缺乏html元素会添加，若是已足够那么append不会执行，d3会本身去判断） ,exit以后呢要remove，意思是删掉多于的元素。
绑定数据后相应的DOM节点上会多出一个属性：__data__这是属性的值就是绑定到相应节点的数据。

值域映射很好理解，目的是为了便于图形表示将原始的值映射到另外一个值域，也就是数学上的函数映射： y=f(x) 。 d3提供一些基本的映射规则，固然也容许你本身定义本身的映射函数，方法见以前提到的那本书的chapter 4中的Implementing a custom interpolator一节（这本书确实讲的很好）.

坐标定义很简单的，就像用笔在纸上画图同样，只不过这里用的是代码。规定好相应的值域映射而后绑定到相应元素就好。 值得一提的是动态坐标，即根据数据或显示须要动态跟新坐标的比例，使人惊讶的是这个操做仅仅从新定义坐标轴的值域便可，并且还能添加过渡的动画，太赞了！！！

动画部分很是简单transition()，ease()，delay() 就完了。

再提一下D3的线条，也就是代码里面常见的links ,好比var link=d3.layout.force.links();这个link里的元素就是保存的线条，若是你仔细看里面的数据结构的话，能够发现里面有source和target俩个属性，顾名思义也就是起始点和目标点.在画树状图的时,因为树状图不可能有回路，若数据中明显有回路,d3会忽略这些回路，若想保留这些回路，方法就是本身保留回路中的一条边，而后手动将这条边添加到links数组里面去，而这条边就是有source和target（d3处理事后的source和target,里面包含位置信息）

简要的归纳就这么多，有时间再奉上几篇别人的做品研究和本身的网络拓扑图的代码 :)
`