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,里面包含位置信息）

简要的概括就这么多，有时间再奉上几篇别人的作品研究和自己的网络拓扑图的代码 😃
`