d3js输入().在exit().remove()后追加

我先解释一下发生了什么…

var width = 600, height = 200;
var words = ["Hello", "world", "Wonderful"];
var wcwords = d3.select("#wordcloud")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
    .selectAll("text")
    .data(words);
    .enter()
    .append("text");  

wcwords现在是一个enter选择，恰好与update集合具有相同的结构，因为所有元素都是新的。因为使用了selectAll，所以选择被嵌套在g节点下:这是选择的父对象。

wcwords
    .attr("transform", function(d,i) {
        return "translate(" + [5, 20*i] + ")";
    })
    .text(function(d) { return d; });
wcwords.data(words.slice(0,2)).exit().remove();  

所有这些都是使用data方法作为选择器来删除一个DOM元素。新的选择(只有两个元素)没有在作用域中引用，wcwords 不变，所以实际上DOM现在与选择不同步了。

wcwords.data(words.concat(["No"])).enter().append('text')
    .attr("transform", function(d,i) {
        return "translate(" + [5, 20*i] + ")";
    })
    .text(function(d) { return d; });  

创建了一个新的选区，同样，wcwords对象保持不变。将wcwords的节点结构(不是DOM结构)与新的数据结构进行比较，因为前者有3个节点，后者有4个节点，而且因为data保留了索引，所以enter选择将由一组4个元素组成，前三个元素null和最后一个元素是新节点的数据对象。然后通过append语句将一个新的文本节点添加到wcwords的父节点(g)的末尾。由于第三个元素不在enter选项中，因此不会重新插入它。

基本原则是

1. data不会改变调用它的对象，它返回一个对新选择的引用(这里忽略)
2. data语句在构造进入、更新和退出选择时比较选择结构和数据结构。它不与DOM结构比较。

我猜你期望的顺序，因为你还没有分享，但也许你想要的是下面的东西。

var width = 70, height = 100;
    var words = ["Hello", "world", "Wonderful"];
    var outputLog = OutputLog("#output-log");
    var transitionLog = OutputLog("#transition-log");
    var wcwords = d3.select("#wordcloud").style("display", "inline-block")
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .style("font-size", "10px")
        .attr("transform", "translate(" + 10 + "," + 20 + ")")
        .selectAll("text")
        .data(words)
        .enter()
        .append("text")
        .style("opacity", 0);
    wcwords
        .text(function(d) { return d; })
        .attr("transform", function(d,i) {
            return "translate(" + [5, 20*i] + ")";
        })
        .call(step, 0, "in")
        .call(log, "wcwords.data(words) enter");
    // bind a new data set to the selection and return the update selection
    var wcwords = wcwords.data(words.slice(0,2))
        .call(log, "wcwords.data(words.slice(0,2)) update");
    // merge the enter selection into the update selection and update the DOM
    wcwords.enter()
        .append("text")
        .style("opacity", 0);
    wcwords.exit().transition().call(step, 1, "out").remove()
        .call(log, "exit");
    // modify the selection by rebinding the original data
    // but with an extra element concatenated
    // and return the update selection
    var wcwords = wcwords.data(words.concat(["No"]))
        .call(log, "wcwords.data(words.concat(['No'])) update");
    // update the DOM and merge the exit selection into the update selection
    wcwords.enter().append('text')
        .attr("transform", function(d,i) {
            return "translate(" + [5, 20*i] + ")";
        })
        .text(function(d) { return d; })
        .style("opacity", 0)
        .call(step, 2, "in")
        .call(log, "enter");
    function datum(n){
        return n ? d3.select(n).datum() : "";
    }
    function step (selection, s, type) {
        var id = Date.now(),
            opacity = {in: 1, out: 0},
            t = 1000,
            w = 0, b = "";
        selection.each(function(d){w = Math.max(w, d.length) });
        b = new Array(w+4).join('_')
        this.transition(Date.now()).delay(s * t).duration(t)
            .each("start." + id, function(d, i, j){
                var n = this, node = d3.select(n),
                    DOM_node = d3.select(selection[0].parentNode)
                    .selectAll(this.nodeName).filter(function(d){return node.datum() === d});
                DOM_node = DOM_node.length ? DOM_node[0][0] : null;
                transitionLog.writeLine(["start ", (""+id).slice(-4), s, type, (d+b).slice(0,w), style(this, "opacity") || "null", DOM_node === n].join("'t"))
            })
            .each("interrupt." + id, function(d){
                console.log(["'tinterrupt ", id, type, style(this, "opacity"), s].join("'t"))
            })
            .each("end." + id, function(d){
                var n = this, node = d3.select(n),
                    DOM_node = d3.select(selection[0].parentNode)
                        .selectAll(this.nodeName).filter(function(d){return node.datum() === d});
                DOM_node = DOM_node.length ? DOM_node[0][0] : null;
                transitionLog.writeLine(["end", (""+id).slice(-4), s, type, (d+b).slice(0,w), style(this, "opacity") || "null", DOM_node === n].join("'t"))
            })
            .style("opacity", opacity[type]);
        function style(n, a){return d3.select(n).style(a)}
    }
    function log(selection, title){
        outputLog.writeLine(title);
        outputLog.writeLine(this[0].map(datum), 1);
    }
    function OutputLog(selector) {
        var outputLog = d3.select(selector)
            .style({
                "display"    : "inline-block",
                "font-size"  : "10px",
                "margin-left": "10px",
                padding      : "1em",
                "white-space": "pre",
                "background" : "#fd9801",
            });
        outputLog.writeLine = (function() {
            var s = "";
            return function(l, indent) {
                this.text((s += ((indent ? "  " : "") + l + "'n")));
            }
        })();
        return outputLog
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="UTF-8"></script>
<svg id='wordcloud'></svg>
<div id="output-log"></div>
<div id="transition-log"></div>