D3：如何使用陣列中儲存的顏色來切片餡餅？

Question

我是新來的d3和JavaScript，我想了解如何使用數組中存儲的餅圖的每個片段的顏色...我認爲問題是相同的，但我似乎也無法找到正確的過程在分片中打印合理大小的文本。我擁有「donnees」變量中的所有內容。 這是我的代碼。

var canvas2=d3.select(".result-side2") 
    .append("svg") 
    .attr("width",500).attr("height",500); 

var donnees= [{"name":"PS","chiffre":285, "couleur":"pink"},{"name":"UMP","chiffre":199,"couleur":"blue"}, {"name":"UDI","chiffre":30,"couleur":"steelblue"},{"name":"Ecolo","chiffre":18, "couleur":"green"},{"name":"RRDP","chiffre":17, "couleur":"yellow"}, {"name":"GDR","chiffre":15, "couleur":"red"},{"name":"Non inscrits","chiffre":9, "couleur":"grey"}]; 
var r= 200; 
var p=Math.PI*2; 

var group= canvas2.append("g") 
.attr("transform", "translate(200,200)"); 

var arc = d3.svg.arc() 
.innerRadius(r-60) 
.outerRadius(r) 
/* .startAngle(1) 
.endAngle(p-1)*/; 

var pie= d3.layout.pie() 
.value(function(d){return d.chiffre;}); 

var arcs= group.selectAll(".arc") 
.data(pie(donnees)) 
.enter() 
    .append("g") 
    .attr("class", "arc"); 

arcs.append("path") 
.style("fill", function(d){return d.couleur;}) 
.attr("d", arc); 

arcs.append("text") 
.attr("transform", function(d){return "translate(" + arc.centroid(d) + ")";}) 
.attr("text-anchor", "middle") 
.text(function(d){return d.name}); 

我最後的餡餅是黑色的，但每個切片的大小都是正確的。顏色是不正確的，雖然文字的地方是好的，我不認爲它正確顯示。

非常感謝。 Victor

Answer 1

Oups。找到了。 對於任何用途，它可能是爲那些後來出現類似問題的人...

arcs.append("path") 
.style("fill", function(d,i){return donnees[i].couleur;}) 
.attr("d", arc); 

arcs.append("text") 
.attr("transform", function(d){return "translate(" + arc.centroid(d) + ")";}) 
.attr("text-anchor", "middle") 
.text(function(d,i){return donnees[i].name});