Having an issue with a d3.js visualization that involves multiple small visualizations and a timeline. When the timeline changes, data points are supposed to be added or removed accordingly. Here is the code snippet responsible for updating:
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.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);
});
}
The issue arises when trying to remove circles using .exit().transition().remove() - the circles simply slide away instead of disappearing. However, manually inputting the same command into the Chrome console works fine. This discrepancy could be due to JavaScript's asynchronous nature, which I am not very familiar with. Any suggestions or insights would be greatly appreciated!
Please refer to the following links for a working example and the full code:
Working example: Code: https://github.com/haljin/d3-webchart/blob/master/Sensible/js/WebChart.js
To replicate the problem, drag the grey rectangle on the timeline onto the area without any data - the circles should disappear as intended with exit().transition().remove(), but they don't. Setting a breakpoint at that section and inputting the command manually into the Chrome console does work.