javascript - D3 - 更新时元素的正确数量，但值错误

Question

我正在用包含数组值的子 div 填充一个 div。第一次通过时，数组如下所示:

arr_subpop_unique = ["CPL", "NAP", "NPL", "SAP", "SPL", "TPL", "UMW", "WMT", "XER"]

我的选择进入/更新/退出看起来像这样:

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”和“NATURAL”替换前两个指标吗？

感谢您的帮助...正在尝试掌握 D3 中进入/更新/退出数据连接的窍门!

Answer 1

值得注意的是，链接有点不对称，因为 enter() 具有合并到更新选择中的副作用。这意味着，如果您在 append() 之后将功能添加到更新选择中，它们也会添加到输入节点上。另一方面，更新选择不会合并到输入选择中。因此，在 enter() 之后链接的任何功能都只会出现在 enter 选择上。

以OP题为例，有两个更新节点和零输入节点。所以在不存在的enter节点上添加了html，两个update节点的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() 被调用后发生了变化。

原因埋在wiki中...

The enter selection merges into the update selection when you append or insert. Rather than applying the same operators to the enter and update selections separately, you can now apply them only once to the update selection after entering the nodes. If you find yourself removing an entire selection's elements only to reinsert most of them, do this instead. For example:

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 */