How to use the d3-shape.line function in d3-shape

// Scale the range of the data
    xScale.domain([minX, maxX]);
    yScale.domain([0, maxY]);

    // Update the X Axis
    this.axisBottomGroup.transition()
      .attr('transform', 'translate(0,' + height + ')')
      .call(axisBottom(xScale).ticks(width > 500 ? Math.floor(width / 80) : 4)); // prevent from having too much ticks on small screens

    // Update the Y Axis
    this.axisLeftGroup.transition()
      .call(axisLeft(yScale));

    // this.line is not called directy since it's used as a callback and is re-assigned. It is wrapped inside this.lineReference
    this.line = line() // .interpolate("monotone")
      .x(d => xScale(d.x))
      .y(d => yScale(d.y));
  }

private drawLine() {
    // Line Graphs

    this.line = d3Shape
      .line()
      .x((d: any) => this.x(d.date))
      .y((d: any) => this.y(d.value))
      .curve(d3Shape.curveMonotoneX);

    this.line2 = d3Shape
      .line()
      .x((d: any) => this.x2(d.date))
      .y((d: any) => this.y2(d.value))
      .curve(d3Shape.curveMonotoneX);

    for (let i = 0; i < this.graphData.length; i++) {
      const lineKeys = Object.keys(this.lineColorsObject);
      const lineColor =
        this.lineColorsObject[this.graphData[i].key] ||
        this.lineColorsObject[lineKeys[i]];

it('as lines', () => {
            const wrapper = shallow(
                
            );
            const graph = wrapper.find(Lines);
            const realCurve = wrapper.render().find('path').prop('d');

            const interpolation = graph.prop('interpolation');
            const curve = _.isString(interpolation) ? curves[interpolation] : interpolation;

            const scaleX = graph.prop('scaleX').factory(graph.props());
            const scaleY = graph.prop('scaleY').factory(graph.props());
            const line = d3Line()
                .x(({x}) => scaleX(x))
                .y(({y}) => scaleY(y))
                .defined(({y}) => _.isNumber(y))
                .curve(curve);

            expect(realCurve).toEqual(line(series[0].data));
        });

export function curvedUnitPolygonPath(n) {
  const curve = curveCardinalClosed.tension(0.65);
  const spline = line().curve(curve);
  const innerAngle = 2 * (Math.PI / n);
  return spline(
    range(0, n).map(k => [Math.sin(k * innerAngle), -Math.cos(k * innerAngle)])
  );
}

private drawLine() {
        this.line = d3Shape.line()
            .x( (d: any) => this.x(d.date) )
            .y( (d: any) => this.y(d.value) );

        this.svg.append('path')
            .datum(STOCKS)
            .attr('class', 'line')
            .attr('d', this.line);
    }

renderChart = (datum) => {
        const { stackColors } = this.props;
        const line = d3line(datum.values)
            .x((d) => this.xScale(new Date(d.date)))
            .y((d) => this.yScale(d.value))
            .curve(d3curveCatmullRom.alpha(1));

        return [

renderLines = () => {
    const lineGenerator = d3Line()
      .defined(d => Boolean(d.y || d.y === 0))
      .x(d => this.state.xScale(d.x))
      .y(d => this.state.yScale(d.y));
    if (this.props.basisCurve) {
      lineGenerator.curve(curveBasis);
    }
    return (

drawD = customMark({
        d,
        i,
        classFn: summaryClass,
        styleFn: summaryStyle,
        renderFn,
        projectedCoordinates,
        xScale,
        yScale,
        bounds: shapeBounds(projectedCoordinates)
      })
      shouldBeValid = true
    } else {
      const xyfCoords = d._xyfCoordinates as number[][]
      if (d.curve) {
        const lineDrawing = line()
          .x(d => xScale(d[0]))
          .y(d => yScale(d[1]))
          .curve(d.curve)
        drawD = lineDrawing(xyfCoords)
      } else {
        drawD = `M${xyfCoords
          .map(p => `${xScale(p[0])},${yScale(p[1])}`)
          .join("L")}Z`
      }
    }

    const renderKey = renderKeyFn ? renderKeyFn(d, i) : `summary-${i}`

    if (shouldBeValid && React.isValidElement(drawD)) {
      renderedSummaries.push(drawD)
    } else if (canvasRender && canvasRender(d, i) === true) {

gManifoldElementList.forEach((gManifoldElement, k) => {
            const plotSizePx =
              k === 0 ? this.plotSizePx : this.mediumPlotSizePx;
            const manifoldCell =
              line()
                .x((d: number[]) => d[0] * plotSizePx)
                .y((d: number[]) => (1.0 - d[1]) * plotSizePx);

            if (this.iterationCount === 1) {
              d3.select(gManifoldElement)
                .selectAll('.grids')
                .data(gridData)
                .enter()
                .append('g')
                .attr('class', 'grids gan-lab')
                .append('path')
                .attr('class', 'manifold-cell gan-lab')
                .style('fill', () => {
                  return this.noiseSize === 2 ? '#7b3294' : 'none';
                });
            }

componentDidUpdate() {
    const { color, height } = this.props;
    const { previousColor = color, previousScaledData, scaledData, skipTransition } = this.state;
    const graph = select(this.svgRef.current);
    const transitionDuration = skipTransition ? 0 : TRANSITION.duration;

    const area = d3Area()
      .x(d => d.time)
      .y0(height)
      .y1(d => d.price);
    const line = d3Line()
      .x(d => d.time)
      .y(d => d.price);

    const previousAreaGraph = area(previousScaledData);
    const previousLineGraph = line(previousScaledData);
    const areaGraph = area(scaledData);
    const lineGraph = line(scaledData);

    graph.selectAll("path").remove();

    graph
      .append("path")
      .attr("class", "area")
      .attr("d", previousAreaGraph)
      .style("fill", previousColor.fill)
      .transition()