如何为D3中的饼图颜色标签？

问题描述

我开始使用以下示例：

我想让每个圆弧的标签都是圆弧的颜色。 / p>

我得到它的颜色所有的标签相同的颜色。

在我的代码中，我为最后一行做了以下操作：

  arcs.append（svg：text）。attr（transform，function（d）{var c = arc.centroid（d） x = c [0]; y = c [1]; h = Math.sqrt（x * x + y * y）; returntranslate（+（x / h * 100）+' （text-anchor，h * 90）+）;}）text（function（d）{return Math.round（（d.data/total）* 100）+％;} middle）。attr（fill，color_data.pop（））; 
  

这使得所有标签都是数组中的第一个颜色。但是我需要每个标签在数组中是不同的颜色。

解决方案

只需添加相同的填充参数用于弧

  arcs.append（svg：text）
 .attr变换函数（d）{
 var c = arc.centroid（d），
x = c [0]，
y = c [1]，
 // pythagorean定理斜率
h = Math.sqrt（x * x + y * y）; 
 returntranslate（+（x / h * labelr）+'，'+ 
 * labelr）+）; 
}）
 .attr（dy，.35em）
 .attr（fill，function（d，i）{return color （）; 
 .attr（text-anchor，function（d）{
 //是否超过了中心？
 return（d.endAngle + d.startAngle） / 2> Math.PI？
end：start; 
}）
 .text（function（d，i）{return d.value.toFixed（2） }）; 
  

I started out with the following example:

http://jsfiddle.net/nrabinowitz/GQDUS/

I am trying to get the labels for each arc to be the color of the arc.

I have gotten it to where it colors all the labels the same color. But I do now know how to access each individual label and change the color.

In my code I have done the following for the last line:

    arcs.append("svg:text").attr("transform", function (d){var c = arc.centroid(d); x =   c[0]; y = c[1]; h = Math.sqrt(x*x + y*y);  return "translate(" + (x/h * 100) + ',' + (y/h * 90) + ")";}).text(function(d){return Math.round((d.data/total)*100)+"%";}).attr("text-anchor","middle").attr("fill","color_data.pop()");

This makes all the labels the first color in my array. However I need each label to be a different color in the array. I am just not sure how to access the labels so I can loop through and change the color.

解决方案

Just add the same fill argument that was used for the arcs e.g.

arcs.append("svg:text")
    .attr("transform", function(d) {
        var c = arc.centroid(d),
            x = c[0],
            y = c[1],
            // pythagorean theorem for hypotenuse
            h = Math.sqrt(x*x + y*y);
        return "translate(" + (x/h * labelr) +  ',' +
           (y/h * labelr) +  ")";
    })
    .attr("dy", ".35em")
    .attr("fill", function(d, i) { return color(i); })
    .attr("text-anchor", function(d) {
        // are we past the center?
        return (d.endAngle + d.startAngle)/2 > Math.PI ?
            "end" : "start";
    })
    .text(function(d, i) { return d.value.toFixed(2); });

这篇关于如何为D3中的饼图颜色标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！