Javascript D3中的标签和分界线

下面是我用基本的D3饼图制作的小提琴。我是D3新手，不知道如何做几件事。首先，我想更正标签。如您所见，“正确”标签当前正在从图形边缘飞出。但我不知道如何解决这个问题

其次，我想在图形周围和数据片之间添加一条黑线，以提供绿色和红色的对比度。如果你对如何做这两件事有任何想法，我将不胜感激。谢谢

JS:

---

为了定位文本，不要创建具有不同外半径和内半径的新电弧发生器。只需使用与路径相同的圆弧生成器：

g.append('text').attr("text-anchor", "middle")
    .attr('transform', function(d) {
        return 'translate(' + arc.centroid(d) + ')';
        //same generator ------^
    })
    .text(function(d) {
        return d.data.name;
    })
    .style('fill', '#FFF')

要添加“黑线”，只需设置路径笔划：

.style("stroke", "black");

以下是您的代码和这些更改：

let不正确=3
让我们更正=2
让数据=[{
“name”：“Correct”，
“点”：正确
}, {
'名称'：'不正确'，
“点”：不正确
}];
让宽度=400，
高度=400，
半径=数学最小值（宽度、高度）/2；
设color=d3.scaleOrdinal（）.range（['#15B61F'，'#DA1821']）；
设pie=d3.pie（）.value（函数（d）{
返回d点；
})（数据）；
设弧=d3.arc（）.outerRadius（半径-10）。innerRadius（0）；
让svg=d3.select（'body'）。append（'svg'）。style（'display'，'block'）。style（'margin'，'0 auto'）。attr（'width'，width'）。attr（'height'，height）。append（'g'）。attr（'transform'，'translate（'+width/2+'，'+height/2+'））））。attr（'class'，'float center'）；
设g=svg.selectAll（'arc'）.data（pie）.enter（）.append（'g'）.attr（'class'，'arc'）；
g、 追加（'path'）.attr（'d'，arc.）.style（'fill'，function（d）{
返回颜色（d.data.name）
}).style（“笔划”、“黑色”）
g、 append（'text'）.attr（“文本锚定”，“中间”）
.attr（'transform'，函数（d）{
返回“translate”（'+弧形心（d）+'）；
}).文本（功能（d）{
返回d.data.name；
}).style（'fill'，'FFF'）

.style("stroke", "black");