D3JS

Question

ile bir yay içindeki bir metin döndürme D3JS kullanarak bir grafik oluşturdum ve iyi çalışıyor. Ancak, arklar içinde farklı bir metin rotasyonu ayarlamak istiyorum ve nasıl olduğunu anlayamıyorum.

Soldaki grafikte geçerli hizalama var. Doğru grafik istenen olanıdır. Sadece metin rotasyonu eksik.

Current and Desired Text alignment - Image

HTML Kodu ve Json Veri: https://dl.dropboxusercontent.com/u/75479878/HtmlAndJson.zip

Bunu ben değiştirmeniz gerekir kod parçası olduğunu düşünüyorum, ama nasıl bilmiyorum:

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

Answer 1

Sen yeniden çalışmanız gerekir İstediğiniz efekti elde etmek için birkaç şey. Metin etiketleri, tüm şekle göre döndürülür. Bunun yerine, bunları her yayın ortasına arc.centroid kullanarak yerleştirin ve ardından bunları "yerel olarak" döndürün.

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