如何在arc.centroid（）上向D3弦图组弧添加标签？

Question

因此，最近我开始尝试使用D3 library。我已经成功制作了一个可用的和弦图here's the pen。

var parentSelector = '#con1'
var width = '100vh'
var height = '100vh'
var cssid = 'chord1'
var cssclass = 'svgChord'
var labels = ['a', 'b', 'c', 'd', 'e']
var data = [[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]]
var colors = ['#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(parentSelector)
  .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 = outerRadius - 30
var colorsMap = d3.scaleOrdinal().range(colors)
var arc = d3.arc()
  .innerRadius(innerRadius)
  .outerRadius(outerRadius)
var chord = d3.chord()
  .padAngle(0.05)
  .sortSubgroups(d3.descending)
var ribbon = d3.ribbon()
  .radius(innerRadius)
var g = svg.append('g')
  .attr('transform', 'translate(' + getWidth() / 2 + ',' + getHeight() / 2 + ')')
  .datum(chord(data))
var groups = g.append('g')
  .attr('class', 'groups')
var group = groups.selectAll('g')
  .data(function (chords) { return chords.groups })
  .enter()
  .append('g')
  .attr('class', 'group')
var arcSvg = group.append('path')
  .attr('class', 'arc')
  .attr('d', arc)
  .style('fill', function (d) { return colorsMap(d.index) })
  .style('stroke', function (d) { return d3.rgb(colorsMap(d.index)).darker() })
group.append('text')
// .attr('x', function (d) { return arc.centroid()[d.index][0] }) // doesn't work
// .attr('y', function (d) { return arc.centroid()[d.index][1] }) // doesn't work
  .attr('class', 'group-label')
  .text(function (d) { return labels[d.index] })
var ribbons = g.append('g')
  .attr('class', 'ribbons')
  .selectAll('path')
  .data(function (d) { return d })
  .enter()
  .append('path')
  .attr('d', ribbon)
  .style('fill', function (d) { return colorsMap(d.target.index) })
  .style('stroke', function (d) { return d3.rgb(colorsMap(d.target.index)).darker() })

g.groups text.group-label {
  font: 11px sans-serif;
  pointer-events: none;
  z-index: 100000;
  font-size: 30px;
  font-weight: 700;
}

<script src="https://d3js.org/d3.v5.min.js"></script>
<div class="container" id="con1"></div>

现在，我需要向其中添加一些信息以使其更有用。但是由于某些原因，我无法使用arc.centroid()在其各自中心点的组扇区上添加标签。我尝试重新创建一些示例（1，2，3，4，5），但没有成功。由于某种原因，在我的情况下，arc.centroid()或anything_else.centroid()在控制台中引发错误。而且，D3会生成非常复杂的对象，因此在使用断点进行调试时，我不理解作用域中的定义。

所以，这是一个问题：如何更改代码以实现所需的结果-在每个svg弧的质心上绘制svg文本？

Answer 1

问题出在试图计算弧形质心的方式上；您需要指定起点和终点角度，然后以合适的形式输出结果。最简单的方法是使用变换，因此您只需计算一次质心位置，而不必尝试分别计算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可以将标签的垂直中心文字靠近中间）并使用text-anchor: middle将标签居中：

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'
var width = '100vh'
var height = '100vh'
var cssid = 'chord1'
var cssclass = 'svgChord'
var labels = ['a', 'b', 'c', 'd', 'e']
var data = [[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]]
var colors = ['#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(parentSelector)
  .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 = outerRadius - 30
var colorsMap = d3.scaleOrdinal().range(colors)
var arc = d3.arc()
  .innerRadius(innerRadius)
  .outerRadius(outerRadius)
var chord = d3.chord()
  .padAngle(0.05)
  .sortSubgroups(d3.descending)
var ribbon = d3.ribbon()
  .radius(innerRadius)
var g = svg.append('g')
  .attr('transform', 'translate(' + getWidth() / 2 + ',' + getHeight() / 2 + ')')
  .datum(chord(data))
var groups = g.append('g')
  .attr('class', 'groups')
var group = groups.selectAll('g')
  .data(function (chords) { return chords.groups })
  .enter()
  .append('g')
  .attr('class', 'group')
var arcSvg = group.append('path')
  .attr('class', 'arc')
  .attr('d', arc)
  .style('fill', function (d) { return colorsMap(d.index) })
  .style('stroke', function (d) { return d3.rgb(colorsMap(d.index)).darker() })
group.append('text')
  .attr('dy', '.35em')
  .attr('transform', function (d) {
    return 'translate('
    + arc
      .startAngle(d.startAngle)
      .endAngle(d.endAngle)
      .centroid() + ')'
  })
  .attr('class', 'group-label')
  .attr('text-anchor', 'middle')
  .text(function (d) { return labels[d.index] })

var ribbons = g.append('g')
  .attr('class', 'ribbons')
  .selectAll('path')
  .data(function (d) { return d })
  .enter()
  .append('path')
  .attr('d', ribbon)
  .style('fill', function (d) { return colorsMap(d.target.index) })
  .style('stroke', function (d) { return d3.rgb(colorsMap(d.target.index)).darker() })

g.groups text.group-label {
  font: 11px sans-serif;
  pointer-events: none;
  z-index: 100000;
  font-size: 30px;
  font-weight: 700;
}

<script src="https://d3js.org/d3.v5.min.js"></script>
<div class="container" id="con1"></div>