【巨人花园】第4回:我的第一个D3.js例子

大纲

选自codepen DEMO《D3 BAR CHART》
原作者:Mike Bostock
https://codepen.io/mbostock/pen/Jaemg
D3是一个用于处理一些数据可视化的库,它非常的强大,当我看到一些DEMO的时候就很想学习啦!然后就今天终于有机会开始做这个事情,但是搜索了一下感觉好像还没有很系统的新手学习手册,所以这里呢,我就先找了一个简单的DEMO,简单的进行一个体验和初步的了解。

效果

就是一个最基础的统计图的DEMO,代码也比较少。

See the Pen d3 hajime by rimochiko (@mochilee) on CodePen.

首先必然不能少一些基本的工具:
D3.js中文文档

观察代码

HTML代码中只有一个class为chart的div存在。
而CSS代码里面,给chart里面的div加上了一些样式,但是目前我们的结构中不存在这些DIV,所以这肯定是后面在JS里面加上的。

然后我们来看核心的JS代码。
首先定义了一组data,里面保存的是一组数字,我们也会发现,这串数字也正是统计图里面的每条代表的数字。

d3和jQuery一样,存在选择器和链式调用,下面的代码很好的应证了这几点。
d3.scale.linear()给我们创建了一个线性尺标,domain指定了数字的范围,而range指定了条形图绘制的大小。

d3.select(".chart").selectAll("div")这里选择的其实是空,随后.data去获取这个数组的内容,.enter()进入.chart中,后面的操作就是创建div,添加到.chart中,并且把数组成员填充到div内。这里width计算的标准就是上面给的那个线性尺标的范围。

可能这样看了一遍也只有一个大概印象,我个人感觉官方翻译的中文文档写的也不是很容易让人明白,后面还需要更多的练习和实践才能更正确的理解其中的一些含义。