説明
D3.jsでSVGを使って横棒グラフを描くにはappend()を使ってsvg要素を追加します。次に生成したsvg要素にdata()メソッドでグラフとして処理する配列を指定します。配列要素の数に応じて処理するためにenter()メソッドとappend()メソッドを組み合わせます。append()メソッドのパラメーターには棒グラフを表現するためのSVGのrect要素を指定します。rect要素はSVGで四角形を描画します。
生成したrect要素のy属性に棒グラフの表示Y座標を指定します。これはattr()メソッドを使い、最初のパラメーターにyの文字を、2番目のパラメーターにはJavaScriptの関数を指定します。関数内では渡された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領域の縦幅
d3.select("#myGraph").append("svg")
.attr("width", svgWidth).attr("height", svgHeight)
.selectAll("rect") // SVGでの四角形を示す要素を指定
.data(list) // データを設定
.enter()
.append("rect") // SVGでの四角形を示す要素を生成
.attr("x", 0) // 横棒グラフなのでX座標は0。これはSVG上での座標
.attr("y", function(d,i){ // Y座標を配列の順序に応じて計算
return i * 18;
})
.attr("width", function(d){ // 横幅を配列の内容に応じて計算
return (d*2) +"px";
})
.attr("height", "16") // 棒グラフの高さを指定
.attr("style", "fill:rgb(255,0,0)") // 棒グラフの色を赤色に設定