Update Selection in D3 is empty

问题

In my code, my update selection is always empty, as is my exit selection, so the transitions never run. Every time I refresh, I end up redrawing the entire DOM fragment as if it never existed before (i.e. I can remove everything but .enter and the behavior doesn't change).

I'm making use of a key function in data() to ensure the join is being made on a unique value instead of by position.

The entire code is at http://jsfiddle.net/colin_young/xRQjX/23/, but I've extracted what I think is the relevant section here (basically, I'm just trying to follow the General Update Pattern):

var key = function (d) {
    return d.index;
}

var filterDistance = function () {
var names = list.selectAll("div")
    .data(byDistance.bottom(40), key);

// Update
names.attr("class", "update");

// Add
names.enter()
    .append("div")
    .attr("class", "enter")
    .style("opacity", "0")
    .transition()
    .duration(500)
    .style("opacity", "1")
    .text(function (d) {
        return displayText(d);
    });

// Remove
names.exit()
    .transition()
    .duration(750)
    .style("opacity", "0")
    .remove();
};

回答1:

bewest at https://groups.google.com/forum/?fromgroups=#!topic/d3-js/9mrspdWqkiU was able to find the problem. It turned out that in my "working" summary display, I was using $('results').text('insert summary here') which of course wipes out anything else that I might have stuck in there (like my D3 generated divs for instance).

来源：https://stackoverflow.com/questions/15651056/update-selection-in-d3-is-empty