D3js中的圆形甜甜圈上没有出现文字

Question

文本没有出现在甜甜圈图表上。帮我解决这个问题以及解释。我是D3js的新手。

这是我的示例代码。

我的HTML代码是：

    .arc text {
    font: 10px sans-serif;
   }
 .arc path {
   stroke: #fff;
  }

和js代码是：

    var width = 600, height = 500, radius = Math.min(width, height) / 2;

    var color = d3.scale.category20();

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

    var pie = d3.layout.pie()

    .value(function(d) {
        return d.population;
    });

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

    d3.csv("date.csv", type, function(error, data) {
        if (error)
            throw error;

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

        g.append("path").attr("d", arc).style("fill", function(d, i) {
            return color(i);

        });

        //.style("fill", function(d) { return color(d.date.age); });

        g.append("text").attr("transform", function(d) {
            return "translate(" + arc.centroid(d) + ")";
        }).attr("dy", ".35em").text(function(d) {
            return d.date.age;
        });
    });

    function type(d) {
        d.population = +d.population;
        return d;
    }

csv文件是
年龄，人口
5,2704659
13,4499890
17,2159981
24,3853788