animation - d3 从条形图过渡到饼图并返回

Question

LIVE DEMO

所以我有这样的想法，应该允许所有单轴数据以所有基本方式显示；至少从馅饼到酒吧。理想情况下，这将是一个动画过渡，但这就是困难所在。

制作饼图很容易，制作条形图也是如此。这是我到目前为止所拥有的:

# fields
width   = 750
height  = width/2
margin  = 20
radius  = (height-(margin*2))/2

# helpers
pie     = d3.layout.pie().value (d) -> d 
arc     = d3.svg.arc()
    .outerRadius(radius)
    .innerRadius(radius/4)
x       = d3.scale.linear().domain([0, 100]).range [0, width]

$http.get('/Classification_Top_10_by_Count.json').success (data) ->

    percents = (parseFloat item.Percent for item in data).sort d3.ascending

    svg      = d3.select('#svgStage').append('svg')         
        .attr('width', width+(margin*2))
        .attr('height', height+(margin*2))

    svg.data([percents])

    g = svg.append('g')
        .attr('transform', "translate(#{radius},#{radius})")

    paths   = g.selectAll 'path'

    paths.data(pie).enter().append('path')
        .attr('d', arc)

    toBars = ->
        g.selectAll('path').transition().duration(2000) 
            .attr 'd', (d, index) ->
                # this is over complex because I was playing with it.
                cord = 
                    tl : [0,          index*20]
                    tr : [d.value*20, index*20]
                    br : [d.value*20, index*20-20]
                    bl : [0,          index*20-20]
                oCord = [
                    cord.tl
                    cord.tr 
                    cord.br 
                    cord.bl
                ]
                "M #{oCord[0][0]}, #{oCord[0][2]}
                A 0, 0 0 0, 0 #{oCord[1][0]}, #{oCord[1][3]}
                L #{oCord[2][0]}, #{oCord[2][4]}
                A 0, 0 0 0, 0 #{oCord[3][0]}, #{oCord[3][5]}
                Z"  

显然，要使它起作用，它必须是路径元素到路径元素，并且过渡现在正在起作用。问题是它看起来像垃圾。它开始的那一刻看起来是乱码，直到它结束并变成像样的条形图。

我一直在看这个:http://d3-example.herokuapp.com/examples/showreel/showreel.html
这展示了一个酒吧以我想要的方式过渡到 donut 。查看源代码，这是通过自定义补间完成的。 (查看源代码第 518 行)

现在我在我的头上。这里发生了什么？我怎样才能让这种过渡发挥作用？有没有其他人处理过这个问题？

更新

为了清楚起见，下面的插图更清楚地说明了我过渡的意图。



赏金清晰。我为这个问题添加了赏金，因为我需要解释出了什么问题。 Superboggly 做到了，所以他得到了赏金。但是 Amit Aviv 的方法更胜一筹，所以我接受他的回答是最正确的。我也都+1了。

Answer 1

这是我的看法:http://jsfiddle.net/amitaviv99/x6RWs/42/

我的方法是使用三次贝塞尔曲线来近似弧和条，控制点的数量完全相同。代码有些复杂，需要一些工作。但结果相当顺利。

这是摘录(所以需要..)

var bezierArc = function(radiusIn, radiusOut, startAngle, endAngle){
    var arcIn = makeCompArc(radiusIn, startAngle, endAngle);
    var arcIOut = makeCompArc(radiusOut, startAngle, endAngle);
    var lines = makeBezierDoubleLine(radiusIn, radiusOut, startAngle, endAngle);
    var path = [arcIn, lines[0], arcOut, lines[1]].join(' ');

    return path;
}