d3.js LineGenerator method is not accepting my data array

0

Esotu trying to generate a linechart from data that I will receive dynamically, the problem is that this data arrives with a value of typo "any", and should be converted to number to be accepted by the line generator but, even doing the cast, method rejects my array saying "data and datum are incompatible"

  private draw(): void {
    var container = d3.select(this.m_container.nativeElement);

    container.select('svg').remove();
    var pMargins = this.plotMargins;
    var plotWidth = this.size.width - pMargins.left - pMargins.right;
    var plotHeight = this.size.height - pMargins.top - pMargins.bottom;
    var n = this.dataValues.length;
    var svg = container.append('svg')
      .attr('width', this.size.width)
      .attr('height', this.size.height)


    var xScale = d3.scaleLinear()
      .domain(
        [d3.min(this.dataValues, d => d.timestamp), d3.max(this.dataValues, d => d.timestamp)]
      ).range([0, plotWidth])

    var yScale = d3.scaleTime()
      .domain(
        [d3.min(this.dataValues, d => d.value as number), d3.max(this.dataValues, d => d.value as number)]
      ).range([plotHeight, 0]).nice();

    var dataset = this.dataValues.map(d => { return { "y": d.value as number } })

    var dataset2 = d3.range(n).map(function (d) { return { "y": d3.randomUniform(1)() } })

    var line = d3.line()
      .curve(d3.curveCatmullRomOpen)
      .x((d, i) => xScale(i))
      .y((d) => yScale(d[1]))
      .curve(d3.curveMonotoneX)



    svg.append('g')
      .attr('class', 'x axis')
      .attr('transform', 'translate(' + pMargins.left + ',' + plotHeight + ')')
      .call(d3.axisBottom(xScale))

    svg.append('g')
      .attr('class', 'y axis')
      .call(d3.axisLeft(yScale))

    svg.append('path')
      .datum(dataset)
      .attr('class', 'line')
      .attr('d', line)
  }

One thing I found extremely strange is in the part of writing the lambda expression of the line it did not find the (dy) ... I made this method following an example I found in the link: link

    
asked by anonymous 26.11.2018 / 20:16

0 answers