属性“值”在类型“数字”上不存在

时间:2019-04-23 14:40:14

标签: d3.js angular7

我正在尝试在d3和Angular中生成一个甜甜圈图。我有以下组件:

import { Component } from '@angular/core';
import * as d3 from "d3";


@Component({
  selector: 'app-report',
  templateUrl: './report.component.html',
  styleUrls: ['./report.component.css']
})
export class ReportComponent {

  width = 155
  height = 155
  margin = 10
  radius;
  svg;
  color;
  pie;
  data_ready;

  // Create dummy data
  public data = { a: 10, b: 90 }

  constructor() { }

  ngOnInit() {

    this.draw();

  }

  draw() {

    this.radius = Math.min(this.width, this.height) / 2 - this.margin

    this.svg = d3.select(".d3-chart")
      .append("svg")
      .attr("width", '100%')
      .attr("height", '100%')
      .append("g")
      .attr("transform", "translate(100,80)");

    // set the color scale
    this.color = d3.scaleOrdinal()
      .domain(Object.keys(this.data))
      .range(["red", "green"]);

    // This line shows a typescript error when serving the application. 
    // Property 'value' does not   
    // exist on type 'number | { valueOf(): number; }'.
    // Property 'value' does not exist on type 'number'.ts(2339)

    this.pie = d3.pie()
      .value(function (d) { return d.value; })

    this.data_ready = this.pie(d3.entries(this.data))

    this.svg
      .selectAll('whatever')
      .data(this.data_ready)
      .enter()
      .append('path')
      .attr('d', d3.arc()
        .innerRadius(60)         // This is the size of the donut hole
        .outerRadius(this.radius))
      .attr('fill',(d) => { return (this.color(d.data.key)) })
      .attr("stroke", "white")
      .style("stroke-width", "1px")
      .style("opacity", 0.7)

    this.svg.append("text")
        .attr("text-anchor", "middle")
        .text("90%");
  }
}

我看到以下错误:

// This line shows a typescript error when serving the application. 
// Property 'value' does not   
// exist on type 'number | { valueOf(): number; }'.
// Property 'value' does not exist on type 'number'.ts(2339)

        this.pie = d3.pie()
          .value(function (d) { return d.value; })

我该如何解决?

0 个答案:

没有答案