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

这里your fixed JSFiddle。

编辑：由于这个答案你已经编辑了你的问题。要制作堆积区域图表＆＃34;曲线＆＃34;，您需要将a curve添加到您的区域构建器，如下所示：

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

检查所有可用曲线的curves documentation。

Answer 2

您需要设置不同的曲线以使线条平滑而不仅仅是折线。

请参阅fixed fiddle。

import sympy
from sympy.parsing.sympy_parser import parse_expr

x,height,mean,sigma = sympy.symbols('x height mean sigma')
gaus = height*sympy.exp(-((x-mean)/sigma)**2 / 2)

expr = parse_expr('gaus(100, 5, 0.2) + 5')

print expr.subs('gaus',gaus)                                  # prints 'gaus(100, 5, 0.2) + 5'
print expr.subs(sympy.Symbol('gaus'),gaus)                    # prints 'gaus(100, 5, 0.2) + 5'
print expr.subs(sympy.Symbol('gaus')(height,mean,sigma),gaus) # prints 'gaus(100, 5, 0.2) + 5'

# Desired output: '100 * exp(-((x-5)/0.2)**2 / 2) + 5'

最后一行设置曲线功能。您可以找到更多curve functions here。

D3堆栈Streamgraph不弯曲

2 个答案: