js-d3畫圖插件

d3.js下載

官方網站：http://d3js.org/

github：https://github. com/mbostock/d3/tags

forks最新：https://github.com/mbostock/d3

d3圖片彙總：https://github.com/mbostock/d3/wiki/Gallery

全面學習網站：http://www.ourd3js.com

網絡統一配置

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

 

1. 如何選擇元素

在 D3 中，用於選擇元素的函數有兩個：

d3.select()：是選擇全部指定元素的第一個
d3.selectAll()：是選擇指定元素的所有

 

例如

var body = d3.select("body"); //選擇文檔中的body元素
var p1 = body.select("p");      //選擇body中的第一個p元素
var p = body.selectAll("p");    //選擇body中的全部p元素
var svg = body.select("svg");   //選擇body中的svg元素
var rects = svg.selectAll("rect");  //選擇svg中全部的svg元素

 

 

2. 如何綁定數據

D3 有一個很獨特的功能：能將數據綁定到 DOM 上，也就是綁定到文檔上。這麼說可能很差理解，例如網頁中有段落元素 <p> 和一個整數 5，因而能夠將整數 5 與 <p>綁定到一塊兒。綁定以後，當須要依靠這個數據才操做元素的時候，會很方便。

D3 中是經過如下兩個函數來綁定數據的：

datum()：綁定一個數據到選擇集上
data()：綁定一個數組到選擇集上，數組的各項值分別與選擇集的各元素綁定

 

 datum()

假設有一字符串 China，要將此字符串分別與三個段落元素綁定，代碼以下：

var str = "China";
var body = d3.select("body");
var p = body.selectAll("p"); 
p.datum(str);
p.text(function(d, i){
    return "第 "+ i + " 個元素綁定的數據是 " + d;
});

 

綁定數據後，使用此數據來修改三個段落元素的內容，其結果以下：

第 0 個元素綁定的數據是 China
第 1 個元素綁定的數據是 China
第 2 個元素綁定的數據是 China

在上面的代碼中，用到了一個無名函數 function(d, i)。當選擇集須要使用被綁定的數據時，常須要這麼使用。其包含兩個參數，其中：

d 表明數據，也就是與某元素綁定的數據。
i 表明索引，表明數據的索引號，從 0 開始。

 

 

data()

有一個數組，接下來要分別將數組的各元素綁定到三個段落元素上。

var dataset = ["I like dogs","I like cats","I like snakes"];

綁定以後，其對應關係的要求爲：

Apple 與 I like dogs 綁定
Pear 與 I like cats 綁定
Banana 與 I like snakes 綁定

調用 data() 綁定數據，並替換三個段落元素的字符串爲被綁定的字符串，代碼以下：

var body = d3.select("body");
var p = body.selectAll("p");
 
p.data(dataset)
  .text(function(d, i){
      return d;
  });

這段代碼也用到了一個無名函數 function(d, i)，其對應的狀況以下

當 i == 0 時， d 爲 I like dogs。
當 i == 1 時， d 爲 I like cats。
當 i == 2 時， d 爲 I like snakes。

此時，三個段落元素與數組 dataset 的三個字符串是一一對應的，所以，在函數 function(d, i) 直接 return d 便可。

結果天然是三個段落的文字分別變成了數組的三個字符串。

I like dogs
I like cats
I like snakes

 

 

選擇第一個 p 元素

<p>Apple</p>
<p>Pear</p>
<p>Banana</p>

 

var p1 = body.select("p");
p1.style("color","red");

 

結果以下圖，被選擇的元素標記爲紅色。

 

選擇所有 p 元素

var p = body.selectAll("p");
p.style("color","red");

 

選擇第二個 p 元素

<p id="myid">Pear</p>

而後，使用 select 選擇元素，注意參數中 id 名稱前要加 # 號。

var p2 = body.select("#myid");
p2.style("color","red");

 

選擇後兩個 p 元素

<p class="myclass">Pear</p>
<p class="myclass">Banana</p>

因爲須要選擇多個元素，要用 selectAll。注意參數，class 名稱前要加一個點。

var p = body.selectAll(".myclass");
p.style("color","red");

關於 select 和 selectAll 的參數，實際上是符合 CSS 選擇器的條件的，即用「井號（#）」表示 id，用「點（.）」表示 class。

此外，對於已經綁定了數據的選擇集，還有一種選擇元素的方法，那就是靈活運用 function(d, i)。咱們已經知道參數 i 是表明索引號的，因而即可以用條件斷定語句來指定執行的元素。

 

3. 插入元素

append()：在選擇集末尾插入元素
insert()：在選擇集前面插入元素

假設有三個段落元素，與上文相同。

append()

body.append("p")
    .text("append p element");

 

在 body 的末尾添加一個 p 元素，結果爲：

Apple
Pear
Banana
append p element

 

 

insert()

在 body 中 id 爲 myid 的元素前添加一個段落元素。

body.insert("p","#myid")
  .text("insert p element");

已經指定了 Pear 段落的 id 爲 myid，所以結果以下。

Apple
insert p element
Pear
Banana

 

 

 

 

4. 刪除元素

刪除一個元素時，對於選擇的元素，使用 remove 。

var p = body.select("#myid");
p.remove();

 

 

 

圖標製做

一，柱形圖

D3 雖然沒有明文規定必定要在 SVG 中繪圖，可是 D3 提供了衆多的 SVG 圖形的生成器，它們都是隻支持 SVG 的。所以，建議使用 SVG 畫布。

使用 D3 在 body 元素中添加 svg 的代碼以下。

var width = 300;  //畫布的寬度
var height = 300;   //畫布的高度
 
var svg = d3.select("body")     //選擇文檔中的body元素
    .append("svg")          //添加一個svg元素
    .attr("width", width)       //設定寬度
    .attr("height", height);    //設定高度

有了畫布，接下來就能夠在畫布上做圖了。

本例繪製一個橫向的柱形圖。只繪製矩形，不繪製文字和座標軸。

在 SVG 中，矩形的元素標籤是 rect。例如：(svg和rect元素爲d3自動添加，不須要在頁面標出)

<svg>
<rect></rect>
<rect></rect>
</svg>

面的 rect 裏沒有矩形的屬性。矩形的屬性，經常使用的有四個：

x：矩形左上角的 x 座標
y：矩形左上角的 y 座標
width：矩形的寬度
height：矩形的高度

要注意，在 SVG 中，x 軸的正方向是水平向右，y 軸的正方向是垂直向下的。

如今給出一組數據，要對此進行可視化。數據以下：

var dataset = [ 250 , 210 , 170 , 130 , 90 ];  //數據（表示矩形的寬度）

爲簡單起見，咱們直接用數值的大小來表示矩形的像素寬度（後面會說到這不是一種好方法）。而後，添加如下代碼。

var rectHeight = 25;   //每一個矩形所佔的像素高度(包括空白)
 
svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x",20)
    .attr("y",function(d,i){
         return i * rectHeight;
    })
    .attr("width",function(d){
         return d;
    })
    .attr("height",rectHeight-2)
    .attr("fill","steelblue");

這段代碼添加了與 dataset 數組的長度相同數量的矩形，所使用的語句是：

svg.selectAll("rect")   //選擇svg內全部的矩形
    .data(dataset)  //綁定數組
    .enter()        //指定選擇集的enter部分
    .append("rect") //添加足夠數量的矩形元素

這段代碼之後會經常出如今 D3 的代碼中，請務必牢記。

有數據，而沒有足夠圖形元素的時候，使用此方法能夠添加足夠的元素。

添加了元素以後，就須要分別給各元素的屬性賦值。在這裏用到了 function(d, i)，前面已經講過，d 表明與當前元素綁定的數據，i 表明索引號。給屬性賦值的時候，是須要用到被綁定的數據，以及索引號的。

最後一行的：

.attr("fill","steelblue");

 

是給矩形元素設置顏色。通常來講，最好寫成外置 CSS 的形式，方便歸類和修改。這裏爲了便於初學者理解，將樣式直接寫到元素裏。

 

比例尺的使用

1. 線性比例尺

線性比例尺，能將一個連續的區間，映射到另外一區間

var min = d3.min(dataset);
var max = d3.max(dataset);
 
var linear = d3.scale.linear()
        .domain([min, max])
        .range([0, 300]);//映色範圍:映射成 0；將最大的值，映射成 300。
 
linear(0.9);    //返回 0
linear(2.3);    //返回 175
linear(3.3);    //返回 300

 

其中，d3.scale.linear() 返回一個線性比例尺。domain() 和 range() 分別設定比例尺的定義域和值域。在這裏還用到了兩個函數，它們常常與比例尺一塊兒出現：

d3.max()
d3.min()

 

這兩個函數可以求數組的最大值和最小值，是 D3 提供的。按照以上代碼，

比例尺的定義域 domain 爲：[0.9, 3.3]

比例尺的值域 range 爲：[0, 300]

所以，當輸入 0.9 時，返回 0；當輸入 3.3 時，返回 300。當輸入 2.3 時呢？返回 175，這是按照線性函數的規則計算的。

d3.scale.linear() 的返回值，是能夠當作函數來使用的。所以，纔有這樣的用法：linear(0.9)。

 

 

 

2. 序數比例尺

有時候，定義域和值域不必定是連續的。例如，有兩個數組：

var index = [0, 1, 2, 3, 4];
var color = ["red", "blue", "green", "yellow", "black"];

但願 0 對應顏色 red，1 對應 blue，依次類推。

可是，這些值都是離散的，線性比例尺不適合，須要用到序數比例尺。

var ordinal = d3.scale.ordinal()
        .domain(index)
        .range(color);
 
ordinal(0); //返回 red
ordinal(2); //返回 green
ordinal(4); //返回 black

用法與線性比例尺是相似的

 

 

給柱形圖添加比例尺

對上面柱形圖作以下修改修改：

 <head> 
        <meta charset="utf-8"> 
        <title>HelloWorld</title> 
  </head> 
    <body> 
    </body> 
</html>
<script src="d3.js" charset="utf-8"></script> 
<script>  
var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ];  //數據（表示矩形的寬度）
var width = 300;  //畫布的寬度
var height = 300;   //畫布的高度
 
var svg = d3.select("body")     //選擇文檔中的body元素
    .append("svg")          //添加一個svg元素
    .attr("width", width)       //設定寬度
    .attr("height", height);    //設定高度

var linear = d3.scale.linear()
        .domain([0, d3.max(dataset)])
        .range([0, 250]);

var rectHeight = 25;    //每一個矩形所佔的像素高度(包括空白)
svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x",20)
    .attr("y",function(d,i){
         return i * rectHeight;
    })
    .attr("width",function(d){
         return linear(d);   //在這裏用比例尺
    })
    .attr("height",rectHeight-2)
    .attr("fill","steelblue");
</script> 

 

 

5.座標軸

d3.svg.axis()

分組元素 <g>，是 SVG 畫布中的元素，意思是 group。此元素是將其餘元素進行組合的容器，在這裏是用於將座標軸的其餘元素分組存放

生成座標軸，須要用到比例尺，它們兩者常常是一塊兒使用的。下面，在上一章的數據和比例尺的基礎上，添加一個座標軸的組件。

//數據
var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ];
//定義比例尺
var linear = d3.scale.linear()
      .domain([0, d3.max(dataset)])
      .range([0, 250]);
 
var axis = d3.svg.axis()
     .scale(linear)      //指定比例尺
     .orient("bottom")   //指定刻度的方向
     .ticks(7);          //指定刻度的數量

第 1 – 2 行：定義數組。

第 4 – 7 行：定義比例尺，其中使用了數組 dataset。

第 9 – 12 行：定義座標軸，其中使用了線性比例尺 linear。其中：

d3.svg.axis()：D3 中座標軸的組件，可以在 SVG 中生成組成座標軸的元素。
scale()：指定比例尺。
orient()：指定刻度的朝向，bottom 表示在座標軸的下方顯示。
ticks()：指定刻度的數量。

 

 

在 SVG 中添加座標軸

定義了座標軸以後，只須要在 SVG 中添加一個分組元素 <g>，再將座標軸的其餘元素添加到這個 <g> 裏便可。代碼以下：

svg.append("g")
   .call(axis);

上面有一個 call() 函數，其參數是前面定義的座標軸 axis。

在 D3 中，call() 的參數是一個函數。調用以後，將當前的選擇集做爲參數傳遞給此函數。也就是說，如下兩段代碼是相等的。

function foo(selection) {
  selection
      .attr("name1", "value1")
      .attr("name2", "value2");
}
foo(d3.selectAll("div"))

和

d3.selectAll("div").call(foo);

所以，

svg.append("g").call(axis);

與

axis(svg.append(g));

是相等的。

 

設定座標軸的樣式和位置

默認的座標軸樣式不太美觀，下面提供一個常見的樣式：

<style>
.axis path,
.axis line{
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}
 
.axis text {
    font-family: sans-serif;
    font-size: 11px;
}
</style>

分別定義了類 axis 下的 path、line、text 元素的樣式。接下來，只須要將座標軸的類設定爲 axis 便可。

座標軸的位置，能夠經過 transform 屬性來設定。

一般在添加元素的時候就一併設定，寫成以下形式：

svg.append("g")
  .attr("class","axis")
  .attr("transform","translate(20,130)")
  .call(axis);

 

全列：

 <head> 
        <meta charset="utf-8"> 
        <title>HelloWorld</title> 
<style>
.axis path,
.axis line{
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}
 
.axis text {
    font-family: sans-serif;
    font-size: 11px;
}
</style>
  </head> 
    <body> 
    </body> 
</html>
<script src="d3.js" charset="utf-8"></script> 
<script>  
var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ];  //數據（表示矩形的寬度）
var width = 300;  //畫布的寬度
var height = 300;   //畫布的高度
 
var svg = d3.select("body")     //選擇文檔中的body元素
    .append("svg")          //添加一個svg元素
    .attr("width", width)       //設定寬度
    .attr("height", height);    //設定高度

var linear = d3.scale.linear()
    .domain([0, d3.max(dataset)])
    .range([0, 250]);

var axis = d3.svg.axis()
     .scale(linear)      //指定比例尺
     .orient("bottom")   //指定刻度的方向
     .ticks(7);          //指定刻度的數量

svg.append("g")
  .attr("class","axis")
  .attr("transform","translate(20,130)")
   .call(axis);

var rectHeight = 25;    //每一個矩形所佔的像素高度(包括空白)
svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x",20)
    .attr("y",function(d,i){
         return i * rectHeight;
    })
    .attr("width",function(d){
         return linear(d);   //在這裏用比例尺
    })
    .attr("height",rectHeight-2)
    .attr("fill","steelblue");
</script> 

 

 

 

 

 

一個完整的矩形圖

<html>  
<head>  
    <meta charset="utf-8">  
    <title>完整的柱形圖</title>  
</head> 

<style>
    .axis path,
    .axis line{
        fill: none;
        stroke: black;
        shape-rendering: crispEdges;
    }

    .axis text {
        font-family: sans-serif;
        font-size: 11px;
    }

    .MyRect {
        fill: steelblue;
    }

    .MyText {
        fill: white;
        text-anchor: middle;
    }
</style>

<body>  
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>  
    <script>

    //畫布大小
    var width = 400;
    var height = 400;

    //在 body 裏添加一個 SVG 畫布    
    var svg = d3.select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height);

    //畫布周邊的空白
    var padding = {left:30, right:30, top:20, bottom:20};

    //定義一個數組
    var dataset = [10, 20, 30, 40, 33, 24, 12, 5];
        
    //x軸的比例尺
    var xScale = d3.scale.ordinal()
        .domain(d3.range(dataset.length))
        .rangeRoundBands([0, width - padding.left - padding.right]);

    //y軸的比例尺
    var yScale = d3.scale.linear()
        .domain([0,d3.max(dataset)])
        .range([height - padding.top - padding.bottom, 0]);

    //定義x軸
    var xAxis = d3.svg.axis()
        .scale(xScale)
        .orient("bottom");
        
    //定義y軸
    var yAxis = d3.svg.axis()
        .scale(yScale)
        .orient("left");

    //矩形之間的空白
    var rectPadding = 4;

    //添加矩形元素
    var rects = svg.selectAll(".MyRect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("class","MyRect")
        .attr("transform","translate(" + padding.left + "," + padding.top + ")")
        .attr("x", function(d,i){
            return xScale(i) + rectPadding/2;
        } )
        .attr("y",function(d){
            return yScale(d);
        })
        .attr("width", xScale.rangeBand() - rectPadding )
        .attr("height", function(d){
            return height - padding.top - padding.bottom - yScale(d);
        });

    //添加文字元素
    var texts = svg.selectAll(".MyText")
        .data(dataset)
        .enter()
        .append("text")
        .attr("class","MyText")
        .attr("transform","translate(" + padding.left + "," + padding.top + ")")
        .attr("x", function(d,i){
            return xScale(i) + rectPadding/2;
        } )
        .attr("y",function(d){
            return yScale(d);
        })
        .attr("dx",function(){
            return (xScale.rangeBand() - rectPadding)/2;
        })
        .attr("dy",function(d){
            return 20;
        })
        .text(function(d){
            return d;
        });

    //添加x軸
    svg.append("g")
        .attr("class","axis")
        .attr("transform","translate(" + padding.left + "," + (height - padding.bottom) + ")")
        .call(xAxis); 
        
    //添加y軸
    svg.append("g")
        .attr("class","axis")
        .attr("transform","translate(" + padding.left + "," + padding.top + ")")
        .call(yAxis);

</script>  
</body>  
</html>  

 

 

 

6.動態效果

D3 支持製做動態的圖表。有時候，圖表的變化須要緩慢的發生，以便於讓用戶看清楚變化的過程，也能給用戶不小的友好感。

實現動態的方法

transition()

啓動過渡效果。

其先後是圖形變化先後的狀態（形狀、位置、顏色等等），例如：

.attr("fill","red")         //初始顏色爲紅色
.transition()               //啓動過渡
.attr("fill","steelblue")   //終止顏色爲鐵藍色

 

D3 會自動對兩種顏色（紅色和鐵藍色）之間的顏色值（RGB值）進行插值計算，獲得過渡用的顏色值。咱們無需知道中間是怎麼計算的，只須要享受結果便可。

duration()

指定過渡的持續時間，單位爲毫秒。

如 duration(2000) ，指持續 2000 毫秒，即 2 秒。

 

ease()

指定過渡的方式，經常使用的有：

linear：普通的線性變化
circle：慢慢地到達變換的最終狀態
elastic：帶有彈跳的到達最終狀態
bounce：在最終狀態處彈跳幾回

 

調用時，格式形如： 

ease(「bounce」)。

 

delay()

指定延遲的時間，表示必定時間後纔開始轉變，單位一樣爲毫秒。此函數能夠對總體指定延遲，也能夠對個別指定延遲。

例如，對總體指定時：

.transition()
.duration(1000)
.delay(500)

 

如此，圖形總體在延遲 500 毫秒後發生變化，變化的時長爲 1000 毫秒。所以，過渡的總時長爲1500毫秒。

又如，對一個一個的圖形（圖形上綁定了數據）進行指定時：

.transition()
.duration(1000)
.delay(funtion(d,i){
    return 200*i;
})

如此，假設有 10 個元素，那麼第 1 個元素延遲 0 毫秒（由於 i = 0），第 2 個元素延遲 200 毫秒，第 3 個延遲 400 毫秒，依次類推….整個過渡的長度爲 200 * 9 + 1000 = 2800 毫秒。

 

實現簡單的動態效果

下面將在 SVG 畫布裏添加三個圓，圓出現以後，當即啓動過渡效果。

第一個圓，要求移動 x 座標。

var circle1 = svg.append("circle")
        .attr("cx", 100)
        .attr("cy", 100)
        .attr("r", 45)
        .style("fill","green");
 
//在1秒（1000毫秒）內將圓心座標由100變爲300
circle1.transition()
    .duration(1000)
    .attr("cx", 300);

 

 

第二個圓，要求既移動 x 座標，又改變顏色。

var circle2 = svg.append("circle")... //與第一個圓同樣，省略部分代碼
 
//在1.5秒（1500毫秒）內將圓心座標由100變爲300，
//將顏色從綠色變爲紅色
circle2.transition()
    .duration(1500)
    .attr("cx", 300)
    .style("fill","red");

 

第三個圓，要求既移動 x 座標，又改變顏色，還改變半徑。

var circle3 = svg.append("circle")... //與第一個圓同樣，省略部分代碼
 
//在2秒（2000毫秒）內將圓心座標由100變爲300
//將顏色從綠色變爲紅色
//將半徑從45變成25
//過渡方式採用bounce（在終點處彈跳幾回）
circle3.transition()
    .duration(2000)
    .ease("bounce")
    .attr("cx", 300)
    .style("fill","red")
    .attr("r", 25);

 

全例

<html>  
<head>  
    <meta charset="utf-8">  
    <title>讓圖表動起來</title>  

</head> 

<body>  
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>  
    <script>

    //畫布大小
    var width = 400;
    var height = 400;

    //在 body 裏添加一個 SVG 畫布    
    var svg = d3.select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height);

    var circle1 = svg.append("circle")
                    .attr("cx", 100)
                    .attr("cy", 100)
                    .attr("r", 45)
                    .style("fill","green");

    //在1秒（1000毫秒）內將圓心座標由100變爲300
    circle1.transition()
        .duration(1000)
        .attr("cx", 300);

    var circle2 = svg.append("circle")
                    .attr("cx", 100)
                    .attr("cy", 200)
                    .attr("r", 45)
                    .style("fill","green");

    //在1.5秒（1500毫秒）內將圓心座標由100變爲300，
    //將顏色從綠色變爲紅色
    circle2.transition()
        .duration(1500)
        .attr("cx", 300)
        .style("fill","red");

    var circle3 = svg.append("circle")
                    .attr("cx", 100)
                    .attr("cy", 300)
                    .attr("r", 45)
                    .style("fill","green");

    //在2秒（2000毫秒）內將圓心座標由100變爲300
    //將顏色從綠色變爲紅色
    //將半徑從45變成25
    //過渡方式採用bounce（在終點處彈跳幾回）
    circle3.transition()
        .duration(2000)
        .ease("bounce")
        .attr("cx", 300)
        .style("fill","red")
        .attr("r", 25);

</script>  
</body>  
</html>  

 

 

 

 

給柱形圖加上動態效果

<html>  
<head>  
    <meta charset="utf-8">  
    <title>讓圖表動起來</title>  

<style>
    .axis path,
    .axis line{
        fill: none;
        stroke: black;
        shape-rendering: crispEdges;
    }

    .axis text {
        font-family: sans-serif;
        font-size: 11px;
    }

    .MyRect {
        fill: steelblue;
    }

    .MyText {
        fill: white;
        text-anchor: middle;
    }
</style>

</head> 

<body>  
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>  
    <script>

    //畫布大小
    var width = 400;
    var height = 400;

    //在 body 裏添加一個 SVG 畫布    
    var svg = d3.select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height);

    //畫布周邊的空白
    var padding = {left:30, right:30, top:20, bottom:20};

    //定義一個數組
    var dataset = [10, 20, 30, 40, 33, 24, 12, 5];
        
    //x軸的比例尺
    var xScale = d3.scale.ordinal()
        .domain(d3.range(dataset.length))
        .rangeRoundBands([0, width - padding.left - padding.right]);

    //y軸的比例尺
    var yScale = d3.scale.linear()
        .domain([0,d3.max(dataset)])
        .range([height - padding.top - padding.bottom, 0]);

    //定義x軸
    var xAxis = d3.svg.axis()
        .scale(xScale)
        .orient("bottom");
        
    //定義y軸
    var yAxis = d3.svg.axis()
        .scale(yScale)
        .orient("left");

    //矩形之間的空白
    var rectPadding = 4;

    //添加矩形元素
    var rects = svg.selectAll(".MyRect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("class","MyRect")
        .attr("transform","translate(" + padding.left + "," + padding.top + ")")
        .attr("x", function(d,i){
            return xScale(i) + rectPadding/2;
        } )
        .attr("width", xScale.rangeBand() - rectPadding )
        .attr("y",function(d){
            var min = yScale.domain()[0];
            return yScale(min);
        })
        .attr("height", function(d){
            return 0;
        })
        .transition()
        .delay(function(d,i){
            return i * 200;
        })
        .duration(2000)
        .ease("bounce")
        .attr("y",function(d){
            return yScale(d);
        })
        .attr("height", function(d){
            return height - padding.top - padding.bottom - yScale(d);
        });

    //添加文字元素
    var texts = svg.selectAll(".MyText")
        .data(dataset)
        .enter()
        .append("text")
        .attr("class","MyText")
        .attr("transform","translate(" + padding.left + "," + padding.top + ")")
        .attr("x", function(d,i){
            return xScale(i) + rectPadding/2;
        } )
        .attr("dx",function(){
            return (xScale.rangeBand() - rectPadding)/2;
        })
        .attr("dy",function(d){
            return 20;
        })
        .text(function(d){
            return d;
        })
        .attr("y",function(d){
            var min = yScale.domain()[0];
            return yScale(min);
        })
        .transition()
        .delay(function(d,i){
            return i * 200;
        })
        .duration(2000)
        .ease("bounce")
        .attr("y",function(d){
            return yScale(d);
        });

    //添加x軸
    svg.append("g")
        .attr("class","axis")
        .attr("transform","translate(" + padding.left + "," + (height - padding.bottom) + ")")
        .call(xAxis); 
        
    //添加y軸
    svg.append("g")
        .attr("class","axis")
        .attr("transform","translate(" + padding.left + "," + padding.top + ")")
        .call(yAxis);

</script>  
</body>  
</html>