Ich versuche, ein Diagramm mit konzentrischen Kreisen zu zeichnen, in denen der Radius den Abstand zwischen verschiedenen Punkten definiert. Ich möchte, dass die Beschriftungen für alle Punkte in einem bestimmten Abstand in der jeweiligen Shell angezeigt werden. Ich benutze d3, um die Grafik zu zeichnen. Ich habe alles, außer ich kann nicht herausfinden, wie ich sicherstellen kann, dass der Text gut wiedergegeben und an einer Grundlinie mit konstanter Zeichenbreite und konstantem Zeichenabstand ausgerichtet wird. Ich habe einen ganzen Tag damit verbracht, es herauszufinden, und jede Hilfe wird sehr geschätzt.

Hier ist dieJSFiddle

Hier ist der Javascript-Code

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;})

​