web-dev-qa-db-ja.com

D3.jsトランジション

D3.jsを使用してアニメーションの棒グラフを作成しようとしています。この例のようにバーを1つずつ表示したい http://nvd3.com/ghpages/multiBar.html 。同様の動作を作成できましたが、モーションはバーの高さから始まり、バーはx軸に向かって構築されますが、モーションはx軸から始まり、例のようにバーの高さに移動します。 。

私のコードのはるかに簡略化されたバージョン： http://jsfiddle.net/gorkem/ECRMd/

どんな助けでも大歓迎です

d3.jsbar-charttransitions
20
Gorkem Yurtseven

座標系の原点は左上からのものであるため、「y」の値は各バーの上部に固定されています。 「y」の値を固定し、「高さ」を大きくすると、バーが小さくなっているように見えます。バーを下から成長させるには、「y」と「height」の両方を同時に遷移させる必要があります。

これはあなたが探しているものでなければなりません、私は2行だけを変更しました。

chart.selectAll("rect")
 .data(data)
 .enter().append("rect")
 .attr("x", function(d, i) { return x(i) - .5; })
 .attr("y", function(d) { return h - .5; })                  //new----
 .attr("width", w)
 .transition().delay(function (d,i){ return i * 300;})
 .duration(300)
 .attr("height", function(d) { return y(d.value); })
 .attr("y", function(d) { return h - y(d.value) - .5; });    //new-----

チャートの下部から「y」の値を開始しました（h-0.5）。次に、遷移するときに、「高さ」（y（d.value））を増やし、「y」（h-y(d.value))を同じ割合で減らします。これバーの下部を軸に固定する効果があります。

お役に立てれば！

43
jfisher

Xスケールが予想とは逆になっていることを覚えておいてください（バーは下から上に構築する必要があります（ここで、bottom = svgの高さ）。Transitionを使用してEnterでバーをアニメーション化します。

あなたが達成しようとしていることの例はここにあります： http://bl.ocks.org/jamesleesaunders/f32a8817f7724b17b7f1

ではごきげんよう、

ジム

0
jamesleesaunders