title: d3 v4: merge enter and update selections to remove duplicate code
body: <p>I understand that <code>merge</code> can be used to combine enter and update selections in d3 v4, as in the simple example here: <a href="https://bl.ocks.org/mbostock/3808218" rel="nofollow noreferrer">https://bl.ocks.org/mbostock/3808218</a>. </p>
  
  <p>I have a scatter plot in which multiple variables are displayed on a shared x-axis, for different groups selected by a dropdown box. When a new group is selected, the overall set of datapoints is updated, with points for each variable added like this: </p>
  
  <pre><code>.each(function(d, i) {
          var min = d3.min(d.values, function(d) { return d.value; } );
          var max = d3.max(d.values, function(d) { return d.value; } );
  
      // Join new data with old elements
          var points = d3.select(this).selectAll("circle")
            .data(d.values, function(d) { return (d.Plot); } );
  
      // Add new elements
          points.enter().append("circle")
            .attr("cy", y(d.key))
            .attr("r", 10)
            .style("opacity", 0.5)
            .style("fill", function(d) { return elevColor(d.Elevation); })
            .merge(points) //(?)
            .transition()
            .attr("cx", function(d) { return x((d.value-min)/(max-min)); });
  
      // Remove old elements not present in new data
          points.exit().remove();
  </code></pre>
  
  <p>This whole piece of code is largely duplicated for the overall enter selection and again in the overall update selection (as opposed to the individual variables), which seems less than ideal. How would <code>merge</code> be used to to remove this duplicated code?  </p>
  
  <p>The full example is here: <a href="http://plnkr.co/edit/VE0CtevC3XSCpeLtJmxq?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/VE0CtevC3XSCpeLtJmxq?p=preview</a></p>