I'm categorizing data into groups such as rich, poor, and all. I'm using a dropdown to select these values to be displayed on a scatterplot. The first transition works correctly, with text labels appearing as expected. However, upon selecting another option and triggering the second transition, half of the circles disappear and subsequent transitions become jumbled. It only seems to work properly when the all option is selected, then the first transition works again but gets messed up after that.
function render someData {
xScale
.domain[
d3.min(someData function(d) {
return +d.poorToys;
})
d3.max(someData function(d) {
return +d.poorToys;
})
];
yScale
.domain[
d3.min(someData function(d) {
return +d.richToys;
})
d3.max(someData function(d) {
return +d.richToys;
})+ 20
];
//Adding circles
... more code follows ...
}
The issue appears to begin here.
circles
.enter()
.append("circle")
.attr("cx" function(d) {
...more code...
})
... more code ...
} else {
svg.selectAll("text.labels")
.transition()
.duration(1000)
.style("opacity", 0)
.remove();
}
}