插值出错 [英] Error with interpolate

问题描述

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

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

我收到此错误：

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

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

任何想法？

推荐答案

而不是：

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

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

这篇关于插值出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！