D3 stack Streamgraph not curvy

Question

これをバージョン4のd3 Stream Graphに再現しようとしていました。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を持っているが、それはありません例としてcurvyを示しています。オフセットを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を見つけることができます。