Javascript 如何在D3中对齐文本和标签

我正在尝试制作一个如下所示的自定义SVG

到目前为止，我已经得到了这个

所有的数据都是动态的，所以我试图找出如何使用半径来设置x/y轴。我有一个例子

const w=400，
h=400，
r=160；
常量流=[{
标签：“排放量”，
是的，
雅克西斯：-40
}, {
标签：“生产能源”，
选：错，
雅克西斯：-20
}, {
标签：“能源消耗”，
选：错，
雅克斯：0
}, {
标签：“强度”，
选：错，
雅克斯：20
}]
常量子_流=[{
数值：0.15，
标签：“总计”，
是的
}, {
数值：0.2，
标签：“二氧化碳”，
结果：错
}, {
数值：0.25，
标签：“甲烷”，
结果：错
}, {
数值：0.30，
标签：“N2O”，
结果：错
}, {
数值：0.35，
标签：‘其他’，
结果：错
}];
const svg=d3。选择（“foo”）
.append（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
常量g=svg.append（“g”）
.attr（“转换”、“转换”（+[w/2，h/2]+））；
g、 附加（“圆圈”）
.attr（“r”，r）
.style（“填充”、“无”）
.风格（“笔划”、“黑色”）；
常量点=g.selectAll（空）
.数据（子流）
.输入（）
.附加（“圆圈”）
.attr（'stroke'，'dodgerblue'）
.attr（'笔划宽度'，1）
.样式（“填充”，功能（d）{
返回d.isSelected？'dodgerblue'：'white'
})
.attr（“r”，12）
.attr（“cx”，功能（d）{
返回r*Math.cos（d.value*Math.PI*2-Math.PI/2）
})
.attr（“cy”，函数（d）{
返回r*Math.sin（d.value*Math.PI*2-Math.PI/2）
})
点击按钮，功能（d）{
控制台日志（d）
})
g、 selectAll（空）
.数据（子流）
.输入（）
.append（'文本'）
.style（'光标'，'指针'）
.style（'填充'，'黑色'）
.attr（'text-anchor'，'right'）
.attr（'font-size'，'1.3em'）
.attr（'dx'，（d）=>r*Math.cos（d.value*Math.PI*2-Math.PI/2））
.attr（'dy'，（d）=>r*Math.sin（d.value*Math.PI*2-Math.PI/2））
.text（（d）=>d.label）
常量文本=g
.selectAll（'路径'）
.数据（流）
.输入（）
.append（“文本”）
.attr（“文本锚定”、“左”）
.attr（'font-size'，'1em'）
.attr（“y”，函数（d，a）{
返回d.yAxis
})
.文本（（d）=>d.标签）；
文本。在（“单击”时，功能（d）{
控制台日志（d）
})
var arc=d3.symbol（）.type（d3.symbolTriangle）
var line=g.selectAll（'path'）
.数据（流）
.输入（）
.append（'路径'）
.attr（'d'，弧）
.attr（'fill'，'red'）
.attr（'stroke'，'#000'）
.attr（'笔划宽度'，1）
.attr（'transform'，函数（d）{
返回`translate（-10，${d.yAxis-5}）rotate（210）`；
});
相应地设置
主基线（例如，
中心
），并按圆圈大小移动文本，再加上一点填充

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


const w=500，
h=400，
r=160；
常量流=[{
标签：“排放量”，
是的，
雅克西斯：-40
}, {
标签：“生产能源”，
选：错，
雅克西斯：-20
}, {
标签：“能源消耗”，
选：错，
雅克斯：0
}, {
标签：“强度”，
选：错，
雅克斯：20
}]
常量子_流=[{
数值：0.15，
标签：“总计”，
是的
}, {
数值：0.2，
标签：“二氧化碳”，
结果：错
}, {
数值：0.25，
标签：“甲烷”，
结果：错
}, {
数值：0.30，
标签：“N2O”，
结果：错
}, {
数值：0.35，
标签：‘其他’，
结果：错
}];
const svg=d3。选择（“foo”）
.append（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
常量g=svg.append（“g”）
.attr（“转换”、“转换”（+[w/2，h/2]+））；
g、 附加（“圆圈”）
.attr（“r”，r）
.style（“填充”、“无”）
.风格（“笔划”、“黑色”）；
常量点=g.selectAll（空）
.数据（子流）
.输入（）
.附加（“圆圈”）
.attr（'stroke'，'dodgerblue'）
.attr（'笔划宽度'，1）
.样式（“填充”，功能（d）{
返回d.isSelected？'dodgerblue'：'white'
})
.attr（“r”，12）
.attr（“cx”，功能（d）{
返回r*Math.cos（d.value*Math.PI*2-Math.PI/2）
})
.attr（“cy”，函数（d）{
返回r*Math.sin（d.value*Math.PI*2-Math.PI/2）
})
点击按钮，功能（d）{
控制台日志（d）
})
g、 selectAll（空）
.数据（子流）
.输入（）
.append（'文本'）
.style（'光标'，'指针'）
.style（'填充'，'黑色'）
.attr（'text-anchor'，'right'）
.attr（'font-size'，'1.3em'）
.attr（'dx'，（d）=>14+r*Math.cos（d.value*Math.PI*2-Math.PI/2））
.attr（'dy'，（d）=>r*Math.sin（d.value*Math.PI*2-Math.PI/2））
.text（（d）=>d.label）
常量文本=g
.selectAll（'路径'）
.数据（流）
.输入（）
.append（“文本”）
.attr（“文本锚定”、“左”）
.attr（'font-size'，'1em'）
.attr（“y”，函数（d，a）{
返回d.yAxis-5
})
.文本（（d）=>d.标签）；
文本。在（“单击”时，功能（d）{
控制台日志（d）
})
var arc=d3.symbol（）.type（d3.symbolTriangle）
var line=g.selectAll（'path'）
.数据（流）
.输入（）
.append（'路径'）
.attr（'d'，弧）
.attr（'fill'，'red'）
.attr（'stroke'，'#000'）
.attr（'笔划宽度'，1）
.attr（'transform'，函数（d）{
返回`translate（-10，${d.yAxis-5}）rotate（210）`；
});
文本{
优势基线：中心；
}

太棒了！有没有一种方法可以使用半径或其他东西来动态设置yAxis？@texas697我不知道你在问什么，你能解释得更清楚些吗？顺便说一下，在
文本锚定
中没有
右
或
左
。圆圈内的列表。你可以在硬编码的数组流中看到-40，-20，0，20。这能做得更好吗？该数组将是动态的，有时会有2个、4个或5个以上的列表项。我希望他们是centered@texas697我懂了。一个简单的解决方案是根据索引向下转换包含文本和符号的组，根据中心点向上转换数组长度。为了得到一个合适的答案，我建议你把这个问题作为一个新的问题发布。行！谢谢你的帮助