Javascript 如何将标签添加到D3弦图组arc.centroid（）上的圆弧？

所以，最近我开始尝试使用。我已经成功地制作了一个工作和弦图

var parentSelector='#con1'
可变宽度='100vh'
变量高度='100vh'
var cssid='chord1'
var cssclass='svgChord'
变量标签=['a'，'b'，'c'，'d'，'e']
var数据=[[11,21,31,41,51]，[12,22,32,42,52]，[13,23,33,43,53]，[14,24,34,44,54]，[15,25,35,45,55]]
变量颜色=['#ddffdd'、'#fd8b43'、'#00922c'、'#ffffff'、'#F0d064']
var getWidth=function（）{return document.querySelector（'#'+cssid+'.+cssclass.clientWidth}
var getHeight=function（）{return document.querySelector（'#'+cssid+'.+cssclass.clientHeight}
var svg=d3.select（父选择器）
.append（'svg:svg'）
.attr（'width'，width）
.attr（'height'，height）
.attr（'class'，cssclass）
.attr（'id'，cssid）
.attr（'viewBox'，'0,0'，+getWidth（）+'，'+getHeight（））
var outerRadius=Math.min（getWidth（），getHeight（））*0.5-40
var innerRadius=外半径-30
var colorsMap=d3.scaleOrdinal（）.range（颜色）
var arc=d3.arc（）
.innerRadius（innerRadius）
.outerRadius（outerRadius）
var chord=d3.chord（）
.焊盘角度（0.05）
.sortSubgroups（d3.降序）
var ribbon=d3.ribbon（）
.半径（内半径）
var g=svg.append（'g'）
.attr（'transform'，'translate（'+getWidth（）/2+'，'+getHeight（）/2+'））
.基准（弦（数据））
变量组=g.append（'g'）
.attr（'类'，'组'）
变量组=组。选择全部（'g'）
.data（函数（和弦）{return chords.groups}）
.输入（）
.append（'g'）
.attr（'类'，'组'）
var arcSvg=group.append（'path'）
.attr（'class'，'arc'）
.attr（'d'，弧）
.style（'fill'，函数（d）{return colorsMap（d.index）}）
.style（'stroke'，函数（d）{return d3.rgb（colorsMap（d.index））.darker（）
group.append（'text'）
//.attr（'x'，函数（d）{return arc.centroid（）[d.index][0]}）//不工作
//.attr（'y'，函数（d）{return arc.centroid（）[d.index][1]}//不起作用
.attr（'类'，'组标签'）
.text（函数（d）{返回标签[d.index]}）
var ribbons=g.append（'g'）
.attr（'class'，'stribbons'））
.selectAll（'路径'）
.data（函数（d）{return d}）
.输入（）
.append（'路径'）
.attr（'d'，功能区）
.style（'fill'，函数（d）{return colorsMap（d.target.index）}）
.style（'stroke'，function（d）{返回d3.rgb（colorsMap（d.target.index））.darker（）}

g.groups text.group-label{
字体：11px无衬线；
指针事件：无；
z指数：100000；
字体大小：30px；
字号：700；
}

---

问题在于您试图计算圆弧质心的方式；您需要指定起点和终点角度，然后以适当的形式输出结果。最简单的方法是使用变换，因此只计算一次质心位置，而不是尝试分别计算x和y：

group.append('text')
.attr('transform', function (d) {
  return 'translate(' +
    arc.startAngle(d.startAngle)
    .endAngle(d.endAngle)
    .centroid() // this is an array, so will automatically be printed out as x,y
     + ')'
})

这将使标签大致处于正确位置，但您可以通过稍微向下平移字母来进一步细化标签（文本基线当前位于质心点，因此向下移动文本0.35em会使文本的垂直中心更靠近中间）并使用

文本定位点：中间

：

group.append('text')
.attr('transform', function (d) {
  return 'translate(' +
    arc.startAngle(d.startAngle)
    .endAngle(d.endAngle)
    .centroid() // this is an array, so will automatically be printed out as x,y
     + ')'
 })
.attr('dy', '.35em')
.attr('text-anchor', 'middle')
.attr('class', 'group-label')
.text(function (d) { return labels[d.index] })

在这方面：

var parentSelector='#con1'
可变宽度='100vh'
变量高度='100vh'
var cssid='chord1'
var cssclass='svgChord'
变量标签=['a'，'b'，'c'，'d'，'e']
var数据=[[11,21,31,41,51]，[12,22,32,42,52]，[13,23,33,43,53]，[14,24,34,44,54]，[15,25,35,45,55]]
变量颜色=['#ddffdd'、'#fd8b43'、'#00922c'、'#ffffff'、'#F0d064']
var getWidth=function（）{return document.querySelector（'#'+cssid+'.+cssclass.clientWidth}
var getHeight=function（）{return document.querySelector（'#'+cssid+'.+cssclass.clientHeight}
var svg=d3.select（父选择器）
.append（'svg:svg'）
.attr（'width'，width）
.attr（'height'，height）
.attr（'class'，cssclass）
.attr（'id'，cssid）
.attr（'viewBox'，'0,0'，+getWidth（）+'，'+getHeight（））
var outerRadius=Math.min（getWidth（），getHeight（））*0.5-40
var innerRadius=外半径-30
var colorsMap=d3.scaleOrdinal（）.range（颜色）
var arc=d3.arc（）
.innerRadius（innerRadius）
.outerRadius（outerRadius）
var chord=d3.chord（）
.焊盘角度（0.05）
.sortSubgroups（d3.降序）
var ribbon=d3.ribbon（）
.半径（内半径）
var g=svg.append（'g'）
.attr（'transform'，'translate（'+getWidth（）/2+'，'+getHeight（）/2+'））
.基准（弦（数据））
变量组=g.append（'g'）
.attr（'类'，'组'）
变量组=组。选择全部（'g'）
.data（函数（和弦）{return chords.groups}）
.输入（）
.append（'g'）
.attr（'类'，'组'）
var arcSvg=group.append（'path'）
.attr（'class'，'arc'）
.attr（'d'，弧）
.style（'fill'，函数（d）{return colorsMap（d.index）}）
.style（'stroke'，函数（d）{return d3.rgb（colorsMap（d.index））.darker（）
group.append（'text'）
.attr（'dy'，'.35em'））
.attr（'transform'，函数（d）{
返回“translate”（）
+弧
.startAngle（d.startAngle）
.端角（d.端角）
.centroid（）+'）'
})
.attr（'类'，'组标签'）
.attr（'text-anchor'，'middle'）
.text（函数（d）{返回标签[d.index]}）
var ribbons=g.append（'g'）
.attr（'class'，'stribbons'））
.selectAll（'路径'）
.data（函数（d）{return d}）
.输入（）
.append（'路径'）
.attr（'d'，功能区）
.style（'fill'，函数（d）{return colorsMap（d.target.index）}）
.style（'stroke'，function（d）{返回d3.rgb（colorsMap（d.target.index））.darker（）}

g.groups text.group-label{
字体：11px无衬线；
指针事件：无；
z指数：100000；
字体大小：30px；
字号：700；
}

Reddit用户建议添加到我的评论行中。您的解决方案和他们的解决方案有什么不同？它们都做相同的事情--

translate（x，y）

与分别设置

x

和

y

相同。红头发