D3 -更新中正确的元素数，但值错误
D3 -更新中正确的元素数，但值错误
提问于 2015-03-31 02:01:28
我正在使用包含数组值的子div填充div。在第一次传递时，数组如下所示：
arr_subpop_unique = ["CPL", "NAP", "NPL", "SAP", "SPL", "TPL", "UMW", "WMT", "XER"]我的选择enter/update/exit如下所示：
var sizemapHeader = d3.select("#d3-sizemap-hr").selectAll("div")
.data(arr_subpop_unique)
sizemapHeader.enter().append("div")
.attr("class", "sizemap-hr-title ellipsis scroll_on_hover")
.html(function(d,i){ return d; });
sizemapHeader.exit().remove();这很好，为每个包含字符串的元素提供了一个div。
当我再次运行该函数时，我的数据数组将更新如下：
arr_subpop_unique = ["MAN_MADE", "NATURAL"]更新返回两个div，但是，它们包含"CPL“和"NAP”(索引值0和1)。有人能解释一下，为什么这不会用"MAN_MADE“和”自然“取代前两个指标呢？
感谢help...trying在D3中获得enter/update/exit数据联接的提示！
Stack Overflow用户
发布于 2015-03-31 09:16:31
值得注意的是，链接有点不对称，因为enter()有合并到更新选择中的副作用。这意味着，如果将特性添加到append()之后的更新选择中，它们也将添加到enter节点上。另一方面，更新选择不会合并到enter选择中。因此，在enter()之后链接的任何特性都将只在enter选择上。
在OP问题中，有两个更新节点和零输入节点。因此，在不存在的enter节点上添加HTML，而不更新两个更新节点的HTML。
所以，是的，这起作用..。
var sizemapHeader = d3.select("#d3-sizemap-hr").selectAll("div")
.data(arr_subpop_unique)
//ENTER
sizemapHeader
.enter()
.append("div")
.attr("class", "sizemap-hr-title ellipsis scroll_on_hover")
//UPDATE
sizemapHeader
.html(function (d, i) { return d; })
//EXIT
sizemapHeader
.exit()
.remove();但这不是..。
var sizemapHeader = d3.select("#d3-sizemap-hr").selectAll("div")
.data(arr_subpop_unique)
//ENTER
//sizemapHeader
.enter()
.append("div")
.attr("class", "sizemap-hr-title ellipsis scroll_on_hover")
//UPDATE
sizemapHeader
.html(function (d, i) { return d; })
//EXIT
sizemapHeader
.exit()
.remove();这在初始更新中中断(当更新选择为空时).
var sizemapHeader = d3.select("#d3-sizemap-hr").selectAll("div")
.data(arr_subpop_unique)
//UPDATE
sizemapHeader
.html(function (d, i) { return d; })
//ENTER
sizemapHeader
.enter()
.append("div")
.attr("class", "sizemap-hr-title ellipsis scroll_on_hover")
//EXIT
sizemapHeader
.exit()
.remove();当您跟踪您的代码时，您将看到在调用sizemapHeader之后，它的值发生了变化。
原因被埋在维基里..。
在追加或插入时，enter selection 将合并到更新选择中。与将相同的运算符分别应用于enter和update选择不同，您现在只可以在输入节点后将它们应用于更新选择。如果您发现自己移除了整个选择的元素，而只是重新插入其中的大多数元素，请这样做。例如：
var update_sel = svg.selectAll("circle").data(data)
update_sel.attr(/* operate on old elements only */)
update_sel.enter().append("circle").attr(/* operate on new elements only */)
update_sel.attr(/* operate on old and new elements */)
update_sel.exit().remove() /* complete the enter-update-exit pattern */页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29359373
复制相关文章
相似问题
腾讯云开发者
