Javascript 将有角度的D3甜甜圈分成两部分

我使用Angular和D3显示圆环图，请参见plunker：

从上面可以看到，在指令mark up中，我传递了一个参数，表示甜甜圈应该填充多少：percent=“80”

我怎样才能修改它来显示80%的，20%的，比如说不同的颜色或图案

例如：

app.directive（'myDirective'，function（）{
返回{
限制：'E'，
范围：{
半径：'='，
百分比：“=”，
文本：“=”，
},
链接：函数（范围、元素、属性）{
变量半径=范围半径，
百分比=范围百分比，
percentLabel=scope.text，
格式=d3.格式（“.0%”），
进度=0；
var svg=d3.select（元素[0]）
.append（'svg'）
.style（'width'，radius/2+'px'）
.样式（“高度”，半径/2+“px”）；
var donutScale=d3.scale.linear（）
.domain（[01100]）
.range（[0,2*Math.PI]）；
var color=“红色”；
风险值数据=[
[0100，#b8b5b8”]，
[0,0，颜色]
];
var arc=d3.svg.arc（）
.内半径（半径/6）
.外部（半径/4）
.startAngle（函数（d）{return donutScale（d[0]）；}）
.endAngle（函数（d）{return donutScale（d[1]）；}）；
var text=svg.append（“文本”）
.attr（“x”，半径/4）
.attr（“y”，半径/4）
.attr（“dy”，“.35em”）
.attr（“文本锚定”、“中间”）
.attr（“字体大小”、“14px”）
.样式（“填充”、“白色”）
.attr（“文本锚定”、“中间”）
.文本（百分比标签）；
var path=svg.selectAll（“路径”）
.数据（数据）
.输入（）
.append（“路径”）
.style（“fill”，函数（d）{返回d[2]；}）
.attr（“d”，弧）
.每个功能（d）{
这是。_电流=d；
//console.log（此.\u当前）
});
//更新数据！
数据=[
[0100，#b8b5b8”]，
[0，百分比，颜色]
];
路径
.数据（数据）
.attr（“变换”、“平移”（“+radius/4+”，“+radius/4+”）
.过渡（200）.持续时间（2150）.缓和（“线性”）
.attrTween（“d”，函数（a）{
var i=d3.内插（该电流为a）；
var i2=d3.插值（进度，百分比）
该电流=i（0）；
//console.log（这个是当前的）；
返回函数（t）{
文本（格式（i2（t）/100））；
返回弧（i（t））；
};
});
}
};
});

<my-directive radius="250" percent="80" pending="20" text="hello"></my-directive>

app.directive('myDirective', function() {
    return {
        restrict: 'E',
        scope: {
            radius: '=',
            percent: '=',
            text: '=',
        },
        link: function(scope, element, attrs) {
            var radius = scope.radius,
                percent = scope.percent,
                percentLabel = scope.text,
                format = d3.format(".0%"),
                progress = 0;

            var svg = d3.select(element[0])
                .append('svg')
                .style('width', radius/2+'px')
                .style('height', radius/2+'px');

            var donutScale = d3.scale.linear()
                .domain([0, 100])
                .range([0, 2 * Math.PI]);

            var color = "red";

            var data = [
                [0,100,"#b8b5b8"],
                [0,0,color]
            ];

            var arc = d3.svg.arc()
                .innerRadius(radius/6)
                .outerRadius(radius/4)
                .startAngle(function(d){return donutScale(d[0]);})
                .endAngle(function(d){return donutScale(d[1]);});

            var text = svg.append("text")
                .attr("x",radius/4)
                .attr("y",radius/4)
                .attr("dy", ".35em")
                .attr("text-anchor", "middle")
                .attr("font-size","14px")
                .style("fill","white")
                .attr("text-anchor", "middle")
                .text(percentLabel);

            var path = svg.selectAll("path")
                .data(data)
                .enter()
                .append("path")
                .style("fill", function(d){return d[2];})
                .attr("d", arc)
                .each(function(d) {
                    this._current = d;
                    // console.log(this._current)
                });

            // update the data!
            data = [
                [0,100,"#b8b5b8"],
                [0,percent,color]
            ];

            path
                .data(data)
                .attr("transform", "translate("+radius/4+","+radius/4+")")
                .transition(200).duration(2150).ease('linear')
                .attrTween("d", function (a) {
                    var i  = d3.interpolate(this._current, a);
                    var i2 = d3.interpolate(progress, percent)
                    this._current = i(0);
                    // console.log(this._current);
                    return function(t) {
                        text.text( format(i2(t) / 100) );
                        return arc(i(t));
                    };
                });
        }
    };
});