學習參考：【 D3.js 入門系列 — 3 】 做一個簡單的圖表！
【SVG】可縮放矢量圖形（Scalable Vector Graphics）
【Canvas】用於繪製位圖
【匿名函數function(d,i)】“d”表示綁定的數據，“i”表示索引
【橫向圖步驟】
1.添加畫布
var width=400;
var height=500;
var svg=d3.select("body")//選擇body
.append("svg")//添加svg節點
.attr("width",width)//設置寬
.attr("height",height);//設置高2.畫矩形
var weightset=[30,50,80,90,130,200];//數據
var baseheight=20;//矩形高
var paddingleft=30;//矩形起始橫座標
var margin=5;//矩形間距
svg.selectAll("rect")//選擇矩形
.data(weightset)
.enter()
.append("rect")
.attr("width",function(d){
return d;})
.attr("height",baseheight)
.attr("x",paddingleft)
.attr("y",function(d,i){
return i*(baseheight+margin);
})
.attr("fill","green");【豎向圖】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<title>簡單條形圖</title>
</head>
<body>
<script type="text/javascript">
var dataset=[60,30,70,120,90];
var width=400;//畫布寬
var height=200;//畫布高
var baseWidth=25;//矩形寬
var margin=5//矩形間隔
var paddingTop=10;//上間距
var svg=d3.select("body")
.append("svg")//添加畫布節點
.attr("width",width)
.attr("height",height);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("width",baseWidth)
.attr("height",function(d){return d;})
.attr("x",function(d,i){
return i*(baseWidth+margin);
})
.attr("y",function(d){
return height-d;
})
.attr("fill","green");
</script>
</body>
</html>