时间戳

首页 > 解决方案 > 如何告诉 d3js 这个半圆环图应该从左到右填充值

javascript - 如何告诉 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);
            };

提前致谢。

标签： javascriptd3.jschartsdonut-chart

解决方案

计算相对于 startAngle 的 endAngle

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

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

推荐阅读