使用d3js和angular2创建带有标签的动态甜甜圈图？

Question

Dynamic Donut chart

我想使用D3.Js和角度创建一个动态甜甜圈图，如图所示。所有颜色都应根据值动态移动，这些标签也应随指针一起移动。我已经尝试过了，但是标签和颜色没有动态变化，标签也没有在IE上显示。

这是我的组件（TS）文件：

import { Component,OnInit } from '@angular/core';
import * as d3 from 'd3';
@Component({
  selector: 'my-app',
  templateUrl: 'app.component.html',
})
export class AppComponent implements OnInit  {

visible:boolean;

ngOnInit(){

  this.visible = false;
this.renderDonut();
}

 openModal(){  
  this.visible = true;
}
closeModal(){
 this.visible = false;
}
renderDonut(){
var data = [{ 
  color: "#00627d",
  percentage: 25,
  label: '1,250$'
}, {
  color: "#179bbf",
  percentage: 10,
  label: '2,250$'
}, {
  color: "#d2d7dd",
  percentage: 30,
  label: '5,000$'
}, {
  color: "transparent",
  percentage: 20
}];

var width = 460,
  height = 300,
  radius = Math.min(width, height) / 2;

var color = d3.scale.category20();

var pie = d3.layout.pie()
  .sort(null).value(function(d, i) {
    return d.percentage;
  });

var arc1 = d3.svg.arc()
  .innerRadius(radius - 28)
  .outerRadius(radius - 27);

var arc = d3.svg.arc()
  .innerRadius(radius - 20)
  .outerRadius(radius - 10)
  .cornerRadius(radius);

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

 var pieData = pie(data); 

 var g = svg.selectAll(".arc")
    .data(pie(data))
    .enter().append("g")
    .attr("class", "arc");

var labels = g.append('g').classed('labels', true);

var path = svg.selectAll(".background")
  .data(pie([{
    color: "gray",
    percentage: 1
  }]))
  .enter().append("path")
  .attr("class", "background")
  .attr("fill", function(d, i) {
    return d.data.color;
  })
  .attr("d", arc1);


var path = svg.selectAll(".foreground")
  .data(pie(data))
  .enter().append("path")
  .attr("class", "foreground")
  .attr("stroke-linejoin", "round")
  .attr("stroke-linecap", "round")
  .attr("stroke-width", "20")
  .attr("stroke","none")
  .attr("stroke", function(d, i) {
    return d.data.color;
  })
  .attr("fill", "none")
  .attr({
         d:arc,
         transform:'rotate(-145)'
        });


svg.append("text")
  .text("2,500 $")
  .style('font-size', '1.6rem') 
  .attr("class", "units-label")
  .attr("x", radius/15 -35)
  .attr("y", radius/12)
  .on("click",(data) => {
    this.openModal();
  });


//Labelling adding Text 

labels.selectAll("text").data(pieData)
    .enter()
    .append("text")
     .attr("dy", function(d) {
            return (d.endAngle > 90 * Math.PI/180 ? 18 : -5);
    })
     .attr("dx", function(d) {
        return (d.startAngle < 90 * Math.PI/180 ? 50 : -80);
    })
    .attr("text-anchor", "start")
    .attr("x", function(d) {
        var a = d.startAngle + (d.endAngle - d.startAngle)/2 - Math.PI/2;
        d.cx = Math.cos(a) * (radius - 20);
        return d.x = Math.cos(a) * (radius + 10);
    })
    .attr("y", function(d) {
        var a = d.startAngle + (d.endAngle - d.startAngle)/2 - Math.PI/2;
        d.cy = Math.sin(a) * (radius - 20);
        return d.y = Math.sin(a) * (radius + 10);
    })
    .text(function(d, i) { return d.data.label; })
    .attr("fill", function(d, i) {
    return d.data.color;
  })
    .each(function(d) {
        var bbox = this.getBBox();
        d.sx = d.x - bbox.width/2 - 2;
        d.ox = d.x + bbox.width/2 + 2;
        d.sy = d.oy = d.y + 5;
    });

svg.append("defs").append("marker")
    .attr("id", "circ")
    .style("fill", "179bbf")
    .attr("markerWidth", 20)
    .attr("markerHeight", 20)
    .attr("refX", 10)
    .attr("refY", 10)
    .append("circle")
    .attr("cx", 9)
    .attr("cy", 9)
    .attr("r", 9);

labels.selectAll("path.pointer").data(pieData).enter()
    .append("path")
    .attr("class", "pointer")
    .style("fill", "none")
    .style("stroke", "179bbf")
    .attr("marker-start", "url(#circ)")
    .attr("d", function(d, i) {
      if( d.data.color != "transparent"){

        if (d.data.color == "#00627d") 
        {
         return "M" + d.ox + "," + d.sy + "M" + d.ox + "," + d.oy +" " + d.cx + "," + d.cy;
    } else if (d.data.color == "#179bbf")
     {
        return "M" + d.ox + "," + d.sy + "L" + d.ox + "," + d.oy + " " + d.cx + "," + d.cy;

    } else if(d.data.color == "#d2d7dd")
     {
        return "M" + d.sx + "," + d.sy + "L" + d.sx + "," + d.sy + "   " + d.cx + "," + d.cy;
    }
    }
    });
} 
}

这是Stackblitz链接： https://stackblitz.com/edit/d3-variable-arc-chart-dewf7u?file=src%2Fapp%2Fapp.component.html