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

Question

我有一个半个甜甜圈，我有点偏离 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);
            };

提前致谢。

Answer 1

计算相对于 startAngle 的 endAngle

.endAngle(function(d) { return -angle + (d.value / 100) * 2 * angle; });

或者使用示例中使用的pie方法

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

How to tell d3js that this half donut chart should fill values from left to right corner

javascript

charts

d3.js

donut-chart