d3.selectionで一般的な更新パターンが期待通りに機能しない

Question

次の単純な更新パターンが機能しない理由について私は困惑しています。私が見る限り、これは推奨General Update Patternに従います。

<script src="https://d3js.org/d3-selection.v1.min.js"></script> 
... 
    var dat = ["One","Two","Buckle my shoe"]; 
    var sel = d3.selectAll("p.test").data(dat); 
    sel.enter().append("p").classed("test", true); 
    sel.exit().remove(); 

    //update 1 ... doesn't work 
    sel.text(function(d) { return d;}) 

段落は正しく作成されますが、テキストは設定されません。しかし、私がこれを行うと：

 //update 2 ... this works as expected 
    d3.selectAll("p.test").text(function(d) { return d;}); 

...すべてうまくいきます。最初のバージョンは常に過去に働いていました。

更新：私はフルD3ライブラリを使用してみました...

<script src="https://d3js.org/d3.v4.min.js"></script> 

...と最初のバージョンは再び動作します。私はd3.selection以上必要ですか？

私の過去の慣行は、選択をパラメータとして受け取る別の更新機能を定義することでした。たとえば、function doUpdate(sel) { sel.text(...);}のサイズがのデータ要素の変更はほとんどないと考えられますが、多くの変更がの内容にあると考えられます。選択を変数として保存し、その上で更新を繰り返し実行することは以前よりうまくいきました。

Answer 1

リリースノートを勉強した後、いくつかの理由から、これは後方互換性がないと思われます。まず、短い答え：この理由は、in this article（おかげ@mbostock）を記載し、空の選択の問題に対する修正である

var update = sel.enter().append("p").classed("test", true).merge(sel); 
... 
update.text(function(d) { return d;}) //update block 

：これに

sel.enter().append("p").classed("test", true); 
... 
sel.text(function(d) { return d;})  //update block 

：

は、これを交換しますv3で私が最初に覚えていなかった点は、merge（）ブロックに取り組むための入力があるように、最初にのenter（）ブロックを実行する必要があるということでした。これは、merge（）コールがenter（）ブロックチェーンの終わりから来なければならないことを意味します。

多くの例が関数呼び出しの連鎖を使用しているため、変更文書の形式は隠れています。私は、入力/更新ブロックを別々の変数に分割することに慣れています。これは読みやすさを助けます（通常は）、機能を分離するために入力/更新アクションを養うことができるということを意味します。 ）（

var enter = sel.enter(); 
var update = enter.merge(sel); //Nope! Not populated at this point. 
enter.append(...);    //too late! Update block uses an empty selection. 

しかし、これは

d3.js版で

var enter = sel.enter(); 
enter.append(...); 
var update = enter.merge(sel); //defined after block is populated