D3中的更新选择为空 [英] Update Selection in D3 is empty

问题描述

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

我正在使用data()中的键函数来确保对唯一值而不是按位置进行联接.

整个代码位于 http://jsfiddle.net/colin_young/xRQjX/23/，但是我在这里提取了我认为是相关的部分(基本上，我只是想遵循

解决方案

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

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

解决方案

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).

这篇关于D3中的更新选择为空的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！