Javascript d3.js-如何设置饼图的样式

我有下面的饼图：

var数据=[12,44,44]；
可变宽度=300，
高度=300，
半径=数学最小值（宽度、高度）/2；
var color=d3.scale.category20（）；
var pie=d3.layout.pie（）
.sort（空）；
var piedata=pie（数据）；
var arc=d3.svg.arc（）
.内半径（半径-100）
.外层（半径-50）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
var path=svg.selectAll（“路径”）
.数据（piedata）
.enter（）.append（“路径”）
.attr（“d”，弧）；
svg.selectAll（“文本”）.data（piedata）
.输入（）
.append（“文本”）
.attr（“文本锚定”、“中间”）
.attr（“x”，函数（d）{
var a=d.startAngle+（d.endAngle-d.startAngle）/2-Math.PI/2；
d、 cx=数学cos（a）*（半径-75）；
返回d.x=数学cos（a）*（半径-30）；
})
.attr（“y”，函数（d）{
var a=d.startAngle+（d.endAngle-d.startAngle）/2-Math.PI/2；
d、 cy=数学sin（a）*（半径-75）；
返回d.y=数学sin（a）*（半径-30）；
})
.text（函数（d）{返回d.value+'%'；}）
正文{
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
保证金：自动；
位置：相对位置；
宽度：960px；
}
正文{
字体：12px无衬线；
}
试试这个。我想它会给你答案的

var colorScale = d3.scale.ordinal().domain(["banana", "cherry", "blueberry"])
                                   .range(["#eeff00", "#ff0022", "#2200ff"]);

pie.colors(function(d){ return colorScale(d.fruitType); });

或者你可以直接给

var colorScale = d3.scale.ordinal().range([/*array of hex values */]);

pie.colors(colorScale);

考虑到你问题中的数据结构

var data = [
  {
    color: 'red',
    value: 12
  },
  {
    color: 'blue',
    value: 44
  },
  {
    color: 'green',
    value: 44
  }
];

。。。首先，您必须告诉饼图生成器正确的属性：

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

完成后，这是重要的部分：使用饼图生成器放置在
数据
对象下的
颜色
属性设置路径的
填充
：

.style("fill", function(d) {
    return d.data.color
})

以下是您的代码和这些更改：


var数据=[{
颜色：“红色”，
价值：12
},
{
颜色：“蓝色”，
价值：44
},
{
颜色：“绿色”，
价值：44
}
];
可变宽度=300，
高度=300，
半径=数学最小值（宽度、高度）/2；
var color=d3.scale.category20（）；
var pie=d3.layout.pie（）
.价值（功能（d）{
返回d值
})
.sort（空）；
var piedata=pie（数据）；
var arc=d3.svg.arc（）
.内半径（半径-100）
.外层（半径-50）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
var path=svg.selectAll（“路径”）
.数据（piedata）
.enter（）.append（“路径”）
.样式（“填充”，功能（d）{
返回d.data.color
})
.attr（“d”，弧）；
svg.selectAll（“文本”）.data（piedata）
.输入（）
.append（“文本”）
.attr（“文本锚定”、“中间”）
.attr（“x”，函数（d）{
var a=d.startAngle+（d.endAngle-d.startAngle）/2-Math.PI/2；
d、 cx=数学cos（a）*（半径-75）；
返回d.x=数学cos（a）*（半径-30）；
})
.attr（“y”，函数（d）{
var a=d.startAngle+（d.endAngle-d.startAngle）/2-Math.PI/2；
d、 cy=数学sin（a）*（半径-75）；
返回d.y=数学sin（a）*（半径-30）；
})
.文本（功能（d）{
返回d.value+'%'；
});
正文{
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
保证金：自动；
位置：相对位置；
宽度：960px；
}
正文{
字体：12px无衬线；
}
您应该对您在答案中添加的代码添加更多的解释