D3 SVG 图表中的现有元素不会更新 - 所有元素都被视为 exit(） 和 enter(） 集

Existing elements in D3 SVG chart aren't updated - all is regarded as exit() and enter() sets

本文关键字：元素 exit enter 更新 SVG D3      更新时间：2023-09-26

我正在玩一个图表，图表显示13个g元素，每个元素都有一个圆圈。然后我在控制台中执行以下操作。验证给我的副本包含 13 个元素，短 7 个和长 20 个。当然，屏幕上没有任何变化。

var gees = d3.select("#graph2").selectAll("g");
var copy = gees.data();
var shorty = copy.slice(0,7)
var longy = shorty.concat(copy);
现在，我

执行以下内容，我预计数据集会有所不同，但不会像我看到的那样。如果我们从 13 个元素开始并减去 6(就像 shorty 的情况一样(，enter(( 集应该是 0，exit(( 集应该是 6，就像我计算的那样。但是，我的控制台自豪地显示它是 7 和 13。等效地，如果我们从 13 个元素开始并添加 7(就像 longy 的情况一样(，据我所知，enter(( 集应该是 7，exit(( 集应该是 0。再一次，我的控制台让我感到惊讶，声称它是 20 和 13。

gees.data(shorty).enter()
gees.data(shorty).exit()
[

阵列[7]]
[阵列[13]]

gees.data(longy).enter()
gees.data(longy).exit()
[

阵列[20]]
[阵列[13]]

我得出的结论是，所有 pre-exisint 元素都被丢弃(因此放入 exit(( 集中(，添加的数据被视为一个全新的集合(因此被视为 enter(( 集(。我可以接受这一点，但我读过的所有文章都指出，集合上的每个操作都应该依赖：

  1. 更新数据(( 中的内容
  2. 在 enter(( 中追加内容
  3. 删除 exit(( 中的内容

这些集合的大小正确。你只是没有看尺寸。您被控制台的数据演示所欺骗。运行这些命令应该可以消除混淆。我已经在圆圈而不是gs上这样做了，但它的逻辑相同。

mySet.data(shorterSet).exit().size()

6

mySet.data(shorterSet).enter().size()

0

mySet.data(longerSet).exit().size()

0

mySet.data(longerSet).enter().size()

7

相关文章：