説明
D3.jsでSVGを使って積み上げ棒グラフを描くにはappend()を使ってsvg要素を追加します。次に生成したsvg要素にd3.layout.stack()メソッドで生成した関数に積み上げ棒グラフとして処理する配列を指定します。この配列はサンプルにあるような要素形式でなければいけません。もし、異なる形式のデータの場合は、このような形式に変換してから処理します。サンプルの場合、横一列になっているのが1つの種類のデータになります。（つまり、実行した場合に同じ色になるデータのことです）
次にSVGのグループを作成します。これは積み上げ棒グラフはグループ化して表示されるためです。append("g")としてグループを追加したら、グラフの色の指定を行います。サンプルのようにあらかじめ表示する色を配列に入れておいて指定することもできます。（何も指定しないと真っ黒です）
グループを作成したら配列要素の数に応じて処理するためにenter()メソッドとappend()メソッドを組み合わせます。append()メソッドのパラメーターには棒グラフを表現するためのSVGのrect要素を指定します。
生成したrect要素のX, Y座標を指定します。X座標は繰り返し回数から表示位置を計算します。Y座標は基準となる下側のY座標からy0-yを計算したサイズになります。もし、上から積み上げて表示する場合はy0だけをreturnで返します。あとはwidth属性に横幅を指定し、height属性に高さを指定します。高さはyの値をそのままreturnで返します。これで、積み上げ棒グラフが表示されます。
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 = [
[{ x :0, y : 5 }, { x : 1, y : 20 }, { x : 2, y : 30 }, { x : 3, y : 50 }, { x : 4, y : 80 }],
[{ x :0, y : 1 }, { x : 1, y : 8 }, { x : 2, y : 10 }, { x : 3, y : 35 }, { x : 4, y : 20 }],
[{ x :0, y : 1 }, { x : 1, y : 4 }, { x : 2, y : 5 }, { x : 3, y : 10 }, { x : 4, y : 12 }]
];
var color = ["red", "green", "blue"]; // 積み上げ棒グラフの色
var svgWidth = 320; // SVG領域の横幅
var svgHeight = 240; // SVG領域の縦幅
var svg = d3.select("#myGraph").append("svg")
.attr("width", svgWidth).attr("height", svgHeight)
var stack = d3.layout.stack() // 積み上げ棒グラフ
var dataSet = stack(list); // データをセット
svg.selectAll("g") // グループ化するので、それらを対象にする
.data(dataSet)
.enter()
.append("g") // グループ追加
.attr("fill", function(d, i){ // ここでグラフの色を設定する
return color[i];
})
.selectAll("rect") // 棒グラフ1つを対象にする
.data(function(d){ return d; }) // 1つのデータを読み込む
.enter()
.append("rect") // 棒グラフ1つ1つを生成する
.attr("x", function(d, i){ // X座標を計算
return i*50;
})
.attr("y", function(d){ // 下から積み上げるための座標を計算。上からならd.y0だけでOK
return svgHeight - d.y0 - d.y;
})
.attr("width", 32) // 棒グラフの横幅
.attr("height", function(d){ // 棒グラフの高さ
return d.y;
})