Выравнивание текста внутри дуги окружности d3js

Question

Я пытаюсь нарисовать диаграмму с концентрическими кругами, где радиус будет определять расстояние между различными точками. Я хочу, чтобы метки для всех точек на определенном расстоянии появлялись внутри соответствующей оболочки. Я использую d3, чтобы нарисовать график. У меня все идет, кроме того, что я не могу понять, как сделать так, чтобы текст красиво отображался и выравнивался по базовой линии с постоянной шириной символа и межсимвольным интервалом. Я потратил целый день, пытаясь понять это, и любая помощь будет принята с благодарностью.

Вот JSFiddle

вот код JavaScript

var dataset = [{label:"Hello1", value:5},{label:"Hello2", value:10 {label:"Hello3",value:15},{label:"Hello4", value:20},{label:"Hello5", value:25}];

var arc = d3.svg.arc()
  .innerRadius(function(d,i){return i*35;})
  .outerRadius(function(d,i){return (i*35+30);})
  .startAngle(0)
  .endAngle(2 * Math.PI);

var svg = d3.select("body").append("svg")
  .attr("width", 960)
  .attr("height", 500)
  .selectAll("g")
  .data(dataset)
  .enter()
  .append("g")
  .attr("transform", "translate(480,250)");

var arcs = svg.append("path")
  .attr("fill","red")
  .attr("id", function(d,i){return "s"+i;})
  .attr("d",arc);

var thing = svg.append("g")
  .attr("id","thing")
  .style("fill","navy");

thing.append("text")
  .style("font-size",20)
  .attr("dy",function(d,i){return 20;})
  //.attr("alignment-baseline","middle")
  .append("textPath")
  .attr("textLength",function(d,i){return 90-i*5 ;})
  .attr("xlink:href",function(d,i){return "#s"+i;})
  .attr("startOffset",function(d,i){return 3/20;})
  .text(function(d){return d.label;})

Answer 1

Вы имеете в виду что-то вроде этого:

http://jsfiddle.net/wcWUE/

Все, что я изменил, было:

thing.append("text")
  .style("font-size",20)
  .append("textPath")
  .attr("textLength",function(d,i){return 90-i*5 ;})
  .attr("xlink:href",function(d,i){return "#s"+i;})
  .attr("startOffset",function(d,i){return 3/20;})
  .attr("dy","-1em")
  .text(function(d){return d.label;})

Также я поменял порядок колец, чтобы окклюзия не была проблемой.

Я думаю, что вы могли бы сделать отдельную коллекцию путей, возможно, только что определенных в разделе, чтобы нарисовать текст вдоль.

Но я не уверен, что этот результат - то, что вы ищете?