サンプルページに異なるデータセットを示す複数のプロットを作成するために、d3 で関数を作成しました。
私はストリームグラフとスタック レイアウトを使用していますが、同じコードで as offset を使用してプロットを生成できる理由を理解できませんzero
。expand
同じsilhouette
データセットと同じスタック レイアウトを使用している間、wiggle
オフセットは何も生成しません。(私はすでにドキュメントを複数回読んでいます)
コードの抜粋を以下に示します。
var stack = d3.layout.stack()
.values(function(d) {
return d.values;
}).offset(o || 'silhouette');// o could be one of [expand, wiggle, zero, silhouette]
var layers = stack(stacked.datalayers()); // See after this piece of code
var maxY = d3.max(layers, function(c) {
return d3.max(c.values, function(d) {
return d.y0 + d.y;
});
});
var x = d3.scale.ordinal().domain(stacked.x()).rangeRoundBands([0, w]); // stacked.x() returns an array with the min and the max values for X
var y = d3.scale.linear().domain([0, maxY]).range([h, 0]);
var area = d3.svg.area()
.x(function(d) {
return x(d.x) + (x.rangeBand() / 2);
})
.y0(function(d) {
return y(d.y0);
})
.y1(function(d) {
return y(d.y0 + d.y);
}).interpolate("monotone");
...
series.append("path")
.attr("d", function(d) {
return area(d.values);
})
.style("fill", function(d) {
return color(cdomain.indexOf(d.name));
})
.style("fill-opacity", ".5")
.style("stroke", function(d) {
return color(cdomain.indexOf(d.name));
})
.style("stroke-width", "2px");
から返されるデータの構造は次のstacked.datalayer()
とおりです。
[
{
"name": "US",
"values": [
{
"x": "01/2014",
"y": 1.726118500604595,
"name": "US",
"y0": 0.8662854227545267
},
{
"x": "02/2014",
"y": 2.5897229845496037,
"name": "US",
"y0": 0.38969767845094694
},
{
"x": "03/2014",
"y": 2.388349800480026,
"name": "US",
"y0": 0.518912280793379
}
]
},
{
"name": "Europe28",
"values": [
{
"x": "01/2014",
"y": 0.42541539123546496,
"name": "Europe28",
"y0": 2.5924039233591216
},
{
"x": "02/2014",
"y": 0.5149863958976154,
"name": "Europe28",
"y0": 2.9794206630005506
},
{
"x": "03/2014",
"y": 0.4579303752823291,
"name": "Europe28",
"y0": 2.907262081273405
}
]
}
]
結果のスクリーンショットを次に示します (同じデータセットを使用)。
オフセット「ゼロ」:
オフセット「拡張」:
オフセット「シルエット」:
オフセット「ウィグル」: