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")

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