2
我在d3中編寫了一個函數,以便在樣本頁面中創建顯示不同數據集的多個圖。d3.layout.stack()與'擺動'偏移問題
我使用streamgraph和堆棧佈局,我不明白爲什麼用同樣的代碼,我可以用產生地塊作爲同時使用相同的數據集和相同的堆棧佈局wiggle
偏移不產生偏移zero
,expand
和silhouette
任何東西。 (I已經讀不止一次的文檔)
隨函附上代碼的摘錄:
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
}
]
}
]
以下是結果的一些屏幕截圖(使用相同的數據集):
偏移「零」:
偏移 '擴大':
偏移 '剪影':
偏移 '蠕動':
非常感謝!現在它更清晰了! – chobin