Как добавить метки к диаграмме аккордов D3 Групповые дуги на arc.centroid ()? - PullRequest
Новая
       47

Как добавить метки к диаграмме аккордов D3 Групповые дуги на arc.centroid ()?

0 голосов
/ 21 сентября 2018

Итак, недавно я начал пытаться использовать библиотеку 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?

1 Ответ

0 голосов
/ 21 сентября 2018

Проблема была в том, как вы пытались вычислить центр тяжести дуги;вам нужно указать начальный и конечный угол, а затем вывести результаты в подходящей форме.Самый простой способ сделать это - использовать преобразование, поэтому вы вычисляете только положение центроида, а не пытаетесь вычислить 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,35 мкм приводит к центру текста по вертикали ближе к середине) и центрирование меток с помощью 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>
...