Angular 2 typescript d3 type issue: Property 'x' does not exist on type '[number, number]'

Question

I am generating a line chart with d3. It works, but typescript code complain about a property not exists in vs.

Property 'x' does not exist on type '[number, number]'

Looking at the error. It seems like the data point expected is an array with two numbers.

But I am passing in an object. D3 should support both I think.

Does anyone know how to get rid of this error without changing my data?

Answer 1

Here is the solution. I need to use generics:

Answer 2

When data is passed as a variable, defining that data as type any should appease TypeScript, e.g.:

// Append a 'text' SVGElement with data-driven text() to each 'g' SVGElement 
d3.selectAll('g')
  .each(function(d: any) {
    d3.select(this)
      .append('text')
      .text(d.mytext);
  });