d3js Bir pasta grafiğinin çevresindeki etiketlerin yeniden dağıtılması

Question

d3.js kullanıyorum, dışarıda etiketli bir çörek grafiği oluşturmak için kullanıyorum. Turtanın her diliminin merkezlerine dayanan bir miktar trigonometri kullanarak etiketleri yerleştiriyorum. Ben sonuçta başarmak çalıştığım şey

g.append("g") 
     .attr("class", "percentage") 
     .append("text") 
      .attr("transform", function(d) 
       { 
        var c = arc.centroid(d); 
        var x = c[0]; 
        var y = c[1]; 
        var h = Math.sqrt(x*x + y*y); 
        return "translate(" + (x/h * obj.labelRadius) + ',' + (y/h * obj.labelRadius) + ")"; 
       } 
      ) 
      .attr("dy", ".4em") 
      .attr("text-anchor", function(d) 
       { 
        return (d.endAngle + d.startAngle)/2 > Math.PI ? "end" : "start"; 
       } 
      ) 
      .text(function(d) { return d.data.percentage+"%"; }); 

çakışmaları önlemek için pasta grafiğin kenarlarında dışındadır etiketleri, yeniden düzenlemek etmektir.

sorunu çözmek için çalıştık yollardan

bir

garanti, etiketler konumlandırılabilir "bağlantı noktalarını" set tanımlamak için onlar olacak bir çakışma olduğu. Sorun, merkezlerin çapalara eşlenmesi ve dilimlerle etiketler arasındaki görsel yazışmaların bir anlamda korunmasıdır (Dilimler ince olduğunda özel olarak zor).

Görüntü yukarıdaki çapa muhtemel konumunu gösterir (dilim centroids gösterilmiştir). Bu pozisyonlar ile bir çakışma olması imkansızdır.

Sorunla ilgili karmaşıklık eklemek, etiketlerin (yatay oldukları) pastanın üstüne veya altına yakın olması durumunda, pastaların sağında veya solunda olduklarından daha kolay örtüşmeleridir. .

Bu soruna nasıl yaklaşılacağı ile ilgili herhangi bir fikir var mı?

.attr("dy", function(d) 
{ 
    var c = arc.centroid(d); 
     var x = c[0]; 
     var y = c[1]; 
     var h = Math.sqrt(x*x + y*y); 
     var dy = y/h * obj.labelRadius; 
    dy=dy*fontSizeParam*.14/heightParam); 
    return (dy)+"em"; 
}) 

Bu biraz yardımcı olur ve etiketlere bazı oda verir, yine olsa bütün davaları kapsayacak bir çözüm arıyorsanız:

[DÜZENLE] meetamit önerisi ardından, aşağıdaki uyguladı. ..

Answer 1

İki yay oluşturamaz mısınız? grafik için bir tane ve etiketler için bir tane?

// first arc used for drawing the pie chart 
var arc = d3.svg.arc() 
    .outerRadius(radius - 10) 
    .innerRadius(0); 

// label attached to first arc 
g.append("text") 
    .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; }) 
    .attr("dy", ".35em") 
    .style("text-anchor", "middle") 
    .text(function(d) { return d.data.age; }); 

// second arc for labels 
var arc2 = d3.svg.arc() 
    .outerRadius(radius + 20) 
    .innerRadius(radius + 20); 

// label attached to second arc 
g.append("text") 
    .attr("transform", function(d) { return "translate(" + arc2.centroid(d) + ")"; }) 
    .attr("dy", ".35em") 
    .style("text-anchor", "middle") 
    .text(function(d) { return d.data.age; }); 

Answer 2

John Williams Burada sunulan programcı tarafından iyi, pragmatik d3.js tabanlı çözüm var:

https://www.safaribooksonline.com/blog/2014/03/11/solving-d3-label-placement-constraint-relaxing/

Mantıklı kısıtlamalar, ör durumlar için iyi çalışması gerekir Yukarıda tartışıldığı gibi en fazla 12 etiket. Makalede, daha gelişmiş algoritmalara yönelik işaretçiler de vardır, ancak bu basit yaklaşım, yeterli etiket içerik kısıtlamaları ile kullanıldığında, diğer yöntemlere göre daha düzenli görsel bir görünüme sahip sonuçlar verebilir.