Javascript d3圆环图转换：translateY

我正在制作一个图表，其中显示了每种数据类型的百分比，如下所示：

但我复制代码时遇到问题，我创建的代码与前一个示例相同，但标题将它们放在百分比之上，我希望通过将它们放在第一个图像中的数字之上来解决问题，因为我的代码是这样的：

这是我发送来调用文本的代码，在示例中，它已经向我抛出了一个转换，但我想上传它，以便它保留为标题

svg
      .selectAll("allLabels")
      .data(name_ready)
      .enter()
      .append("text")
      .text(function (d) {
        console.log(d.data.key);
        return d.data.key;
      })
      
      .style("font-size", "1rem")
      .attr("transform", function (d) {
        var pos = outerArc.centroid(d);
        var midangle = d.startAngle + (d.endAngle - d.startAngle) / 2;
        pos[0] = radius * 0.99 * (midangle < Math.PI ? 1 : -1);
        return "translate(" + pos + ")";
      })
      .attr("class", "fontDonut")
      .style("text-anchor", function (d) {
        var midangle = d.startAngle + (d.endAngle - d.startAngle) / 2;
        return midangle < Math.PI ? "start" : "end";
      });

儿童

不要将这两个值视为单独的，而是将它们当作一个整体来使用。我使用了基本的三角学来找到中点的角度，就像你所做的那样，但是然后从中心画一条线，这样标签就与弧的中心对齐，所有标签与甜甜圈的距离都相同

然后，我不必摆弄标签，只需在顶部加上百分比，加上一个小的偏移量。请注意，

margin

仅适用于HTML，而不适用于SVG

//设置图形的尺寸和边距
var宽度=400；
var高度=250；
//pieplot的半径为宽度的一半或高度的一半（最小值）。我减去一点边距。
var半径=100；
//将svg对象附加到名为“my_dataviz”的div中
var svg=d3
.选择（“我的字符”）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
//创建虚拟数据
风险值数据={
//“已婚”：30岁，
“离婚”：30岁，
“单身”：40岁，
“单身2”：25
}
//设置颜色比例
var color=d3
.scaleOrdinal（[`C8DBFB`、`93B6F8`、`256EF1`、`darkblue`]）；
//计算每个组在饼图上的位置：
var pie=d3
.pie（）
.sort（null）//不按大小对组进行排序
.价值（功能（d）{
返回d值；
});
var data_ready=pie（d3.条目（数据））；
//电弧发生器
var arc=d3
.arc（）
.innerRadius（半径*0.6）//这是圆环孔的大小
.外层（半径*0.8）；
//另一个无法绘制的弧。仅用于标签定位
var outerArc=d3
.arc（）
.内半径（半径*0.9）
.外层（半径*0.9）；
//构建饼图：基本上，饼图的每个部分都是我们使用arc函数构建的路径。
svg
.selectAll（“路径”）
.数据（数据准备就绪）
.输入（）
.append（“路径”）
.attr（“d”，弧）
.attr（“填充”，功能（d）{
返回颜色（d.data.key）；
})
.样式（“不透明度”，0.7）；
//在图表和标签之间添加多段线：
const labelGroup=svg
.selectAll（“.labelGroup”）
.数据（数据准备就绪）
.输入（）
.附加（“g”）
.attr（“类”、“标签组”）
//转换整个组，而不是单个文本项
.attr（“转换”，函数（d）{
//获得角度
var midAngle=d.startAngle+（d.endAngle-d.startAngle）/2；
//定义半径
var textRadius=1.4*半径；
//使用三角学找到正确的位置
var x=数学sin（中间角）*文本半径；
变量y=-Math.cos（midAngle）*textRadius；
y=数学最小值（y，高度/2-20）；
返回“translate”（“+[x，y]+”）；
})
.style（“文本锚定”、“中间”）；
labelGroup
.append（“文本”）
.文本（功能（d）{
返回d.data.key；
})
.attr（“主要基线”、“悬挂”）
.attr（“dy”，5）
.style（“字体大小”、“2rem”）
.style（“字体大小”、“700”）；
labelGroup
.append（“文本”）
.文本（功能（d）{
返回d.data.value+“%”；
})
.attr（“dy”，-5）
.style（“字体大小”、“1rem”）

儿童

非常感谢，我对4的使用效果很好，但我有一个问题，当我留下3个数据时，有一个数据上升得很高，并且不明显，我如何修改它？我已更新了我的答案。我犯了一个错误，y坐标被翻转（忘记了负号）。我还使用
y=Math.min（y，height/2-20）
添加了偏移限制，其中20是基于标签高度的合理值。您可以通过在图形周围添加边距来最好地防止这种情况，以便在可用空间中始终至少有45个像素（标签的高度+百分比）。然后，
Math.min
将有所帮助