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

    private chart: d3.Selection<string>;
    private width: number;
    private height: number;
    private radius: number;
    private donutWidth: number;
    private dataset: { label: string,count: number }[];
    private color: d3.scale.Ordinal<string,string>;

    constructor(container: any) {
      this.width = 360;
      this.height = 360;
      this.radius = Math.min(this.width,this.height) / 2;
      this.donutWidth = 75;

      this.dataset = [
        { label: 'Road',count: 5500 },{ label: 'Bridge',count: 8800 },{ label: 'Tunnel',count: 225 },];

      this.color = d3.scale.category10();

      this.init(container);

    }

    private init(container) {
      this.chart = d3.select(container).append('svg')
        .attr('width',this.width)
        .attr('height',this.height)
        .append('g')
        .attr('transform','translate(' + (this.width / 2) +
        ',' + (this.height / 2) + ')');
    }

    draw() {

      var arc = d3.svg.arc()
        .innerRadius(this.radius - this.donutWidth)  // NEW
        .outerRadius(this.radius);

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

      var path = this.chart.selectAll('path')
        .data(pie(this.dataset.map(function(n) {
          return n.count;
        })))
        .enter()
        .append('path')
        .attr('d',arc)
        .attr('fill',function(d,i) {
          return Math.random();
        });
    }

  }
}

代码不会与错误一起编译：

Argument of type 'Arc<Arc>' is not assignable to parameter of type '(datum: Arc<number>,index: number,outerIndex: number) => string | number | boolean'.
>>   Types of parameters 'd' and 'datum' are incompatible.
>>     Type 'Arc' is not assignable to type 'Arc<number>'.
>>       Property 'value' is missing in type 'Arc'.

当我尝试将d属性添加到我的svg上的每个路径元素时,出现编译错误：

var path = this.chart.selectAll('path')
        .data(pie(this.dataset.map(function(n) {
          return n.count;
        })))
        .enter()
        .append('path')
        .attr('d',i) {
          return Math.random();
        });

根据文档,弧是“既是对象又是函数”.我看到我可以通过调用arc(datum [,index])来访问它,例如只需要对arc [0]进行硬编码.当我这样做时,我的编译错误消失但是svg中每个路径元素的d属性都丢失了,我最终得到了一个像svg：

<svg height="360" width="360">
      <g transform="translate(180,180)">
         <path fill="0.35327279710072423"></path>
         <path fill="0.6333000506884181"></path>
         <path fill="0.9358429045830001"></path>
      </g>
    </svg>

我已经将代码作为纯JavaScript运行而没有任何问题.