title: D3 V4 - Using merge with general update pattern
body: <p>I was able to successfully use the enter/update/exit logic to update my visualization, however, I'm doing so without using the new <code>.merge()</code> function outlined here: <a href="https://github.com/d3/d3/blob/master/CHANGES.md#selections-d3-selection" rel="nofollow">https://github.com/d3/d3/blob/master/CHANGES.md#selections-d3-selection</a> so something makes me think I'm still doing it the v3 way.  Whenever I try to use the <code>.merge()</code> function based on the documentation, it always breaks it.  </p>
  
  <p><strong>I'm hoping you guys can help me figure out how to update the logic and do it the v4 way.</strong></p>
  
  <p>For example, in the following code I join the data to <code>&lt;g&gt;</code> elements and then nest other elements (<code>&lt;path&gt;</code> and <code>&lt;text&gt;</code>) inside of the <code>&lt;g&gt;</code> elements.  So for each block of code where I append data to <code>vis.group</code> I need to write an identical block of code which calls the <code>dataJoin</code> for the update.</p>
  
  <pre><code>// 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);
    });
  
  ...
  </code></pre>
  
  <p>All of it seems way too repetitive, and I thought v4 was supposed to fix that by allowing me to use <code>.merge()</code>, but when I try something like the below, it doesn't work:</p>
  
  <pre><code>// 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);
      });
  </code></pre>
  
  <p>I'm expecting to be able to combine the separate enter and update blocks into one combined enter + update block with merge.  Am I wrong on the logic here?</p>
  
  <p><strong>FULL EXAMPLE:</strong> <a href="https://jsfiddle.net/bschxdjb/2/" rel="nofollow">https://jsfiddle.net/bschxdjb/2/</a></p>