Compilation errors when drawing a piechart using d3.js and TypeScript

Question

I am attempting to draw a pie chart using the d3.js library and TypeScript. I have the following code:

\"use strict\";
module Chart {
  export class chart {

            


        

Answer 1

Came here because I had the same problem with D3 v5!

Solution: Use the PieArcDatum interface (Very strange name in my opinion!!!)

Details:

import { PieArcDatum } from 'd3-shape';

... 

type Population = { time: string, population: number; };

...

const svg = element.append("g")
    .attr("transform", `translate(${300}, ${160})`)
;

const pie = d3.pie()
    .sort(null)
    .value((record) => record.population);

const path = d3.arc>()
    .innerRadius(0)
    .outerRadius(150)
;

// Beim selectAll kommt eine leere Selection zurück da es noch keinen Circle gibt
const data = pie(worldPopulation);
const arch = svg.selectAll(".arc")
    .data(data)
    .enter()
    .append("g")
        .attr("class", "arc")
;

arch.append('path')
    .attr("d", path)
;

Sidenote: I'm using WebStorm, WS was not able to find (autoimport) PieArcDatum - I had to import it manually...