0

d3.jsを学習するためのテストプログラムをまとめています。ただし、トランジションを機能させることができないようです。ドキュメントを何度か読んだことがありますが、何が間違っているのかわかりません。

requestAnimationFrame と一緒にトランジションを使用することと関係があると思いますが、検索用語の組み合わせが有用な答えを提供することはありません。誰かが私が間違っている場所を教えてもらえますか?

        (function(){
        "use strict";
        var randArray = [];

        (function randomWalk(){
            for(var i=0;i<5;i++) randArray[i] = Math.round(Math.random() * 10) % 2? randArray[i]+1 || Math.round(Math.random() * 10) : randArray[i]-1 || Math.round(Math.random() * 10);
            setTimeout(randomWalk,800);
        })();

        (function update(){
            var d3 = window.d3 || {},
                mySelection = d3.select("div#container").selectAll("div").data(randArray);
                mySelection.enter().append("div").text(function(d){return ""+d;});
                mySelection.text(function(d){return ""+d;}).transition().style('padding-bottom',function(d,i){return (d*2.5)+'em'});

            requestAnimationFrame(update);
        })();

    })();

ここに jsfiddle があります: http://jsfiddle.net/Racheet/bPfFY/

4

1 に答える 1

2

あなたはほとんどそれを持っていました！あなたが投稿したフィドルには、「transition()」の前にピリオドがありませんでした:

mySelection.enter().append("div")
   .text(function(d){return ""+d;})
   .transition().style('padding-bottom',function(d,i){return (d*2.5)+'em'});

更新されたフィドル: http://jsfiddle.net/bPfFY/2/

現在、ページが読み込まれる際の遷移は 1 つだけです。バーを 0.5 秒ごとに変更する場合は、 update が呼び出されたときに randArray の値を更新する必要があります。

編集：コメントを読んだ後、フィドルを更新しましたhttp://jsfiddle.net/bPfFY/3/

動作させるためにいくつか変更しましたが、基本的に「.enter()」は「.data()」からページに要素を追加する場合にのみ使用されます。update を 2 回呼び出したとき、div は既に存在し、'.enter()' 選択には何もありません (詳細: http://bost.ocks.org/mike/join/ ) 。

update() が呼び出されたら、既存の div 要素を選択し、それらのデータ値を更新し、新しい値を使用してテキストとパディングを再描画する必要があります。

d3.select("div#container")
        .selectAll("div").data(randArray)
    .text(function(d){return ""+d;})
        .transition().duration(500)
    .style('padding-bottom', function(d, i){return (d*2.5 + 'px');});

また、requestAnimationFrame(update) を setTimeout(update, 1000) に変更しました。d3 はアニメーションを連鎖させないため、通常、別のアニメーションを開始する前に、1 つのアニメーションが完了していることを (「.duration(500)」で) 確認することをお勧めします。

于 2013-05-22T15:00:59.107 に答える