D3JSを使用した円弧内のテキストの回転

Question

D3JSを使用してチャートを作成しました。うまくいきました。しかし、アーク内で別のテキストの回転を設定したいと思っています。

左のグラフには現在の配置が含まれています。右のチャートが必要なものです。テキストローテーションのみがありません。

Current and Desired Text alignment - Image

HTMLコードとJSONデータ：https://dl.dropboxusercontent.com/u/75479878/HtmlAndJson.zip

私はそれは私が変更する必要があるコードの一部だと思うが、方法がわからない：あなたが手直しする必要が

function computeTextRotation(d) { 
    return (x(d.x + d.dx/2) - Math.PI/2)/Math.PI * 180; 
} 

Answer 1

あなたが望む効果を得るためのいくつかのこと。テキストラベルは図形全体に対して回転します。代わりに、arc.centroidを使用して各弧の中心に配置し、「ローカルに」回転します。

まず、ここであなたが望む角度（円弧の角度が）です：

function computeTextRotation(d) { 
    return (x(d.x + d.dx/2))/Math.PI * 180; 
} 

第二には、ここでの配置だと、コール回転：

var text = g.append("g") 
    .attr("transform", function(d){ 
     return "translate(" + arc.centroid(d) + ")"; 
    }) 
    .append("text") 
    .attr("transform", function(d) { 
     return d.parent ? "rotate(" + computeTextRotation(d) + ")" : ""; 
    }) 
    .style("text-anchor", "middle") 
    .attr("dy", ".35em") // vertical-align 
    .style("fill", function(d) { 
     return d.textcolor ? d.textcolor : "#000"; 
    }) 
    .text(function(d) { 
     if (d.parent) { 
     return d.name; 
     } else { 
     aux = d.description; 
     return ""; 
     } 
    }); 

---

Working example here