D3 Вращающийся текст вокруг круговой диаграммы

Question

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

<g class="node" transform="translate(670.9158935546875,154.62908935546875)"> 
<circle r="5"></circle> 
<text x="7" y="3" class="text" transform="rotate(-69.54545454545455)" title="20.454545454545457" style="text-anchor: start;"> 
    Syrian Arab Republic 
</text> 
</g> 

я использую макет пирога расположить г узлов, которые содержат круг и текст по кругу.

Затем я использую следующий код, чтобы повернуть метки

d3.selectAll(".text") 
    .attr("transform", function(d) { return "rotate(" + (d.angle - 90) + ")" + ((d.angle>180)? "rotate(180)" : "") }) 
    .style("text-anchor", function(d) { 
    return (d.angle > 180 ? "end" : "start"); }); 

Который дает мне этот выход:

http://postimg.org/image/sgwv8uxax/

Как вы можете видеть положение текстов на левой стороне круг отключен :(

Может ли кто-нибудь дать мне подсказку о том, как я могу правильно исправить эту позицию? Идеал без изменения структуры XML-структуры данных.

Большое спасибо!

Answer 1

Одним из путей решения это просто добавить горизонтальное смещение, когда text-anchor является end:

.attr("dx", function(d) { return (d.angle > 180 ? 10 : 0); })