插值出错

Question

我试图在我所拥有的堆积区域图表中平滑线条。但是我收到了错误。这是一段代码：

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

我收到此错误：

  

TypeError：d3.area（...）。interpolate不是函数

任何想法？

Answer 1

而不是：

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

以下是有关曲线的API：https://github.com/d3/d3-shape/blob/master/README.md#curves