如何告诉d3js这个半圆环图应该从左到右填充值

http://bl.ocks.org/mikeyao/1c5c69b562cc4dc915a7af157e9c967e 我已经有了一个完整的甜甜圈图表的代码,现在看起来是这样的:

如图所示,该值为零,但零不应占据图表的一半。我怎样才能从最左边的角落开始设置零呢?或者换句话说,我如何告诉d3js图表应该从左到右填充值。这是我的密码:

let initChart = function() {
                let width = 148;
                let height = 148;
                let radius = Math.min(width, height) / 2;
                let color = d3.scale.ordinal().range(scope.colors);
                let selector = '#half-donut-' + scope.section;
                let angle = 0.5 * Math.PI;
                let data = [
                    {
                        label: 'Data',
                        value: _data
                    }
                ];

                let backgroundArc = d3.svg
                    .arc()
                    .innerRadius(58)
                    .outerRadius(radius)
                    .cornerRadius(20)
                    .startAngle(angle * -1)
                    .endAngle(angle);

                let mainArc = d3.svg
                    .arc()
                    .innerRadius(58)
                    .outerRadius(radius)
                    .cornerRadius(20)
                    .startAngle(angle * -1)
                    .endAngle(function(d) {
                        return (d.value / 100) * angle;
                    });

                let svg = d3
                    .select(selector)
                    .append('svg')
                    .attr('width', width)
                    .attr('height', height);

                let charts = svg
                    .selectAll('g')
                    .data(data)
                    .enter()
                    .append('g')
                    .attr('transform', function() {
                        return (
                            'translate(' + width / 2 + ',' + height / 2 + ')'
                        );
                    });

                let legend = svg
                    .selectAll('.legend')
                    .data(data)
                    .enter()
                    .append('g')
                    .attr('class', 'legend')
                    .attr('transform', function() {
                        return 'translate(' + -21 + ',' + -21 + ')';
                    });
                legend
                    .append('text')
                    .attr('x', 22)
                    .attr('y', 12)
                    .attr('text-anchor', 'middle')
                    .attr(
                        'transform',
                        'translate(' + width / 2 + ',' + height / 2 + ')'
                    )
                    .text(function(d) {
                        return d.value + '%';
                    });
                charts
                    .append('path')
                    .attr('d', backgroundArc)
                    .attr('fill', '#F3F3F4');

                charts
                    .append('path')
                    .attr('d', mainArc)
                    .attr('fill', color);
            };

提前谢谢。