2012-10-29 16 views
5

d3.jsjoin「更新中」要素と「入力中」要素を別々に選択する方法はありますか?d3.jsで要素を更新するだけを選択

updateAndEnter = d3.selectAll('element').data(data); 

entering = updateAndEnter.enter(); 

exiting = updateAndEnter.exit(); 

updatingOnly = ??; 

答えて

15

はい、データ結合直後の選択には「更新のみ」要素が含まれています。 enter()を選択すると、入力された要素も含めて展開されます。

General Update Patternを参照してください:

// DATA JOIN 
    // Join new data with old elements, if any. 
    var text = svg.selectAll("text") 
     .data(data); 

    // UPDATE 
    // Update old elements as needed. 
    text.attr("class", "update"); 

    // ENTER 
    // Create new elements as needed. 
    text.enter().append("text") 
     .attr("class", "enter") 
     .attr("x", function(d, i) { return i * 32; }) 
     .attr("dy", ".35em"); 

    // ENTER + UPDATE 
    // Appending to the enter selection expands the update selection to include 
    // entering elements; so, operations on the update selection after appending to 
    // the enter selection will apply to both entering and updating nodes. 
    text.text(function(d) { return d; }); 

    // EXIT 
    // Remove old elements as needed. 
    text.exit().remove(); 
0

これは少し混乱しています(あまりにも)私にとっては

私の喜びです:それだけで利用できるセットが+ UPDATEをENTER実際にあると思われる(一緒にブレンド)と出口。

しかし、私は仕事をしたい、あるいは少なくとも更新された要素だけを特定したいのですが? 私は単純なジレンマを示した非常に単純な関数を書いています(基本的なhtmlページの最後にあるスクリプトタグに単純に入れてください)。唯一の出入りだけでクロームコンソールを入力し、それをテストするには、「正しく」

に反応するように見える:

manage_p(['append','a few','paragraph']) 
manage_p(['append','a few','new','paragraph']) 
manage_p(['append','paragraphs']) 

私は緑や赤の強調表示を得ることができ、私は多分白

を取得することはできません私たちはD3Jの仕様を見失っていますか?

敬具、 ファブリツィオ

function join_p(dataSet) { 

var el = d3.select('body'); 
var join = el 
.selectAll('p') 
.data(dataSet); 

join.enter().append('p').style('background-color','white'); 

join.style('background-color','green').text(function(d) { return d; }); 

join.exit().text('eliminato').style('background-color','red'); 
} 
関連する問題