在繪製二維陣列的動態圖表之前，我們先來理一下思路：

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

最後我們來進行柱形圖的繪製，在這裡我將直接把動畫效果的程式碼也附上，大家注意看註釋：

//繪製柱狀圖
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")

那麼簡單的二維陣列的動態圖表就完成咯~