d3从条形图转换到饼图和背面 [英] d3 transitioning from bar to pie and back

问题描述

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

以下是摘录（SO required ..）

  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（''）; 
 
返回路径; 
} 
  

LIVE DEMO

So I have this notion that all single axis data should be allowed to be displayed in all the basic ways; and at the very least from a pie to a bar. Ideally this would be an animated transition, but thats were the difficulty comes in.

Getting a pie chart to work is easy enough, as is getting a bar chart. Here is what I have so far:

# 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"  

Obviously for this to work its got to be path element to path element, and the transition is working now. Problem is it looks like crap. The moment it starts it looks garbled, until it over and becomes decent bar chart.

I've been looking at this : http://d3-example.herokuapp.com/examples/showreel/showreel.html Which demonstrates a bar transitioning to a donut in much the way I would like. Looking at the source code, this is accomplished through a custom tween. (view source line 518)

Now I'm in over my head. What is going on here? How can I get this transition to work? Has anyone else out there dealt with this problem?

---

UPDATE

Just to be clear, below illustrations the intention of my transition abit more clearly.

---

Bounty clarity. I added a bounty to this question because I need an explanation of what was going wrong. Superboggly did that, so he got the bounty. However Amit Aviv's approach is superior, so I accept his answer as the most correct. I have also +1ed both.

解决方案

Here is my take: http://jsfiddle.net/amitaviv99/x6RWs/42/

My approach was to approximate both the arcs & bars using cubic bezier curves, with the exact same number of control points. The code is somewhat complicated, and need some work. But the result is quite smooth.

Here is an excerpt (SO requires..)

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

这篇关于d3从条形图转换到饼图和背面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！