Поворот текста на половину пользовательской круговой оси - PullRequest
Новая
       4

Поворот текста на половину пользовательской круговой оси

1 голос
/ 09 января 2020

У меня есть визуал, где я строю круговую линейную шкалу на окраине кольцевой диаграммы p / 1019 *. В настоящее время надписи достаточно легко читаются с правой стороны, но с левой стороны текст в значительной степени перевернут, что ухудшает читабельность. Вот блок :

Так как в общей сложности 20 тиков, я экспериментировал с вращением, используя logi c i>10: 

var axisGroup = graphGroup.selectAll(null)
  .data(d3.range(0, 1.00, 0.05))
  .enter()
  .append("g")
  .attr("transform", function(d,i) {
    if (i<11) {
      return "rotate(" + (-90 + (d * 360)) + ")";
    }
    if (i>10) {
      return "rotate(" + (90 + (d * 360)) + ")";
    }
  });

Но это переместил текст и сами галочки.

Также попробовал: 

axisGroup.append("text")
  .attr("x", 275 + 8)
  .attr('y',4)
  .attr("transform", function(d) { return "rotate(" + 0 + ")";})
  .text(function(d) {return Math.round(d*100)/100; });

Но это тоже не сработало, просто переместил текст по кругу.

Вопрос

Какой вызов мне нужно использовать для изменения поворота текста (на месте), чтобы он был ориентирован правой стороной вверх и более читабельным с левой стороны?

1 Ответ

1 голос
/ 09 января 2020

Вы пытаетесь вращать тексты внутри групп, которые уже были повернуты. Из-за этого вам необходимо установить центральную точку для текстов (здесь используются ваши маги c числа): 

.attr("transform", function(d) { 
    return d > 0.5 ? "rotate(180, 283, 4)" : null;
})

Кроме того, я также изменяю text-anchor текстов : 

.attr("text-anchor", function(d){ 
    return d > 0.5 ? "end" : "start"
})

Вот разветвленные bl.ocks: https://bl.ocks.org/GerardoFurtado/raw/1cafc4d6d1b498454dfe73572d7a946d/460a937b3ab61a12175d1878e72aa0feaa5ea2e7/

...