D3堆棧流圖不曲線

Question

我試圖重新創建此d3 Stream Graph版本4.我正在關注Stacks文檔。根據我的數據集，我不理解爲什麼我的圖形不是曲線。

我使用的樣品數據集：

var data = [ 
    {month: new Date(2015, 0, 1), apples: 3840, bananas: 1920, cherries: 960, dates: 400}, 
    {month: new Date(2015, 1, 1), apples: 1600, bananas: 1440, cherries: 960, dates: 400}, 
    {month: new Date(2015, 2, 1), apples: 640, bananas: 960, cherries: 640, dates: 400}, 
    {month: new Date(2015, 3, 1), apples: 320, bananas: 480, cherries: 640, dates: 400} 
... 
]; 

而且我執行以下步驟：

var stack = d3.stack() 
    .keys(["apples", "bananas", "cherries", "dates"]) 
    .order(d3.stackOrderNone) 
    .offset(d3.stackOffsetWiggle); 

var series = stack(data); 

console.log(series)一個產生這個數組：

[ 
    [[0,3840],[2059,3659],[3266,3906],[3892,4212]], 
    [[3840,5760],[3659,5099],[3906,4866],[4212,4692]], 
    [[5760,6720],[5099,6059],[4866,5506],[4692,5332]], 
    [[6720,7120],[6059,6459],[5506,5906],[5332,5732]] 
    ... 
] 

創建我x和y領域和範圍是這樣的：

var x = d3.scaleTime() 
    .domain(d3.extent(data, function(d){ return d.month; })) 
    .range([0, width]); 

var y = d3.scaleLinear() 
    .domain([0, d3.max(series, function(layer) { return d3.max(layer, function(d){ return d[0] + d[1];}); })]) 
    .range([height, 0]); 

var color = d3.scaleLinear() 
    .range(["#51D0D7", "#31B5BB"]); 

試圖堆棧d3.area）圖表（

var color = d3.scaleLinear() 
    .range(["#aad", "#556"]); 

// I get stuck here: 
var area = d3.area() 
    .x(function(d) { return x(d.data.month); }) 
    .y0(function(d) { return y(d[0]); }) 
    .y1(function(d) { return y(d[1]); }); 

var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height); 

svg.selectAll("path") 
    .data(series) 
    .enter().append("path") 
    .attr("d", area) 
    .style("fill", function() { return color(Math.random()); }); 

我與代碼JSFiddle，但它不是以彎曲爲例。我已將偏移設置爲d3.stackOffsetWiggle。

Answer 1

如果您希望隨時間顯示數據，則應該爲x軸使用時間刻度。

var x = d3.scaleTime() 
    .domain(d3.extent(data, function(d){ return d.month; })) 
    .range([0, width]); 

此外，stack函數返回y0（底部），並且每個層的y1（頂部）位置，並且您不正確地使用這些值。以下是他們應該如何在區域製造商中使用：

var area = d3.area() 
    .x(function(d) { return x(d.data.month); }) 
    .y0(function(d) { return y(d[0]); }) 
    .y1(function(d) { return y(d[1]); }); 

而這裏是your fixed JSFiddle。

編輯：由於這個答案你已經編輯你的問題。爲了使堆積面積圖「曲線美」，你需要添加a curve到您所在地區的建築商，像這樣：

var area = d3.area() 
    ... 
    .curve(d3.curveMonotoneX); 

檢查curves documentation所有可用的曲線。

Answer 2

您需要設置不同的曲線以使線條平滑，而不僅僅是折線。

查看fixed fiddle。

var area = d3.area() 
.x(function(d) { console.info('in area function', d); return x(d.data.month); }) 
.y0(function(d) { return y(d[0]); }) 
.y1(function(d) { return y(d[1]); }) 
.curve(d3.curveBasis); 

最後一行設置曲線函數。你可以找到更多curve functions here。