보간 중 오류가 발생했습니다.

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 is not a function

어떤 아이디어를 여기 코드는?

Answer 1

대신 : 여기

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입니다 :

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

이되어야합니다 작동 https://github.com/d3/d3-shape/blob/master/README.md#curves