我在 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 专家，所以我在这里有点不知所措，这在任何其他语言中都应该没问题...
任何想法都非常感谢！
从评论中添加，因为它们变得越来越大：
工作示例： http: //www.student.dtu.dk/~s103826/ 代码：https ://github.com/haljin/d3-webchart/blob/master/Sensible/js/WebChart.js
要查看问题：将时间轴上的灰色矩形（通过拖动边缘调整大小）拖到最后没有数据的区域 - 圆圈应该按照exit().transition().remove()但没有消失。但是，如果我在该区域设置断点并在 Chrome 控制台中键入相同的内容，它们会这样做。