D3 - 更新时的元素数量正确，但值错误 [英] D3 - Correct number of elements on update, but wrong values

问题描述

我填充一个div与包含数组中的值的子div。第一遍，数组看起来像这样：

I am populating a div with child divs containing the values from an array. On first pass, the array looks like this:

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

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

My selection enter/update/exit looks like this:

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。

This works fine, giving me a div for each element containing a string.

当我再次运行该函数时，我的数据数组更新为：

When I run the function again, my data array updates to this:

    arr_subpop_unique = ["MAN_MADE", "NATURAL"]

更新返回两个div，但是它们包含CPL和NAP（索引值0和1）。有人可以解释为什么这不会用MAN_MADE和NATURAL替换前两个指示？

The update returns two divs, however, they contain "CPL" and "NAP" (index values 0 and 1). Can someone explain why this would not replace the first two indicies with "MAN_MADE" and "NATURAL"?

感谢您的帮助...试图获得enter /更新/退出D3中的数据连接！

Thanks for the help...trying to get the hang of enter/update/exit data joins in D3!

推荐答案

查看一般更新模式

i认为您没有触发d3的更新选择

take a look at "General update pattern"
i think you aren't triggering d3's update selection

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

这篇关于D3 - 更新时的元素数量正确，但值错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！