d3 v4：棒グラフのデータ結合

Question

棒グラフの例hereを採用して、d3 v4のデータ結合を理解しようとしています。 Enter selectionは正常に機能しますが、更新方法を知ることができません。ここに私がこれまで持っているものがあります：https://jsfiddle.net/hackygkL/ 誰かが私を助けてくれますか？

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;}); 
} 

Answer 1

その後、rectsとテキストを更新し、最初のグループをマージした後に動作するようです： https://bl.ocks.org/ckothari/699b112b6e1376779e65973bbabdced6