D3，移除点以用新点刷新

D3, removing points to refresh with new ones

本文关键字：新点 刷新 D3      更新时间：2023-09-26

我正在尝试设置一个函数，这样我就可以（希望）通过调用这个函数来刷新我的d3设置。我有一个设置了topojson的d3地图，并在上面绘制点——想要的效果是让用户更改地图上的数据。

因此，在我的d3脚本中，我有一个部分，我将分离出来的点绘制成一个函数，比如So-

 function plotPoints(data){
 svg.selectAll(".pin").exit().remove();
 svg.selectAll(".pin")
.data(data.earthquakes)
.enter().append("circle", ".pin")
.attr("r",function(d){
    return d.magnitude/2;
})
.on('mouseover', tip.show)
.on('mouseout', tip.hide)
.attr("transform", function(d) {
 return "translate(" + projection([
  d.lon,
  d.lat
 ]) + ")"
});
}

然后在最底部，我用一些样本数据启动它，比如-

plotPoints(places);

这工作得很好-然而，我正试图用在上面做什么

thesvg.selectAll(".pin").exit().remove();

是在添加第二个点之前删除所有第一组点。我似乎搞不清楚这个细节，也不知道为什么。当我按原样运行函数时（没有删除部分），它只是在旧点的基础上添加新点。非常感谢在这件事上提供一些帮助。如果有一种方法可以通过交错来设置点的动画，则可以获得额外的积分。我不知道这是否有帮助，但它在一个有角度的应用程序中。非常感谢您的阅读。

编辑：我能够通过使用来解决它

 svg.selectAll("circle").remove();

然而，我仍在努力弄清楚如何用交错来制作动画。

您似乎不了解进入、更新和退出选择模式是如何工作的。看看http://bost.ocks.org/mike/join/

简而言之，您正在调用exit()，但尚未绑定该调用中的任何数据，因此exit()选择将为空。

我建议您将svg.selectAll(".pin").exit().remove();更改为svg.selectAll(".pin").remove();

请注意，更改后的行中没有exit()。该行现在将选择具有pin类的所有DOM元素，并将它们从DOM中移除。

相关文章：