Utilizing the D3 graph example available here. I've defined my data object as shown below:
interface ID3Data {
age: string,
population: number
}
const data: ID3Data[] = [
{ age: "<5", population: 2704659 },
{ age: "5-13", population: 4499890 }
]
This data is then used in the following context:
const pie = d3.pie()
.value(function(d: any) { return d.population; });
const arc = g.selectAll(".arc")
.data(pie(data)) // ->>> This specific area of the code
This snippet results in the following error message:
TypeScript error: Argument of type 'ID3Data[]' is not assignable to parameter of type '(number | { valueOf(): number; })[]'.
Type 'ID3Data' is not assignable to type 'number | { valueOf(): number; }'.
Type 'ID3Data' is not assignable to type '{ valueOf(): number; }'.
Types of property 'valueOf' are incompatible.
Type '() => Object' is not assignable to type '() => number'.
Type 'Object' is not assignable to type 'number'. TS2345
It's clear that d3.pie().value() requires a specific format of input data, hence the compilation error. Is there a way to override this behavior within TypeScript or am I missing something essential while working with D3's library functions?