Javascript D3 v4重新呈现嵌套对象，存在“enter（）”和“exit（）问题”`

我试图显示一些用

元素包装的圆圈。这个包装对我来说很重要，因为在现实世界中，我希望其他元素也在我的团队中。问题是，下面示例中的圆不会通过第一次

渲染（myObjects）

调用显示，如果单击渲染按钮，它们会显示出来

第二个问题是，当我按下“更新”按钮时，先前绘制的圆不会被删除，新的圆将在它们上面渲染

var svg=d3.select（'body'）.append（'svg'））
.attr（'宽度'，250）
.attr（'height'，250）；
//渲染数据
函数渲染（基准）{
//束缚
变量组=svg。选择全部（“g”）。数据（数据）；
groups.enter（）.append（'g'）；
var circles=groups.append（“circle”）.attr（'r'，10）
.attr（'cx'，函数（d）{
返回d.x；
})
.attr（'cy'，函数（d）{
返回d.y；
});
groups.exit（）.remove（）；
}
var myObjects=[{x:100，y:100}，{x:130，y:120}，{x:80，y:180}，{x:180，y:80}，{x:180，y:40}]；
var newObjects=[{x:200，y:120}，{x:150，y:160}，{x:20，y:80}，{x:80，y:60}，{x:100，y:20}]；
函数removeEls（）{
svg.selectAll（'circle'）.remove（）；
}
渲染（myObjects）
svg{
宽度：500px；
高度：500px
}
钮扣{
浮动：左
}
正文{
文本锚定：中间；
}
圈{
填充物：橙色；
笔画：橙色；
填充不透明度：0.5；
}

更新
伦德尔
removeEls
您的代码中有两个小问题：

您在
组中添加了圆，而不是在
组中添加了圆。enter（）
，因此在第一次绘制时不显示圆的问题

添加数据时忘记添加标识符，因此脚本无法检测哪些数据是新的，哪些数据不是。我添加了一个d.x/d.y标识符，这在您的情况下有效，但我建议您添加一个真正的唯一标识符。类似于在对象列表中添加字段id
以下是带有更正的片段：


var svg=d3.select（'body'）.append（'svg'））
.attr（'宽度'，250）
.attr（'height'，250）
.append（'g'）；
//渲染数据
函数渲染（基准）{
//束缚
var groups=svg.选择全部（“g”）.数据（数据，d=>（d.x）/（d.y））；
var groupEnter=groups.enter（）.append（'g'）；
var circles=groupEnter.append（“circle”）.attr（'r'，10）
.attr（'cx'，函数（d）{
返回d.x；
})
.attr（'cy'，函数（d）{
返回d.y；
});
groups.exit（）.remove（）；
}
var myObjects=[{x:100，y:100}，{x:130，y:120}，{x:80，y:180}，{x:180，y:80}，{x:180，y:40}]；
var newObjects=[{x:200，y:120}，{x:150，y:160}，{x:20，y:80}，{x:80，y:60}，{x:100，y:20}]；
函数removeEls（）{
svg.selectAll（'circle'）.remove（）；
}
渲染（myObjects）
svg{
宽度：500px；
高度：500px
}
钮扣{
浮动：左
}
正文{
文本锚定：中间；
}
圈{
填充物：橙色；
笔画：橙色；
填充不透明度：0.5；
}

更新
伦德尔
removeEls
将removeEls（）放入渲染（）以在绘制前删除圆