0

私はこれに完全に混乱しています。http://bl.ocks.org/mbostock/raw/3808234/で文字の例を見てきました。更新された要素は、データセット内の文字の位置に応じて位置を変更します。

ここで、似たようなものを再現したいと思いましたが、div 要素 ( '.item's) を使用します。これまでのところ、私は持っています:

var displayData = function() {
    // DATA JOIN
    var items = d3.select('#data').selectAll('.item');
    items = items.data(data);
    // UPDATE
    items.transition().duration(500)
        .style('left', function(d, i) {
            return positions[i].left + "px";
        }).style('top', function(d, i) {
            return positions[i].top + "px";
        });

    // ENTER
    var div = items.enter().append('div')
        .attr('class', 'item')
        .style('left', function(d, i) {
            return positions[i].left + "px";
        }).style('top', function(d, i) {
            return positions[i].top + "px";
        })
        .style('opacity', 1e-6)
        .transition().duration(TRANSITION_DURATION)
        .style('opacity', 1);

    // EXIT
    items.exit().transition().duration(500).style('opacity', 0).remove();
}

positions次のような、事前に計算された位置 (画面サイズによって異なります) を持つオブジェクトの単純な配列です。

positions = 
[{left: 0, top: 0}, 
{left: 240, top: 0}, 
{left: 0, top: 360}, 
{left: 240, top: 360}]

したがって、4 つのデータ オブジェクトの配列が与えられた場合、上記のコードは、最初に呼び出されたときdata = [{a},{b},{c},{d}]に s の 2x2 グリッドを生成します。div.item

data = [{b},{a}]データを変更して混乱させるとどうなりますか。データ結合直後は、items次のようになります。

[Array[2]
0: div.item
1: div.item
length: 2
parentNode: div#data
__proto__: Array[0]
]

__data__of 0はdiv.itemobject を指しています{b}が、これは正しいと思いますが、古い位置を「忘れた」ため、最初と 2 番目の要素の位置を入れ替えることはできません。

別のシナリオ:元のデータをに変更するとします。data = [{b},{a},{e}]つまり、新しい要素を導入します{e}。次に、最初の 2 つの要素を (トランジションを使用して)交換し、最初に 3 番目の要素 ( ) を削除{c}して、新しい 3 番目の要素 ( ) をフェードインし{e}ます。これは可能ですか？そして、私は何を間違っていますか/何を誤解しましたか?

4

2 に答える 2

1

How Selections Workを読むことをお勧めします。

データをバインドするときにキー関数を使用していないという点で、あなたの例は元の例とは異なります。キー関数を指定しない場合、要素の位置 (インデックス) を使用して、どの要素が同じであるか (したがって、更新の選択のために保持する必要があります)、および追加/削除する必要がある要素がデフォルトで使用されます。

ドキュメントから：

キー機能が指定されていない場合、指定された配列の最初のデータムは現在の選択の最初の要素に割り当てられ、2 番目のデータムは 2 番目に選択された要素に割り当てられます。

したがって、新しいデータがバインドされたときに正しい要素が追加、更新、および削除されるように、キー関数を使用することをお勧めします。

于 2013-06-13T09:18:44.183 に答える
0

さらにいくつかの質問と例を読んだ後、問題はオブジェクトの一貫性に関係していることがわかりました( http://bost.ocks.org/mike/constancy/を参照)。data関数内で特定のキーを指定する必要がありました。

items = items.data(data, function(d){ return d.key; );
于 2013-06-13T09:17:51.443 に答える