液体填充量表外圆弧与空间计数

Question

如何在液体填充量表的d3 js中创建一个带空格的外圆弧？

http://plnkr.co/edit/meDtUEuElEccVHuZYGwv?p=preview

我想在上图中用空格改变外圆弧。

喜欢那样： http://plnkr.co/edit/04hDF0c9UXOm02tvUW9v?p=preview 在图中显示

var data = [5, 5, 5, 5, 5];
var svg = d3.select('body')
       .append('svg')
       .attr('width', 600)
       .attr('height', 200);
var group = svg.append('g')
               .attr('transform', 'translate(300, 100)');
var arc = d3.svg.arc()
            .innerRadius(44)
            .outerRadius(59);
var pie = d3.layout.pie().padAngle(.02).value(function(d){return d;});
var arcs = group.selectAll('.arc')
                .data(pie(data))
                .enter()
                .append('g')
                .attr('class', 'arc');
arcs.append('path').attr('d', arc).attr('fill', '#92d14f');