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});