1

I'm trying to smooth out the lines in a stacked area chart I have. But I'm getting an error. Here is a code snippet:

const area = d3.area()
      .interpolate('cardinal')
      .x(d => xScale(parseTime(d.data.date)))
      .y0(d => yScale(d[0] || 0))
      .y1(d => yScale(d[1] || 0));

    const stack = d3.stack()
      .keys(categories)
      .order(d3.stackOrderReverse)
      .offset(d3.stackOffsetNone);

    if (data.length > 0) {
      const stackContainer = this.vis.append('g')
        .attr('class', 'stack');

      const layer = stackContainer.selectAll('.layer')
        .data(stack(data))
        .enter()
        .append('g')
        .attr('class', 'layer');

      layer.append('path')
        .attr('class', 'area')
        .style('fill', (d, i) => d3.schemeCategory20[i])
        .attr('d', area);
    }

I'm getting this error:

TypeError: d3.area(...).interpolate is not a function

Any Ideas?

Gerardo Furtado
  • 100,839
  • 9
  • 121
  • 171
Jorge
  • 55
  • 8

1 Answers1

2

Instead of:

const area = d3.area()
    .interpolate('cardinal')
    .x(d => xScale(parseTime(d.data.date)))
    .y0(d => yScale(d[0] || 0))
    .y1(d => yScale(d[1] || 0));

It has to be:

const area = d3.area()
    .curve(d3.curveCardinal)
    .x(d => xScale(parseTime(d.data.date)))
    .y0(d => yScale(d[0] || 0))
    .y1(d => yScale(d[1] || 0));

Here is the API regarding the curves: https://github.com/d3/d3-shape/blob/master/README.md#curves

Gerardo Furtado
  • 100,839
  • 9
  • 121
  • 171
  • that works!! yay thank...i do have one other question that just occurred to me. lets say i don't want to area to be stacked, how would i go about that? if i just want them to overlap and not be stacked? – Jorge Aug 21 '16 at 15:59
  • Don't stack the data: `.data(stack(data))` should be `.data(data)`, and return `yScale(0)` for your y0. – Gerardo Furtado Aug 21 '16 at 16:07
  • hmmmm i have this [code].y0(yScale(0))[code] but not nothing shows up in the chart? sorry to be a pain.. – Jorge Aug 21 '16 at 16:27
  • If you have a different problem, post another question. – Gerardo Furtado Aug 21 '16 at 16:31