Question

我是d3和javascript的新手，我正在尝试了解如何使用数组中存储的颜色为饼图的每个切片...我认为问题是相同的，但我似乎也似乎没有找到正确的过程来在切片中以合理的大小打印文本。我在＆＃34; donnees＆＃34;变量。这是我的代码。

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

我最后的馅饼是黑色的，但每个切片的大小都是正确的。颜色不对，虽然文字的位置很好，但我认为它没有正确显示。

非常感谢。维克多

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

D3：如何使用阵列中存储的颜色来切片？

1 个答案: