d3.js—— 绘制二维数组的动态图表

在绘制二维数组的动态图表之前，我们先来理一下思路：

1、我们需要绘制一张图表；

2、这张图表的数据来源是二维数组；

3、这张图表有动态效果。

那么，我们一步一步来：

首先，我们来随意写一串二维数组，确定数据来源：

var data =[[1993,10],[1998,20],[2002,25],[2007,30],[2010,50],[2015,80],[2016,90]]

然后，我们来定义好整个图表所需要的宽高以及svg的宽高：

var width =1000,//放置柱形图的宽度    height =500,//放置柱形图的高度    margin={left:30,top:30,right:30,bottom:30}    svg_width = width+margin.left+margin.right,    svg_height =height+margin.top+margin.bottom;

但是，二维数组的坐标应该如何绘制呢？

var scale_x = d3.scale.ordinal().domain(data.map(function(d){    return d[0]}))    .rangeBands([0,width],0.1)var scale_y = d3.scale.linear()    .domain([0,d3.max(data,function(d){        return d[1]    })])    .range([height,0])var svg = d3.select("#container")    .append("svg")    .attr("width",svg_width)    .attr("height",svg_height)var chart = svg.append("g")    .attr("transform","translate("+margin.left+","+margin.top+")");//添加坐标轴var x_axis = d3.svg.axis().scale(scale_x),    y_axis = d3.svg.axis().scale(scale_y).orient("left");chart.append("g")    .call(x_axis)    .attr("transform","translate(0,"+height+")")chart.append("g")    .call(y_axis)    .append("text")    .text("数量（个）")    .attr("transform","rotate(-90)")    .attr("dy","1em")    .attr("text-anchor","end");

我们可以看到，在 scale_x.domain 这里是采用了 data.map() 这个函数，以此可以直接返回数组形式的值

最后我们来进行柱形图的绘制，在这里我将直接把动画效果的代码也附上，大家注意看注释：

//绘制柱状图var bar = chart.selectAll(".bar")    .data(data)    .enter()    .append("g")    .attr("class","bar")    .attr("transform",function(d,i){return "translate("+scale_x(d[0])+",0)";})//这里将开始动画设置bar.append("rect")    .attr("y",function(d,i){        return 500    })//动画开始的y值    .attr("height",0)//动画开始高度    .attr("fill","red")//动画开始颜色    .transition()//实现动态效果函数    .duration(3000)//指定整个转变持续的时间，单位为毫秒    .ease("elastic")//指定转变的方式,linear:普通的线性变化;circle:慢慢地到达变换的最终状态;elastic带有弹跳的到达最终状态;bounce在最终状态处弹跳几次.    .delay(function(d,i){        return 200*i;    })//指定延迟的时间，表示一定时间后才开始转变，单位同样为毫秒    .attr("y",function(d,i){        return scale_y(d[1])    })    .attr("width",function(){        return scale_x.rangeBand()    })    .attr("height",function(d,i){        return height-scale_y(d[1])    })    .attr("fill","steelblue")//动画结束后显示的颜色

接下来我们再做一些无聊的事情，比如添加文字展示等等：

<pre name="code" class="javascript">//添加数据显示bar.append("text").text(function(d){return d[1]}).attr("y",function(d){return scale_y(d[1])})    .attr("x", function(d,i){        return scale_x.rangeBand()/3;    })//注意这里是rangeBand而不是rangeBands。ordinal.rangeBands - 指定输出范围为连续区间。ordinal.rangeBand - 获取区间段的宽度。    .attr("dy",15)    .attr("text-anchor","center")    .attr("fill","white")

那么简单的二维数组的动态图表就完成咯~