d3 v4：条形图的数据连接

Question

我试图在此处采用条形图示例以了解d3 v4中的数据联接。 输入选择效果很好，但我不知道如何更新。 到目前为止，这里是我所拥有的： 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

在首先合并组之后，然后更新矩形和文本，似乎可以工作： https ://bl.ocks.org/ckothari/699b112b6e1376779e65973bbabdced6