D3从过渡酒吧馅饼和背部 [英] d3 transitioning from bar to pie and back
问题描述
所以我有这个概念，所有的单轴数据应允许被显示在所有的基本途径;并在极从馅饼酒吧最少。理想情况下，这将是一个动画过渡，但是那是困难的用武之地。
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.
我一直在找这个：的http：// D3-例子。 herokuapp.com/examples/showreel/showreel.html
这表明一个酒吧过渡到一个甜甜圈的多，我想的方式。查看源$ C $ C，这是通过自定义的补间完成。 （查看源代码行518）
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?
更新
只是要清楚，下面的插图我升技转型的意图更清晰。
Just to be clear, below illustrations the intention of my transition abit more clearly.
赏金清晰度。我加入悬赏这个问题，因为我需要发生了什么事情错了的解释。 Superboggly这样做，让他得到赏金。然而阿米特特拉维夫的做法是优越的，所以我接受了他的答案最正确的。我也有+ 1ED两者。
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.
推荐答案
下面是我的看法： http://jsfiddle.net / amitaviv99 / x6RWs / 42 /
我的方法是既近似圆弧＆放大器;利用三次Bezier曲线，具有精确的相同数量的控制点吧。在code是比较复杂的，需要做一些工作。但结果还是比较流畅的。
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.
下面是摘录（SO需要..）
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屋！
