D3.js 更新D3（v6）散点图不'；不要添加新的圈

我正在尝试创建一个（连接的）散点图。对于创建圆，我执行以下操作：

g
.selectAll（“.time analysis circle”）
.data（getData（））
.输入（）
.append（'圆'）
.attr（'cx'，d=>x（d.period）| | 0）
.attr（'cy'，d=>y（d.金额））
.attr（'r'，7）
.attr（'fill'，'#90A4AE'）

为了更新绘图，我执行以下操作：

let dots=d3
.selectAll（“.time analysis circle”）
.data（getData（））
dots.exit（）.remove（）
点
.transition（）
.attr（'cx'，d=>x（d.period）| | 0）
.attr（'cy'，d=>y（d.金额））
点
.输入（）
.append（'圆'）
.attr（'r'，7）
.attr（'fill'，'#90A4AE'）
.合并（点）
.transition（）
.attr（'cx'，d=>x（d.period）| | 0）
.attr（'cy'，d=>y（d.金额））

问题是不会在绘图中添加新的圆。例如，我有20个圆圈，新数据有5个圆圈，我会丢失15个圆圈，这很好，但是当新数据有10个圆圈时，我不会看到那5个新圆圈。正如您在下面的屏幕截图中所看到的，图表的最后一部分没有圆圈

有什么想法吗

我也尝试过，但没有成功：

d3
.selectAll（“.time analysis circle”）
.data（getData（））
.加入(
回车=>enter
.append（'圆'）
.attr（'r'，7）
.attr（'fill'，'#90A4AE'）
.打电话(
回车=>enter
.transition（）
.attr（'cx'，d=>x（d.period）| | 0）
.attr（'cy'，d=>y（d.金额））
),
更新=>更新
.打电话(
更新=>更新
.transition（）
.attr（'cx'，d=>x（d.period）| | 0）
.attr（'cy'，d=>y（d.金额））
),
exit=>exit.remove（）
)

好的，我自己找到了解决方案

首先，我选择了第二种方法（带有join的方法）。问题不在于更新，而在于selectAll。创建了新的圆圈，但不在正确的位置。长话短说，这是我选择圈的方式（请注意，我使用React，这就是为什么您会看到

svgContainer.current

）：

d3
.select（svgContext.current）//输入
.transition（）
.attr（'cx'，d=>x（d.period）| | 0）
.attr（'cy'，d=>y（d.金额））
),
更新=>更新
.打电话(
更新=>更新
.transition（）
.attr（'cx'，d=>x（d.period）| | 0）
.attr（'cy'，d=>y（d.金额））
),
exit=>exit.remove（）
)

希望这也能帮助其他人：）