Question

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

因此，在我的d3脚本中，我有一个部分，我将点分离成一个像这样的函数 -

 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();

但是，我仍在试图弄清楚如何以错开的方式设置动画。

Answer 1

看起来您不了解输入，更新，退出选择模式的工作原理。看看http://bost.ocks.org/mike/join/

简而言之，您正在呼叫exit()，但您没有绑定该呼叫中的任何数据，因此exit()选项将为空。

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

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

D3，删除要刷新的点数

1 个答案: