Javascript 将边界半径属性添加到D3js圆环图

我现在在AngularJS应用程序中使用这个甜甜圈图表：

但是设计模型说，我们希望这样，请注意圆弧绿色部分的边界半径属性：

如何向d3js输出的SVG添加边界半径，我当前使用的代码如下所示：

let data = [
    {
        label: 'Data',
        count: scope.data
    },
    {
        label: 'Fill',
        count: 100 - scope.data
    }
];

let width = 60;
let height = 60;
let radius = Math.min(width, height) / 2;
let color = d3.scale
    .ordinal()
    .range(['#3CC692', '#F3F3F4']);
let selector = '#donut-asset-' + scope.chartId;

d3
    .select(selector)
    .selectAll('*')
    .remove();

let svg = d3
    .selectAll(selector)
    .append('svg')
    .attr('width', width)
    .attr('height', height)
    .append('g')
    .attr(
        'transform',
        'translate(' + width / 2 + ',' + height / 2 + ')'
    );
let arc = d3.svg
    .arc()
    .innerRadius(23)
    .outerRadius(radius);
let pie = d3.layout
    .pie()
    .value(function(d) {
        return d.count;
    })
    .sort(null);
let path = svg
    .selectAll('path')
    .data(pie(data))
    .enter()
    .append('path')
    .attr('d', arc)
    .attr('fill', function(d, i) {
        return color(d.data.label);
    });
let legend = svg
    .selectAll('.legend')
    .data(data)
    .enter()
    .append('g')
    .attr('class', 'legend')
    .attr('transform', function(d, i) {
        return 'translate(' + 0 + ',' + 0 + ')';
    });
legend
    .append('text')
    .attr('x', 1)
    .attr('y', 1)
    .attr('text-anchor', 'middle')
    .attr('dominant-baseline', 'central')
    .text(function(d) {
        return d.count + '%';
    });

})

---

我知道如何使用，但当我这样做时，它会为两个圆弧设置一个半径，它只需要存在于彩色的圆弧上。有什么想法吗？提前感谢您的帮助

尝试使用笔划属性，如：

• 笔划
• 行程缓冲器阵列
• 行程偏移
• 笔划线头
• 笔划线条连接
• 笔划斜接限制
• 笔划不透明度
• 笔划宽度

并将条的宽度设置为较低的值或0

参考：

---

但更好的方法是在画布上绘制图表，因为你可以画出你想要的任何东西。或使用库。

您可以将圆角半径应用于d3圆弧，该圆弧允许圆角：

let arc = d3.svg
    .arc()
    .innerRadius(23)
    .outerRadius(radius)
    .cornderRadius(10);

但是，缺点是所有圆弧的边界都是圆的：

如果仅将拐角半径应用于变暗的圆弧，则其他圆弧将不会填充圆角后面的背景。相反，我们可以附加一个圆弧（完整的甜甜圈）并将变暗的圆弧放在带圆角的顶部（我的示例没有修改您的代码，只是展示了如何实现这一点，d3v4也使用了

d3.arc（）

，而不是

d3.svg.arc（）

）：

var backgroundArc=d3.arc（）
.内半径（30）
.外层（50）
.startAngle（0）
.端角（数学PI*2）；
var mainArc=d3.arc（）
.内半径（30）
.外层（50）
.转弯半径（10）
.startAngle（0）
.endAngle（函数（d）{return d/100*Math.PI*2}）；
var数据=[10,20,30,40,50]//百分比。
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，600）
.attr（“高度”，200）；
var charts=svg.selectAll（“g”）
.数据（数据）
.输入（）
.附加（“g”）
.attr（“变换”，函数（d，i）{
返回“translate（“+（i*100+50）+”，100）”；
});
charts.append（“路径”）
.attr（“d”，背景弧）
.attr（“填充”、“ccc”）
charts.append（“路径”）
.attr（“d”，主弧）
.attr（“填充”、“橙色”）

---

我正在使用一个库，它是d3js。这是实现您目标的错误选择。试试另一个。或者尝试手动操作，这很简单。但首先试试我的建议，在说“先检查好，明白”之前，我不认为你能在这样一条封闭的道路上划一杆，所以我必须分开圆弧，只给彩色的一个角半径。这可能是最直接的-否则你需要修改灰色圆弧的起始角和结束角，以便它可以覆盖圆角部分，再加上饼图布局中可能存在分层问题。