javascript - d3 v4: Data join for bar chart -

i trying adopt bar chart example here understand data joins in d3 v4. enter selection works fine unable figure out how update. here have far: https://jsfiddle.net/hackygkl/ can please me.

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 * + ")";         });      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;}); } 

seems work after merging groups first, updating rects , texts: https://bl.ocks.org/ckothari/699b112b6e1376779e65973bbabdced6