D3.js 使用D3js通过过渡更改拱门宽度

我想使用d3js获得一个转换，它（同时）改变饼图每个拱门的宽度

我试图复制这个例子，但没有成功

            var arc = d3.svg.arc()
                .innerRadius(startRadius + 1)
                .outerRadius(startRadius)

            var pie = d3.layout.pie()
                .value(function (d) { return d;})
                .padAngle(border);

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

            var paths = arcs.append("path")
                .attr("d", arc);

            setInterval(function() {
                arcs.selectAll("path").transition()
                    .duration(750)
                    .call(arcTween, startRadius ,radius);
            }, 1500);

            function arcTween(transition, oldRadius ,newRadius) {
                transition.attrTween("d", function(d) {
                    var interpolate = d3.interpolate(oldRadius, newRadius);
                    return function(t) {
                        d.outerRadius = interpolate(t);
                        alert(interpolate(t))
                        return arc(d);
                    }                    
                });
            };

---

这比我想的更简单：

            var arc = d3.svg.arc()
                .innerRadius(startRadius + 1)
                .outerRadius(startRadius)

            var arc2 = d3.svg.arc()
                .innerRadius(startRadius + width)
                .outerRadius(startRadius)

            var pie = d3.layout.pie()
                .value(function (d) { return d;})
                .padAngle(border);

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

            var paths = arcs.append("path")
                .attr("d", arc);

            paths.transition()
                .delay(200)
                .duration(1000)
                .attr("d", arc2);