Javascript d3.js饼图未显示

我正在使用d3.v4绘制包含以下数据集的饼图：

var InternetUsage = [{usage:"no time at all", number:3}, 
                 {usage:"less than an hour a day", number:139}, 
                 {usage:"few hours a day", number:740},
                 {usage:"most of the day", number:122}];

我希望每个切片的颜色在一个范围内。但是运行我的代码时，除了显示文本标签外，什么也没有显示。根据我的假设，当我想从数据集中提取属性的值时，就会出现问题。类似于

var pie=d3.pie（）.value（函数（d）{返回d.number；}）可能无法按我预期的方式工作。但是，我不知道在这种情况下如何修复它

我在.js文件中编写的完整代码是

var width = 950
var height = 500;
var radius = 250;

var svg = d3.select("body").append("svg")
    .attr("width",width)
    .attr("height",height);

var g = svg.append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");


var color = d3.scaleOrdinal(d3.schemeCategory20c);

var arc = d3.arc()
    .outerRadius(radius - 10)
    .innerRadius(0);

var label = d3.arc()
    .outerRadius(radius - 40)
    .innerRadius(radius - 40);

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


var InternetUsage = [{usage:"no time at all", number:3}, 
                     {usage:"less than an hour a day", number:139}, 
                     {usage:"few hours a day", number:740},
                     {usage:"most of the day", number:122}];

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

arc.append("path")
  .attr("stroke", "#fff")
  .style("fill", function(d,i) { return color(InternetUsage[i].usage); });

arc.append("text")
    .attr("transform", function(d){return "translate(" + label.centroid(d) + ")"; })
    .style("font-size","10px")
    .attr("dy", "0.35em")
    .attr('text-anchor', 'middle')
    .text(function(d,i) {return InternetUsage[i].usage; });

您忘记为
path
元素指定
d
属性：

arc.append("path")
  .attr("stroke", "#fff")
  .attr("d", path) // <== !!!
  .style("fill", function(d,i) { return color(InternetUsage[i].usage); });

工作演示：


var宽度=950
var高度=500；
var半径=250；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var g=svg.append（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
var color=d3.scaleOrdinal（d3.schemeCategory20c）；
var path=d3.arc（）
.外层（半径-10）
.内半径（0）；
var label=d3.arc（）
.外层（半径-40）
.内半径（半径-40）；
var pie=d3.pie（）
.value（函数（d）{返回d.number；}）；
var InternetUsage=[{用法：“根本没有时间”，编号：3}，
{用法：“每天少于一小时”，编号：139}，
{用法：“每天几个小时”，编号：740}，
{用法：“一天中的大部分时间”，数字：122}]；
var arc=g.selectAll（“.arc”）
.数据（pie（互联网使用））
.输入（）
.附加（“g”）
.attr（“类”、“弧”）；
arc.append（“路径”）
.attr（“笔划”、“fff”）
.attr（“d”，路径）
.style（“fill”，函数（d，i）{返回颜色（InternetUsage[i].usage）；}）；
弧。追加（“文本”）
.attr（“transform”，函数（d）{return”translate（“+label.centroid（d）+”）；}）
.style（“字体大小”，“10px”）
.attr（“dy”，“0.35em”）
.attr（'text-anchor'，'middle'）
.text（函数（d，i）{返回InternetUsage[i].usage；}）
您忘记为
路径
元素指定
d
属性：

arc.append("path")
  .attr("stroke", "#fff")
  .attr("d", path) // <== !!!
  .style("fill", function(d,i) { return color(InternetUsage[i].usage); });

工作演示：


var宽度=950
var高度=500；
var半径=250；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var g=svg.append（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
var color=d3.scaleOrdinal（d3.schemeCategory20c）；
var path=d3.arc（）
.外层（半径-10）
.内半径（0）；
var label=d3.arc（）
.外层（半径-40）
.内半径（半径-40）；
var pie=d3.pie（）
.value（函数（d）{返回d.number；}）；
var InternetUsage=[{用法：“根本没有时间”，编号：3}，
{用法：“每天少于一小时”，编号：139}，
{用法：“每天几个小时”，编号：740}，
{用法：“一天中的大部分时间”，数字：122}]；
var arc=g.selectAll（“.arc”）
.数据（pie（互联网使用））
.输入（）
.附加（“g”）
.attr（“类”、“弧”）；
arc.append（“路径”）
.attr（“笔划”、“fff”）
.attr（“d”，路径）
.style（“fill”，函数（d，i）{返回颜色（InternetUsage[i].usage）；}）；
弧。追加（“文本”）
.attr（“transform”，函数（d）{return”translate（“+label.centroid（d）+”）；}）
.style（“字体大小”，“10px”）
.attr（“dy”，“0.35em”）
.attr（'text-anchor'，'middle'）
.text（函数（d，i）{返回InternetUsage[i].usage；}）
谢谢。那是个愚蠢的错误。我是d3和js的新手，所以我有时会被这些属性弄糊涂。我认为问题是由
.value（函数（d）{return d.number；}）
引起的，因为当我添加
console.log（InternetUsage.number）
时，结果是未定义的。一点也不
InternetUsage
它是一个对象数组，因此，例如，如果您想获取存储在此数组中第一个对象的
number
属性中的值，您应该这样做：
console.log（InternetUsage[0].number）
。谢谢。那是个愚蠢的错误。我是d3和js的新手，所以我有时会被这些属性弄糊涂。我认为问题是由
.value（函数（d）{return d.number；}）
引起的，因为当我添加
console.log（InternetUsage.number）
时，结果是未定义的。一点也不
InternetUsage
它是一个对象数组，因此，例如，如果您希望获取存储在此数组中第一个对象的
number
属性中的值，则应通过以下方式执行：
console.log（InternetUsage[0].number）
。