D3 V4 - 一般的な更新パターンでマージを使用

Question

私は視覚化を更新するために入力/更新/終了ロジックをうまく使用することができましたが、ここで概説した新しい.merge()関数を使わずにそうしています：https://github.com/d3/d3/blob/master/CHANGES.md#selections-d3-selection私はまだそれをv3の方法でやっていると思う。ドキュメントに基づいて.merge()関数を使用しようとするたびに、常にそれが破られます。

私はあなたが私にロジックをアップデートし、それをv4のやり方で理解するのを助けてくれることを願っています。

は、例えば、次のコードに私が<g>要素と<g>要素の内部次いで巣他の要素（<path>と<text>）にデータを結合します。だから私はデータを追加するコードの各ブロックのvis.group私は更新のためにdataJoinを呼び出すコードの同じブロックを記述する必要があります。

// DATA JOIN 
var dataJoin = vis.clipPath.selectAll(".group") 
    .data(vis.displayData); 

// ENTER 
vis.group = dataJoin.enter().append("g") 
    .attr("class", "group") 
    .attr("transform", function(d) { 
    return "translate(0," + vis.y(d.registrationEndDate) + ")"; 
    }); 

// UPDATE 
dataJoin 
    .attr("transform", function(d) { 
    return "translate(0," + vis.y(d.registrationEndDate) + ")"; 
    }); 

// ENTER 
var path = vis.group.append("path") 
    .attr("class", "line") 
    .style("opacity", 0.1) 
    .style("fill", function(d) { 
    if (d.type === "currentEmployments") { 
     return "#50A2DA"; 
    } 
    }) 
    .attr("d", function(d) { 
    return addPath(d, vis); 
    }); 

// UPDATE 
dataJoin.select(".line") 
    .attr("d", function(d) { 
    return addPath(d, vis); 
    }); 

... 

それのすべてがあまりにも反復ようだ、と私は私が.merge()を使用できるようにすることでV4はそれを修正することになっていたと思ったが、私は以下のような何かをしようとすると、それは動作しません：

// ENTER 
var path = vis.group.append("path") 
    .attr("class", "line") 
    .style("opacity", 0.1) 
    .style("fill", function(d) { 
    if (d.type === "currentEmployments") { 
     return "#50A2DA"; 
    } 
    }) 
    .merge(dataJoin) // ENTER + UPDATE 
    .attr("d", function(d) { 
     return addPath(d, vis); 
    }); 

別々の入力ブロックと更新ブロックを組み合わせて1つの入力+更新ブロックとマージして結合することができると考えています。私はここで論理に間違っていますか？

FULL例：https://jsfiddle.net/bschxdjb/2/

Answer 1

私は、マージ関数に渡されただけの選択が間違っていると思います。アップデートを確認するfiddle：

// ENTER 
    vis.group = dataJoin.enter().append("g") 
    .attr("class", "group"); 

    // UPDATE 
    vis.group 
    .merge(dataJoin) 
    .attr("transform", function(d) { 
     return "translate(0," + vis.y(d.registrationEndDate) + ")"; 
    }); 

    // ENTER 
    var path = vis.group.append("path") 
    .attr("class", "line") 
    .style("opacity", 0.1) 
    .style("fill", function(d) { 
     if (d.type === "currentEmployments") { 
     return "#50A2DA"; 
     } 
    }) 
    .merge(dataJoin.select(".line")) 
    .attr("d", function(d) { 
     return addPath(d, vis); 
    }); 


    // Append Firm Name 
    vis.group.append("text") 
    .attr("class", "firm-name") 
    .style("font-weight", "bold") 
    .style("fill", function(d) { 
     if (d.type === "currentEmployments") { 
     return "#50A2DA"; 
     } 
    }) 
    .merge(dataJoin.select(".firm-name")) 
    .text(function(d) { 
     var label = d.name; 
     return label; 
    }) 
    .attr("transform", function(d) { 
     var range = vis.y(d.registrationBeginDate) - vis.y(d.registrationEndDate); 
     return "translate(50," + (range/2) + ")"; 
    }); 


    // Append Year range 
    vis.group.append("text") 
    .attr("class", "years") 
    .attr("fill", "#696969") 
    .merge(dataJoin.select(".years")) 
    .text(function(d) { 
     var count = d3.timeYear.count(d.registrationBeginDate, d.registrationEndDate); 
     var years = ''; 
     if (count > 1) { 
     years = " (" + count + " years)"; 
     } else if (count == 1) { 
     years = " (" + count + " year)"; 
     } else if (count < 1) { 
     years = " (<1 year)"; 
     } 
     var label = convertToYear(d.registrationBeginDate) + " - " + convertToYear(d.registrationEndDate) + years; 
     return label; 
    }) 
    .attr("transform", function(d) { 
     var range = vis.y(d.registrationBeginDate) - vis.y(d.registrationEndDate); 
     return "translate(50," + ((range/2) + 15) + ")"; 
    });