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()将仅在输入选择上.

在OP问题的情况下,有两个更新节点和零输入节点.因此,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().

原因在于维基...

在追加或插入时,输入选择会合并到更新选择中.现在,您可以在输入节点后仅将更新选择应用于更新选择,而不是将相同的运算符分别应用于输入和更新选择.如果您发现自己删除了整个选择的元素只是为了重新插入其中的大部分元素,请执行此操作.例如:

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

Answer 2

看看“一般更新模式”
我认为你没有触发 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();