Javascript d3.js transition（）.remove（）不工作

我对d3.js中的可视化有一个问题

我有三个组，包含几乎相同的可视化效果，是对“多个小”可视化效果的理解。可视化包含一个时间轴，在时间轴发生变化时，必须添加/删除相应的数据点。以下是执行更新的代码：

var channels = { bt: { x: 0, y: -100 }, sms: { x: -300, y: 200 }, call: { x: 300, y: 200 } };
        //Draw web for each channel
        for (channel in channels) {
            this.circles[channel] = this.web[channel].selectAll("circle")
                   .data(this.displayedNodes, function (d) {
                       return d.id;
                   });

            this.circles[channel].exit().transition().duration(500).attr("r", 0).remove();

            this.circles[channel].enter()
                   .append("circle")
                   .attr("class", "person")
                   .attr("r", 0)
                   .attr("cx", function (d) {
                       return d.friendScales[channel](chart.minScores[channel]).x;
                   })
                   .attr("cy", function (d) {
                       return d.friendScales[channel](chart.minScores[channel]).y;
                   })
                   .attr("fill", function (d) {
                       //return chart.clusterColors[d.cluster];
                       return chart.colors[channel];
                   })
                   .attr("stroke-width", 2)
                   .attr("stroke", function (d) {
                       return d3.rgb(chart.colors[channel]).darker();
                   })
                   .attr("id", function (d) {
                       return "bubble_" + d.id;
                   })
                   .on("mouseover", function (d, i) {
                       return chart.show_details(d, i, this);
                   })
                   .on("mouseout", function (d, i) {
                       return chart.hide_details(d, i, this);
                   });
        }

.exit（）.transition（）.remove（）部分什么也不做，圆圈只是滑开，因为它们的数据值现在是0。但是，如果我打开Chrome控制台并手动输入与计算结果完全相同的内容，它就可以正常工作。我假设这与JavaScript的异步模型有关，我不是JS高手，所以我有点不知所措，这在任何其他语言中都应该是好的

任何想法都非常感谢

从评论中补充，随着它们变得越来越庞大：

工作示例： 代码：

---

要查看问题：请将时间轴上的灰色矩形（通过拖动边调整大小）拖到末尾没有数据的区域上-圆圈应根据

exit（）.transition（）.remove（）

消失，但不要。但是，如果我在该区域设置一个断点并在Chrome控制台中键入相同的断点，他们会这样做。

多亏了Lars的帮助，我重新选择了所有圆圈，而不是使用现有的更新选择

this.circles

：）

---

我现在觉得自己很傻。

应该是这样的——你能发布一个完整的工作示例吗？@Larskothoff这里是工作示例：下面是完整的代码：这个示例对我来说没问题——我没有看到任何缩小的圆。到底哪里出了问题？如果选择时间线（最末端）指示的没有数据的时间段，圆圈应该完全消失，如

所示。displayedNodes

是[]对的，看起来在循环之后，所有圆圈都开始了新的转换。这将覆盖以前的任何转换。