D3.js 的基本用法外加一个略调皮的demo

前几天看到社区里有人发帖子比较了三个比较主流的图表插件，大家都对heightCharts情有独钟，不过无奈无良主管个人爱好D3多一些，所以我的图表第一次就这么给了D3···

这是我用D3+react做的一个图表，不过由于扩展性不是很好，就不贴源码了。

http://yansm.github.io/react-d3-test/

D3的学习曲线确实有些不好，关键是api给的乱七八糟，还不如看demo来的明白，也让人产生了退却感。

其实D3不算是一个图表插件，他更像是操作svg的“jquery”,所以他采用了svg得坐标系还有思想也让写东西的时候很不好掌握。

我们下面做一个简单的例子，来说明一下他的一些主要的api。

一个图表坐标轴是最常见的部分，可惜D3最恶心的地方却也是坐标轴。

首先一个坐标轴需要由一个刻度尺组成，这个刻度尺也是你再作内容时候定位所需要的，这个刻度尺以你所传输的数据来确定。所以你的坐标轴和你的图表内容其实都是基于这个刻度尺来决定的。

而一个刻度尺有两项数据来建立，一个是数据的范围以及你的空间范围，你的数据范围就是你的x轴数据的最大值到最小值，空间范围就是你图表的大小，比如你的宽度是600，那么你的空间范围就是 0-600，

而数据范围有两种办法去决定，一个是d3自带的extents方法，你只要把数组给他就ok了他会给你最大值或这最小值，但是假如你的最小值有别的需求比如说需要他时0，那么就用D3.max或者d3.min即可，同样的给他数组，他会给你最大值或者最小值。

1. var yExtents = [0, d3.max( data_1.map(function (e) {
2. return yAccessor(e);
3. }))]

 

 类似这样即可。

同样的你的scale也可以生成了。

1. var yScale = d3.scale.linear()
2. .domain(yExtents)
3. .range([400,0]);

 

 坐标轴这里分为orgin，linear还有time这三种，叫常用的是后两种。后两种都是需要domain和range两个参数即可。

而你有了刻度尺，就可以去实现坐标轴了。

1. var yAxis = d3.svg.axis()
2. .scale(yScale)
3. .orient('left');

 

 坐标轴也是两个属性，一个是你的刻度尺，一个是方向，top，bottom，left，right这四种。

刻度尺也还有别的，比如颜色的等。同样的给出两个范围即可用作数值的输出了。

之后我们以柱状图为例，讲一下图表的构成。

柱状图来说，每个柱都是一个svg的rect，你需要给他5个属性，x，y，width，height，fill。

在构成的时候你需要

先选择所有的rect

1. barSvg
2. .selectAll('rect')

 

 然后插入数据

.data(data)

这时候当数据生成了新的rect，那么就要

1. .enter().append('rect')

 

获取到新数据然后生成相应的rect。而对于多余的rect，可以使用exit()来操作。

宽度你需要根据数据的数量来定，你也可以用他给出的方式来作，这个他给的算宽的方式我忘记了，api太乱没找到···

1. .attr('width', 750/length/2)
2.  
3. ..attr('height', function(d) {
4.  
5. return 400 - yScale(yAccessor(d));
6.  
7. })

 

你每次的attr都可以放入常量或者是function， 这个时候就用到了刻度尺，你给你的刻度尺一个y轴数值的参数，他返还给你一个相应的长度。

同样的x和y坐标也可以这样计算得到

1. .attr('x',function (d) {
2. return xScale(xAccessor(d));
3. })
4. .attr('y', function (d){
5. return yScale(yAccessor(d));
6. })

 

如果你像增加动画，只需要加transition()和duration()以及delay来进行。

d3支持链式操作，甚至比jquery还要强大，你可以吧动画存储到你的链式里，然后在后续的操作中在增加形变。

一个简单地图表大致就是这样的，下面有一个教程大家可以进一步的熟悉一下。

其实d3没有那么难，你只要掌握了主要的方法就可以驾驭他，也许最让人心酸的是你以为找到的是一个给出数据就可以返回结果的插件，然而他给你的知识一个由你添加功能的框架··· 

代码在线运行及把玩地址：http://www.gbtags.com/gb/rtreplayerpreview/1095.htm

原文链接：http://www.gbtags.com/gb/share/5729.htm