使用 D3.js、TypeScript 和 Angular 绘制饼图时出现编译错误

Question

I am trying to display a pie chart and it's actually working, even though I get TypeScript compilation errors: Argument of type '(d: any) => {}' is not assignable to parameter of type 'datum: Arc<number>, index: number, outerIndex: number) => number | string | boolean'. Type '{}' is not assignable to type 'number | string | boolean'. Type '{}' is not assignable to type 'boolean'. Argument of type '(d: any) => {}' is not assignable to parameter of type 'datum: Arc<number>, index: number, outerIndex: number) => number | string | boolean'. Type '{}' is not assignable to type 'number | string | boolean'. Type '{}' is not assignable to type 'boolean'.

I've been using TypeScript for the last 2 years, but the line above makes me dizzy. I have no idea what is going on, I tried few things but nothing worked so far.

This is the code that actually draws the pie chart:

function drawChart(){
            var width = 960,
                height = 500,
                radius = Math.min(width, height) / 2;

            var colourValues = d3.scale.ordinal().range(d3.values(that.ColoursService.colours));

            var arc = d3.svg.arc()
                .outerRadius(radius - 10)
                .innerRadius(radius - 70);

            var pie = d3.layout.pie()
                .sort(null)
                .value(function(d: any) {return d.quantity});

            var svg = d3.select('.pie-chart').append('svg')
                .attr('width', width)
                .attr('height', height)
                .append('g')
                .attr('transform', 'translate(' + width / 2 + ',' + height/2 + ')');

            var g = svg.selectAll('.arc')
                .data(pie(data))
                .enter().append('g')
                .attr('class', 'arc');

            g.append('path')
                .attr('d', <any>arc)
                .attr('fill', function(d: any) {
                    return colourValues(d.data.category); 
                });
        }

This is where the typescript highlights the error, the squiggly line appears below "function" word. I need to make the TypeScript compilator pass, but I don't know how.

Answer 1

Although using <any> will get rid of compiler complaints, you are basically sidestepping strong type checking, which is arguably one of the main points of using Typescript in the first place. I struggled with this problem a long time, and finally, through trial and error and a lot of quality time with the d3.d.ts definition for d3.svg.arc , was able to come up with a way to make all of the types line up. Here is a solution that demonstrates how to get a pie chart without using <any> . The key is that you need to specify an interface that describes the shape of your input, ie your data:

interface Datum {
    category: string;
    quantity: number;
}

function drawChart(data: Array<Datum>) {

    let width = 960,
        height = 500,
        radius = Math.min(width, height) / 2,
        colourValues = d3.scale.category10();

    // specify Datum as shape of data
    let arc = d3.svg.arc<d3.layout.pie.Arc<Datum>>()
        .innerRadius(radius - 70)
        .outerRadius(radius - 10);

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

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

    let svg = d3.select('.pie-chart').append('svg')
        .attr('width', width)
        .attr('height', height)
        .append('g')
        .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');

    // create a group for the pie chart
    let g = svg.selectAll('.arc')
        .data(pie(data))
        .enter().append('g').attr('class', 'arc');

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

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

Note that I swapped out your ColourService for one of the standard d3 color category functions, but it should still work as long as colourValues() returns a string that specifies the fill color.

Hopefully this example shows how to get your custom data types to work with d3 and Typescript.

Answer 2

Alright I figured out what is happening, although I don't fully understand how D3 works with TypeScript. There are essentially two solutions:

First one, where I set specific interface on datum parameter and return values (either string, number or boolean) and then typecast the return value to string - it is too wordy.

g.append('path')
    .attr('d', <any>arc)
    .attr('fill', function (datum: d3.layout.pie.Arc<any>): number | string | boolean {
        return <string>colourValues(datum.data.category); 
  });

Second solution is easier on the eye. I only added :any as a return type from the function.

g.append('path')
    .attr('d', <any>arc)
    .attr('fill', function (d: any): any {
        return colourValues(d.data.category); 
    });

I still don't fully understand how to interface my data models I interact with in D3 - every time I try to use the interface that is already implemented in successful promise resolution via angular.IPromise<interfaceNameOfTheReturnData> in D3 functions wrapped inside angular directive's link function, I encounter TypeScript compilation errors and have to use any type.