D3栈流图不弯曲

Question

我试图用版本4重新创建这个d3 流图，我正在跟踪堆叠上的文档。基于我的数据集，我不明白为什么我的图形不是曲线。

​

​

我使用的是样本数据集：

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.rea()对图进行叠加

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

最后一条线设置曲线函数。你可以找到更多的这里的曲线函数。