用d3实现不规则环形图

HTML代码块

<svg viewBox="0 0 400 350" id="svgPie"></svg>
<div class="toltip" *ngIf="isShow">
  <img src="/assets/img/xuanfu.png" (click)="closeTolTip()" alt="">
</div>

CSS代码块

svg {
   
  width: 98%;
  height: auto;
}

.toltip {
   
  position: absolute;
  right: 0;
  left: 0;
  top: 8%;
  text-align: center;
  display: none;
}

.toltip img {
   
  width: 42%;
  margin-left: 15%;
}

ts代码块

import {
    Component, OnInit } from '@angular/core';
import {
    ActivatedRoute } from "@angular/router";
import {
    MorningPaperService } from '../../service/morning-paper.service';

declare var d3: any;
declare var $: any;

@Component({
   
  selector: 'app-app-pie',
  templateUrl: './app-pie.component.html',
  styleUrls: ['./app-pie.component.css']
})
export class AppPieComponent implements OnInit {
   
  customerId: any;
  accountId: any;
  publicGrade: any;
  responseDatas: any = [];
  hasdata: any = [];
  sugdata: any = [];
  sugDataList: any = [];
  hasDataList: any = [];
  allDataList: any = [];
  nameList: any = [];
  maxActualCoverage: any = [];
  sum: any = 0;
  ab: any = '';
  code: any;
  isShow: Boolean = true;

  constructor(private activatedRoute: ActivatedRoute, private morningPaperService: MorningPaperService) {
    }


  ngOnInit() {
   
    this.customerId = this.activatedRoute.snapshot.queryParamMap.get("customerId");
    this.accountId = this.activatedRoute.snapshot.queryParamMap.get("accountId");
    if (this.activatedRoute.snapshot.queryParamMap.get("publicGrade")) {
   
      this.publicGrade = this.activatedRoute.snapshot.queryParamMap.get("publicGrade");
    } else {
   
      this.publicGrade = 2;
    }
    this.policyChart();
    this.policyGuideShow();
  }

  policyChart() {
   

    this.morningPaperService.policyChart(this.customerId, this.accountId, this.publicGrade).subscribe(res => {
   
      if (res.responseBody) {
   
        this.responseDatas = res.responseBody;
        console.log(this.responseDatas);
      }
      for (let index = 0; index < this.responseDatas.length; index++) {
   
        this.sum += this.responseDatas[index].suggestCoverage;
      }
      this.responseDatas.forEach(element => {
   
        this.nameList.push(element.name);
        if (element.suggestCoverage == 0 && this.sum == 0) {
   
          this.sugdata.push(element.actualCoverage);
          this.sugDataList.push("");
          this.hasDataList.push(element.name + " " + element.actualCoverage);
          this.allDataList.push(element.actualCoverage);
        } else if (element.suggestCoverage == 0 || element.suggestCoverage == null && this.sum != 0) {
   
          this.sugdata.push(element.actualCoverage);
          this.sugDataList.push("建议" + element.name + " " + element.actualCoverage);
          this.hasDataList.push