Как построить простую кольцевую диаграмму, используя D3js и Angular 7

Question

Я создаю кольцевую диаграмму в Angular, используя D3.js v5.Все остальные простые графики, такие как гистограмма, круги, линии и т. Д., Работают правильно, но функция pie () выдает некоторую ошибку.Может кто-нибудь предложить мне, как правильно использовать функцию pie () в Angular?

Я получаю ошибки в нижеприведенных сценариях.

1. в то время какнастройка цветового домена, он не принимает данные, говорит, что ему нужно ReadOnlyArray<String>, поэтому попытался дать жестко закодированный домен ["a","b","c","d","e"]

2. pie() -> не принимаетзначения, не знаю почему, много пробовал здесь.

3. this.color(d.data.key)) -> this.color не принимает данные доступа и ключ.

Нужно решить все вышеперечисленные проблемы.

код выглядит следующим образом:

export class DonutChartComponent implements OnInit {

    width = 450
    height = 450
    margin = 40
    radius;
    svg;
    color;
    pie;
    data_ready;

    // Create dummy data
    public data = {a: 9, b: 20, c:30, d:8, e:12}


    constructor() { }

    ngOnInit() {

    this.draw();

    }


     draw(){

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


     this.svg = d3.select("app-donut-chart")
               .append("svg")
               .attr("width", this.width)
               .attr("height", this.height)
               .append("g")
               .attr("transform", "translate(" + this.width / 2 + "," + 
                this.height / 2 + ")");



     // set the color scale
     this.color = d3.scaleOrdinal()
            .domain(this.data)             // this.data gives error here
           .range(d3.schemeDark2);

     console.log(d3.scaleOrdinal());

     // Compute the position of each group on the pie:
     this.pie = d3.pie()
               .value(function(d) {return  d.values});     //error here
     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(100)         // This is the size of the donut hole
     .outerRadius(this.radius))
     .attr('fill', function(d){ return(this.color(d.data.key)) })  
                                                           //error here
     .attr("stroke", "black")
     .style("stroke-width", "2px")
     .style("opacity", 0.7)
    }
}

Iожидать, что если код работает правильно, я вижу диаграмму пончик на основе данных.

Answer 1

Пара вещей неправильная:

1. Ваша цветовая шкала .domain ожидает список строк.Изменить на:

   .domain(Object.keys(this.data))

2. Ваш круговой генератор должен быть определен как:

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

Теперь это работает .