D3 -更新中正确的元素数，但值错误
我正在使用包含数组值的子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数据联接的提示！
回答 3
Stack Overflow用户
发布于 2015-03-31 02:09:19
看看“一般更新模式”
我认为你没有触发d3的更新选择。
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")
sizemapHeader
.html(function(d,i){ return d; });
sizemapHeader
.exit()
.remove();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用户
发布于 2015-03-31 03:13:57
只是给出了一个不同的答案柏拉图提供了..。
在某些情况下，您可能希望更改的数据被确认为“新的”，即。成为enter选择的一部分，而不仅仅是update的一部分。在您的示例中，它被认为是update选择的一部分，因为您的数据是基于索引绑定到DOM元素的(这是默认的)。您可以通过向data调用传递第二个参数来改变这种行为。
有关详细信息，请参阅https://github.com/mbostock/d3/wiki/Selections#data。它被称为key参数。
下面是一个示例：
var sizemapHeader = d3.select("#d3-sizemap-hr").selectAll("div")
.data(arr_subpop_unique, function(d, i) { return d; });
sizemapHeader.enter().append("div")
.attr("class", "sizemap-hr-title ellipsis scroll_on_hover")
.html(function(d,i){ return d; });
sizemapHeader.exit().remove();data函数调用的第二个参数现在将确保数据按值而不是通过数组中的索引绑定到DOM元素。
下次使用新数据调用函数时，任何当前不绑定到DOM元素的值都将被视为新的和enter选择的一部分。
这两种情况都是有用的，取决于您试图实现的目标。
https://stackoverflow.com/questions/29359373
复制相似问题
腾讯云开发者
