20

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

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

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

4

2 に答える 2

43

座標系の原点は左上からであるため、「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））を減らします。これには、バーの下部を軸に固定する効果があります。

お役に立てれば！

于 2012-07-06T16:02:27.113 に答える
0

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

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

ではごきげんよう、

ジム

于 2015-08-11T11:15:32.653 に答える