d3.js
join
「更新中」要素と「入力中」要素を別々に選択する方法はありますか?d3.jsで要素を更新するだけを選択
updateAndEnter = d3.selectAll('element').data(data);
entering = updateAndEnter.enter();
exiting = updateAndEnter.exit();
updatingOnly = ??;
d3.js
join
「更新中」要素と「入力中」要素を別々に選択する方法はありますか?d3.jsで要素を更新するだけを選択
updateAndEnter = d3.selectAll('element').data(data);
entering = updateAndEnter.enter();
exiting = updateAndEnter.exit();
updatingOnly = ??;
はい、データ結合直後の選択には「更新のみ」要素が含まれています。 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();
これは少し混乱しています(あまりにも)私にとっては
私の喜びです:それだけで利用できるセットが+ 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');
}