如何在D3 ()上向arc.centroid Chord图组Arcs添加标签？

Question

因此，最近我开始尝试使用D3库。我已经成功地制作了一个工作和弦图，这是笔。

​

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>

​