0
私はd3.jsを初めて使い、ビジュアルコミュニケーションの背景を持っているので視覚的にデータを魅力的にする方法を模索しています。 あなたのエキスパートが私にいくつかのアニメーションに直面している課題を解決する手助けをすることができるかどうか疑問に思っていました。D3.jsドーナツチャート（アスタットプロット）をページ遷移にアニメーション表示するにはどうすればいいですか
私は弾力のあるエフェクトを使ってページの読み込み時にグラフをアニメーション化したいと思っていました。 ここで私が想像している移行を伴う棒グラフの例として、
var bardata = [];
for (var i=0; i < 100; i++) \t {
\t bardata.push(Math.round(Math.random()*30))
}
var height = 400,
width = 600,
barWidth = 50,
barOffset = 5;
var tempColor;
var tooltip = d3.select('body').append('div')
\t \t \t \t .style('position', 'absolute')
\t \t \t \t .style('padding', '0 10px')
\t \t \t \t .style('background', 'white')
\t \t \t \t .style('opacity', 0)
var color = d3.scale.linear()
\t \t \t \t .domain([0, bardata.length*.33, bardata.length*.66, bardata.length])
\t \t \t \t .range(['#FFB832','#C61C6F', 'red', 'blue'])
var yScale = d3.scale.linear()
\t \t \t \t .domain([0, d3.max(bardata)])
\t \t \t \t .range([0, height]);
var xScale = d3.scale.ordinal()
\t \t \t \t .domain(d3.range(0, bardata.length))
\t \t \t \t .rangeBands([0, width])
var myChart = d3.select('#chart').append('svg')
\t \t \t .attr('width', width)
\t \t \t .attr('height', height)
\t \t \t .selectAll('rect').data(bardata)
\t \t \t .enter().append('rect')
\t \t \t .style('fill', function(d, i) {
\t \t \t \t return color(i);
\t \t \t })
\t \t \t .attr('width', xScale.rangeBand())
\t \t \t .attr('height', 0)
\t \t \t .attr('x', function(d,i) {
\t \t \t return xScale(i);
\t \t \t })
\t \t \t .attr('y', height - 0)
\t \t \t .on('mouseover', function(d) {
\t \t \t \t tooltip.transition()
\t \t \t \t \t .style('opacity', .9)
\t \t \t \t tooltip.html(d)
\t \t \t \t \t .style('left', (d3.event.pageX - 35) + 'px')
\t \t \t \t \t .style('top', (d3.event.pageY - 35) + 'px')
\t \t \t \t tempColor = this.style.fill;
\t \t \t \t d3.select(this)
\t \t \t \t \t .style('opacity', .5)
\t \t \t \t \t .style('fill', 'yellow')
\t \t \t })
\t \t \t .on('mouseout', function(d) {
\t \t \t \t
\t \t \t tooltip.transition()
\t \t \t \t \t .style('opacity', 0)
\t \t \t \t d3.select(this)
\t \t \t \t \t .style('opacity', 1)
\t \t \t \t \t .style('fill', tempColor)
\t \t \t });
myChart.transition()
\t \t .attr('height', function(d) {
\t \t \t return yScale(d);
\t \t \t })
.attr('y', function(d) {
\t \t \t return height - yScale(d);
\t \t \t })
.delay(function(d,i) {
\t return i * 15;
})
.ease('elastic')
.duration(1000)<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<body>
<div class="container">
<h2>Bar chart</h2>
<div id="chart"></div>
</div>
</body>今私はドーナツグラフのための同じ遷移を作りたかった、またはより良い以下、このようなアスタープロットは語りました。中央から外側へのページの読み込み時のアニメーション。 http://bl.ocks.org/bbest/2de0e25d4840c68f2db1
私はここ数週間何度も挑戦してきましたが、私はまだ新しいので、何か助けを求めてここに来なければなりませんでした。
ここにいくつかの専門家のアドバイスをお願いします！