説明
D3.jsでSVGを使って縦棒グラフを描くにはappend()を使ってsvg要素を追加します。次に生成したsvg要素にdata()メソッドでグラフとして処理する配列を指定します。配列要素の数に応じて処理するためにenter()メソッドとappend()メソッドを組み合わせます。append()メソッドのパラメーターには棒グラフを表現するためのSVGのrect要素を指定します。rect要素はSVGで四角形を描画します。
生成したrect要素のy属性に棒グラフの表示Y座標を指定します。縦棒グラフの場合、そのまま固定した座標を指定してしまうとグラフが下に伸びてしまいます。これはSVG座標の原点が（特に変更しない限り）左上で右下にいくに従って座標値が大きくなるためです。これを回避するためにattr()メソッドを使い、最初のパラメーターにyの文字を、2番目のパラメーターにはJavaScriptの関数を指定します。関数内では基準となる高さからグラフで表示する高さを引きます。これにより、グラフは上に伸びる形で表示されるようになります。
次に表示するx座標を指定します。これもattr()メソッドを使って行い、2番目のパラメーターに関数を渡します。関数内では渡された2番目のパラメーターが配列要素の順番を示しているため、これを利用して座標値を計算します。計算した結果をreturnで返します（単位は指定しなくてもOK）。あとは棒グラフの横幅もattr()メソッドを使ってwidth属性に設定します。
D3.jsでは自動的にデータの数だけ繰り返し処理が行われるためJavaScriptのfor()を使った繰り返しを書く必要はありません。
HTMLソース
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3.js サンプル</title>
<link rel="stylesheet" href="css/main.css">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<h1>D3.jsサンプル</h1>
<div id="myGraph"></div>
<script src="js/sample.js"></script>
</body>
</html>
JavaScriptコード
var list = [10, 30, 5, 60, 40, 78, 56, 30, 24, 80];
var svgWidth = 640; // SVG領域の横幅
var svgHeight = 480; // SVG領域の縦幅
var barHeight = 200; // 棒グラフの基準位置
d3.select("#myGraph").append("svg")
.attr("width", svgWidth).attr("height", svgHeight)
.selectAll("rect") // SVGでの四角形を示す要素を指定
.data(list) // データを設定
.enter()
.append("rect") // SVGでの四角形を示す要素を生成
.attr("x", function(d,i){ // X座標を配列の順序に応じて計算
return i * 18;
})
.attr("y", function(d){ // 縦幅を配列の内容に応じて計算
return barHeight-(d*2) +"px";
})
.attr("height", function(d){ // 縦幅を配列の内容に応じて計算
return (d*2) +"px";
})
.attr("width", 16) // 棒グラフの横幅を指定
.attr("style", "fill:rgb(255,0,0)") // 棒グラフの色を赤色に設定