使用d3在javascript中自定义图形

Question

绘制自定义饼图时我遇到问题。请有人帮助我如何使用d3 js绘制以下自定义饼图。

这是我在随机设置外半径之前的代码。

data = [{"label":"1", "value":17}, 
        {"label":"2", "value":18}, 
        {"label":"3", "value":20},
        {"label":"4", "value":21}];

var r = 200;
var arc = d3.svg.arc().outerRadius(r).innerRadius(0);

用于显示我使用的文字：

var arcs = vis.selectAll("g.slice")
        .data(pie) 
        .enter()
        .append("svg:g")
        .attr("class", "slice");

arcs.append("svg:text")
      .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")";})
      .attr("text-anchor", "middle")
      .text(function(d, index) { return data[index].label; });

但是用

改变外半径之后

function modifiedRadius(d, index) {
        return (data[index].value) * 5;
}

var arc = d3.svg.arc().outerRadius(modifiedRadius).innerRadius(0);

和文本的相同代码然后我的饼图看起来像：

“文字消失！”

请帮忙。