javascript - 如何在 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

问题在于您尝试计算弧质心的方式；您需要指定开始和结束 Angular ，然后以合适的形式输出结果。最简单的方法是使用变换，这样您只需计算一次质心位置，而不是尝试分别计算 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>