通过D3js过渡来更改拱形宽度

Question

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

我尝试重现this示例，但没有成功。

            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);
                    }                    
                });
            };

Answer 1

然后我想到了更简单：

            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);