Почему текст внутри d3 pie chart искажен?

var data = [
            {
                name: "Мобильная связь",
                sum: 5549
            },
            {
                name: "Рестораны и развлечения",
                sum: 4200
            },
            {
                name: "Супермаркеты",
                sum: 2600
            },
            {
                name: "Транспорт",
                sum: 2234.37
            },
            {
                name: "Другое",
                sum: 374.93
            }];
 
        var width = 300,
            height = 300 ,
            radius = height / 2;
 
        var arc = d3.arc()
            .innerRadius(radius - 20)
            .outerRadius(radius)
 
        var pie = d3.pie()
            .padAngle(.06)
            .value(function (d) {
                return d.sum;
            });
 
        var color = d3.scaleOrdinal(d3.schemeCategory20);
 
        var svg = d3.select("#pie").append("svg")
            .attr("width", width)
            .attr("height", height)
            .append("g")
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
 
        var g = svg.selectAll("path")
            .data(pie(data))
            .enter().append("g");
 
 
        g.append("path")
            .attr("d", arc)
            .style("fill", function(d,i) {
                return color(i);
            });
        g.append("text")
            .attr("text-anchor", "middle")
      .attr('font-family', "Verdana")
            .attr('font-size', '35')
            .text('Всего потрачено');