d3如何均衡距離中心圓周上的物體的距離

Question

這是我的fiddle。我有一箇中心餡餅，周圍有圓圈。直到現在一切都很好。但是現在我想把文字和圖像放到所有的小圓圈上。當我添加文本時，它不是從中心統一的。

對於這個問題，我想我應該每次都抽出幾個象限，並相應地調整寬度。但是我的小圓圈總數是可變的，因此我不知道有多少個圓圈在那裏每個象限在特定的時間。我希望有一個更優雅的解決方案，我可能錯過了。如果有人願意分享。

sub_circle.append('text') 
    .attr('class', 'labels') 
    .text(function (d) { 
    return d.name; 
}) 
    .attr('x', function (d, i) { 
    return (350 * Math.cos(scale_arcs_parent(i)) + 500); 
}) 
    .attr('y', function (d, i) { 
    return (350 * Math.sin(scale_arcs_parent(i)) + 350); 
}) 

Answer 1

你看到的是文本錨點是從中心的距離相同，但由於相對於文本更改它的位置，它看起來好像文字的距離是不同的。您可以通過根據角度設置text-anchor來減輕這一點。

.attr("text-anchor", function(d, i) { 
     var a = scale_arcs_parent(i); 
     if(a < Math.PI/4) return "start"; 
     if(a < 3*Math.PI/4) return "middle"; 
     if(a < 5*Math.PI/4) return "end"; 
     if(a < 7*Math.PI/4) return "middle"; 
     return "start"; 
}) 

完成jsfiddle here。您顯然可以調整錨值的閾值以適應您的需求。

Answer 2

你還沒有描述你想如何顯示文本（例如，相對於圓圈的位置），所以我必須猜測。

你可以使用的text-anchor和dy組合，以保持相對圈定位標籤。

sub_circle 
    .append('text') 
    .attr('class','labels') 
    .attr('text-anchor','middle') 
    .attr('dy','-30') 
    .text(function(d){return d.name;}) 
    .attr('x',function(d,i){return (300*Math.cos(scale_arcs_parent(i))+500);}) 
    .attr('y',function(d,i){return (300*Math.sin(scale_arcs_parent(i))+350);}) 

http://jsfiddle.net/K6hvF/6/