路径D3中的渐变颜色问题

Question

在这里，我正在使用D3 JavaScript库显示折线图。我使用D3添加了折线图，但我尝试添加渐变路径区域颜色，但渐变颜色不在路径内部，而是在路径外部。任何人都知道如何在路径内添加路径渐变颜色。  

public lineGraph( pathData, lineData ,maxHeight ,height ,width, selectedDivId) {
    const yAxis = d3
      .scaleLinear()
      .domain([0, maxHeight])
      .range([0, height]);

    const line = d3.line()
             .x(function(d) {return d.x; })
             .y(function(d) {return yAxis( maxHeight - d.y); });

    const svg = d3
      .select(selectedDivId)
      .append('svg')
      .attr('width', width)
      .attr('height', height)
      .attr('class', 'graph');

      const gradient = svg
      .append('linearGradient')
      .attr('id', 'area-gradient')
      .attr('gradientUnits', 'userSpaceOnUse')
      .attr('x1', '0%')
      .attr('y1', '100%')
      .attr('x2', '0%')
      .attr('y2', '0%');

      gradient.append('stop')
              .attr('offset', '0%')
              .style('stop-color', '#ffffff')
              .style('stop-opacity', 1);

      gradient.append('stop')
              .attr('offset', '100%')
              .style('stop-color', '#94d3ff')
              .style('stop-opacity', 1);

    svg.append('path')
        .attr('d', line(pathData))
        .attr('class', 'area')
        .attr('stroke', '#94d3ff');
     }
</script>