我正在尝试在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; })
我该如何解决?