D3.js在更新数据时附加null元素

Question

我有一个d3选择，如下所示，其中userData是用户名的字符串数组：

var selector = container
   .selectAll(".userIcon").data(userData);

现在我有一个点击命令，可以将数据添加到userData，并为每个用户名添加圆圈。

userData.push(name);

selector = selector .data(userData).enter()
   .append("circle")
   .attr("class", "userIcon");

但每次我在userData中添加一个名字时，当我附加圆圈时，我会得到空值。

添加第三个名称后：

添加第四个名称后：

当我在输入期间追加时，我不知道为什么我有空值。我错过了什么吗？