使用d3.js和TypeScript绘制饼图时出现编译错误 [英] Compilation errors when drawing a piechart using d3.js and TypeScript

问题描述

我正在尝试使用d3.js库和TypeScript绘制饼图.我有以下代码:

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 {

    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();
        });
    }

  }
}

代码无法编译并显示错误:

The code does not compile with the error:

 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'.   

当我尝试向svg上的每个path元素添加d属性时，出现编译错误:

The compilation error is showing up when I try to add the d attribute to each of the path elements on my svg:

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();
        });

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

According to the documentation an arc is "is both an object and a function." and I see that I can access it by calling arc(datum[, index]), by just hardcoding arc[0] for example. When I do this my compilation error goes away but the d attribute of each path element in the svg is missing and I end up with an svg like:

    <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运行，没有问题.

I've had the code running as pure JavaScript with no problems.

推荐答案

尝试替换

.attr('d', arc)   

使用

.attr('d', <any>arc)  

这会在我的计算机上隐藏编译器错误，但是如果该错误确实有效...那么，我不知道.

This hides the compiler error on my computer but if that actually work... Well, I don't know.

我对问题的理解是，您为.data函数提供了number值，并且TypeScript编译器期望.attr还将包含数字，但您提供的是arc.

My understanding of the problem is that you provide .data function with number values and TypeScript compiler expects that .attr will contain also a number but you provide an arc instead.

这篇关于使用d3.js和TypeScript绘制饼图时出现编译错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！