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

While using will work to avoid compilation errors, it defeats the purpose of having type checking in the first place. After much trial and error and quality time with the d3.d.ts definition for the Arc layout, I figured out how to make the types line up:

function draw() {

    let arc = d3.svg.arc>()
        .innerRadius(this.radius - this.donutWidth)
        .outerRadius(this.radius);

    let pie = d3.layout.pie().sort(null);

    let tfx = (d: d3.layout.pie.Arc): string => `translate(${arc.centroid(d)})`);

    // create a group for the pie chart
    let g = this.chart.selectAll('g')
        .data(pie(this.dataset.map(n => n.count)))
        .enter().append('g');

    // add pie sections
    g.append('path').attr('d', arc);

    // add labels
    g.append('text').attr('transform', tfx).text(d => d.data.label);
}

In addition to the original question, I've also shown how to add labels to a pie chart and maintain the strong typing of Typescript. Note that this implementation takes advantage of the alternate constructor d3.svg.arc(): Arc that allows you to specify a type for the arc sections.

Update

The above code assumes that the data being passed is an array of numbers. If you look at the code though (in particular the accessors n => n.count and d => d.data.label), it is clearly not. Those accessors also have an implicit any type, i.e. (n: any) => n.count. This could possibly throw a runtime error if the n happens to be an object without a count property. Here's a rewrite that makes the shape of the data more explicit:

interface Datum {
    label: string;
    count: number;
}

function draw() {

    // specify Datum as shape of data
    let arc = d3.svg.arc>()
        .innerRadius(this.radius - this.donutWidth)
        .outerRadius(this.radius);

    // notice accessor receives d of type Datum
    let pie = d3.layout.pie().sort(null).value((d: Datum):number => d.count);

    // note input to all .attr() and .text() functions
    // will be of type d3.layout.pie.Arc
    let tfx  = (d: d3.layout.pie.Arc): string => `translate(${arc.centroid(d)})`;
    let text = (d: d3.layout.pie.Arc): string => d.data.category;

    // create a group for the pie chart
    let g = this.chart.selectAll('g')
        .data(pie(data))
        .enter().append('g');

    // add pie sections
    g.append('path').attr('d', arc);

    // add labels
    g.append('text').attr('transform', tfx).text(text);
}

In this second version, there are no longer any implicit any types. Another thing to note is that the name of the interface, Datum, is arbitrary. You could name that interface anything you wanted to, but would just have to be careful to change all references to Datum to whatever more appropriate name you chose.