title: d3 v4: Data join for bar chart
body: <p>I am trying to adopt bar chart example <a href="https://bl.ocks.org/mbostock/7341714" rel="nofollow">here</a> to understand data joins in d3 v4. Enter selection works fine but I am unable to figure out how to update. Here is what I have so far: <a href="https://jsfiddle.net/hackygkL/" rel="nofollow">https://jsfiddle.net/hackygkL/</a>
  Can someone please help me.</p>
  
  <pre><code>var width = 420,
      barheight = 30;
  
  var svg = d3.select('#bar-chart')
          .append('svg')
          .attr('width', width + 50)
          .attr('height', 1000);
  
  
  
  var scale = d3.scaleLinear()
          .range([0, width]);
  
  
  function createBar(data) {
      scale.domain([0, d3.max(data)]);
      var barGroups = svg.selectAll('g')
              .data(data, function(d){return d;});
  
      barGroups.exit().remove();
  
      var enterGroup = barGroups.enter() //ENTER
          .append('g')
          .merge(barGroups) //UPDATE
          .attr("transform", function(d, i){
              return "translate(0, " + barheight * i + ")";
          });
  
      var bars = barGroups.selectAll('rect');
  
      enterGroup.append('rect') //ENTER
          .attr('class', 'bar')
          .attr('height', barheight - 1)
          .merge(bars) //UPDATE
          .attr('width', function(d){
              return scale(d);
          })
          .attr('fill', 'steelblue');
  
      var texts = barGroups.selectAll('text');
  
      enterGroup.append("text") //ENTER
          .attr('class', 'text')
          .attr("y", barheight / 2)
          .attr("dy", ".35em")
          .merge(texts) //UPDATE
          .attr("x", function(d) { return scale(d) + 10; })
          .text(function(d) { return d;});
  }
  </code></pre>