Вращающиеся текстовые дорожки в d3.js хордовой диаграмме без обычного текста: SVG

Question

Я пытаюсь адаптировать эту схему аккорда Майк Босток:

Я хочу иметь текстовые надписи вращающиеся наружу, как этот хордовой диаграмме:

http://bost.ocks.org/mike/uberdata/

Существует пример здесь

http://bl.ocks.org/mbostock/910126

Однако преобразование выполняется с помощью SVG: Текст:

g.append("svg:text") 
     .each(function(d) { d.angle = (d.startAngle + d.endAngle)/2; }) 
     .attr("dy", ".35em") 
     .attr("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; }) 
     .attr("transform", function(d) { 
     return "rotate(" + (d.angle * 180/Math.PI - 90) + ")" 
      + "translate(" + (r0 + 26) + ")" 
      + (d.angle > Math.PI ? "rotate(180)" : ""); 
     }) 
     .text(function(d) { return nameByIndex[d.index]; }); 

Тот, который я пытаюсь адаптировать использование «текст» и «textPath», и я, кажется, не чтобы иметь возможность просто добавить атрибут transform/rotate. Добавление этой линии

.attr("transform",function(d,i){return "rotate(90)";}) 

в коде ниже ничего не делает:

// Add a text label. 
     var groupText = group.append("text") 
      .attr("x", 6) 
      .attr("dy", 15); 

      groupText.append("textPath") 
      .attr("xlink:href", function(d, i) { return "#group" + i; }) 

      .text(function(d, i) { return cities[i].country; }); 

Любые идеи, как я могу повернуть текст наружу так, небольшие аккорды группы текстовые метки могут быть отображены без сгрудились или (как это оригинальное решение) полностью отключилось?

Answer 1

Я думаю, что вы ищете this example by Mike Bostock

Что касается изменений исходного кода аккорда, следующие изменения должны делать то, что вы хотите:

// Add a text label. 
// var groupText = group.append("text") 
//  .attr("x", 6) 
//  .attr("dy", 15); 

//groupText.append("textPath") 
// .attr("xlink:href", function(d, i) { return "#group" + i; }) 
// .text(function(d, i) { return cities[i].name; }); 

// Remove the labels that don't fit. :(
//groupText.filter(function(d, i) { return groupPath[0][i].getTotalLength()/2 - 16 < this.getComputedTextLength(); }) 
// .remove(); 

group.append("text") 
    .each(function(d) { d.angle = (d.startAngle + d.endAngle)/2; }) 
    .attr("dy", ".35em") 
    .attr("transform", function(d) { 
    return "rotate(" + (d.angle * 180/Math.PI - 90) + ")" 
     + "translate(" + (innerRadius + 26) + ")" 
     + (d.angle > Math.PI ? "rotate(180)" : ""); 
    }) 
    .style("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; }) 
    .text(function(d, i) { return cities[i].name; });