Error with interpolate [duplicate]

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?

Answers:

Answer

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.