d3.js - D3 中的更新选择为空

Question

在我的代码中，我的更新选择始终为空，我的退出选择也是如此，因此转换永远不会运行。每次刷新时，我都会重新绘制整个 DOM 片段，就好像它以前从未存在过一样（即我可以删除除 .enter 之外的所有内容，并且行为不会改变）。

我正在使用 data() 中的键函数来确保连接是在唯一值而不是位置上进行的。

整个代码位于http://jsfiddle.net/colin_young/xRQjX/23/，但我已经提取了我认为是相关部分的内容（基本上，我只是想遵循一般更新模式）：

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

Answer 1

在https://groups.google.com/forum/?fromgroups=#!topic/d3-js/9mrspdWqkiU最下方能够找到问题。事实证明，在我的“工作”摘要显示中，我使用$('results').text('insert summary here')的当然是清除了我可能卡在其中的任何其他内容（例如我的 D3 生成的 div）。