D3 堆棧流圖不彎曲

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 ，但它沒有像示例那樣顯示彎曲。 我已將偏移量設置為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]); });

這是您固定的 JSFiddle 。

編輯：自從這個答案你已經編輯了你的問題。 要使堆積面積圖“彎曲”，您需要向面積構建器添加一條曲線，如下所示：

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

檢查所有可用曲線的曲線文檔。

Answer 2

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

見固定小提琴。

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);

最后一行設置曲線函數。 您可以在此處找到更多曲線函數。