4

SVG要素のjQueryのslideDownメソッドに相当するものはありますか? 今のところ、要素はかなり突然現れます。それを少し滑らせることで和らげたいと思います。

編集: ここの動的積み上げ棒グラフに基づいてコードを作成しています: http://benjchristensen.com/2011/12/16/dynamic-stacked-bar-chart-using-d3-js/

多くのバーを持つ 1 つのグラフの代わりに、1 つのバーを持つ多くのグラフがあります。グラフが表示されたら、ゆっくりと下にスライドするようにしたいです。

4

1 に答える 1

4

SVG が jQuery で簡単にサポートされるとは思えません。Keith Wood にはSVG 固有の jQuery ライブラリがあり、アニメーションを実行できます。

別のオプションは、SVG で動作するグラフィック ライブラリを使用することです。最初に頭に浮かぶのはD3.jsです。これは、SVG 要素を操作するための非常に使いやすいメソッドを提供します。さらに、セレクターのスタイルは、jQuery で慣れているものと似ています。

D3 を使用している場合は、トランジションメソッドを確認します。できることはたくさんあり、D3 は信じられないほど強力です。例は次のとおりです。

var rect = d3.select('#rectangle');
// this selects a rectangle.  Let's say that it starts at 
// the origin, or even off screen in your case   

rect.transition()
    .duration(250)
    .attr('x', 10)
    .attr('y', 20); 
    // this changes the x and y attributes
    // of the rectangle to 10 and 20 respectively
    // using a transition over a 250ms duration.

あなたが与えた特定の例では、y属性を変更して画面から開始し（たとえば、 ）、またはまたはそのようなものy = -1 * heightに遷移します。y = heighty = 200

于 2012-10-12T17:29:58.460 に答える