How to add labels to D3 Chord diagram Group Arcs on arc.centroid()?

user_8800759 0
Viewed 404

So, recently I've started to try using D3 library. I've successfully made a working Chord Diagram, 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>

And now I need to add some info to it to make it more useful. But for some reason I could not achieve adding labels on group sectors on their respective center points using arc.centroid(). I've tried to recreate some examples (1, 2, 3, 4, 5), but it didn't work out. For some reason, in my case arc.centroid() or anything_else.centroid() throws errors in console. Also, D3 produces very complicated objects, so I don't understand definitions in scope, when debugging with breakpoints.

So, here's the question: how to change my code to achieve required result - drawing svg text over centroids of each svg arc?

chord-diagram d3.js javascript
1 Answers

The problem was in the way you were trying to calculate the arc centroid; you need to specify the start and end angle, and then output the results in a suitable form. The easiest way to do so it using a transform, so then you only calculate the centroid position once, rather than trying to calculate x and y separately:

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
     + ')'
})

This gets the labels into approximately the correct position, but you can refine it further by translating the letters down slightly (the text baseline is currently at the centroid point, so moving the text down by 0.35em places the vertical centre of the text closer to the middle) and centring the labels using 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] })

In context:

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>

user_2052070
Related