Wyrównywanie tekstu wewnątrz łuku kołowego d3js
Próbuję narysować wykres z koncentrycznymi okręgami, w których promień określa odległość między różnymi punktami. Chcę, aby etykiety dla wszystkich punktów w określonej odległości pojawiały się wewnątrz danej skorupy. Używam d3 do narysowania wykresu. Mam wszystko, z wyjątkiem tego, że nie wiem, jak zapewnić, że tekst będzie ładnie renderowany i wyrównany do linii bazowej ze stałą szerokością znaków i odstępami między znakami. Spędziłem cały dzień, próbując to rozgryźć, a wszelka pomoc zostanie bardzo doceniona.
Tutaj jestJSFiddle
tutaj jest kod 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;})