I need help updating a single data point and changing only the corresponding element without affecting all elements. However, I'm struggling to find the right solution.
An article suggests that using
var sel = svg.selectAll(...).data(...)sel.enter(...) for new data, and sel for both updated and new data together.
In this specific jsfiddle example, my aim is to color new elements in green and updated elements in blue. However, every existing element seems to turn blue instead of just those that have changed since the last update. How can I achieve updating only a single piece of data?
// ...
function update() {
// remove old classes
svg.selectAll("text").attr("class","");
// bind to new data
var sel = svg.selectAll("text").data(things);
// update - but this ends up affecting all elements in the selection?
sel.attr("class","update");
// enter
sel.enter()
.append("text")
.attr("class","enter")
.attr("x", function(d,i) { return 20*i; })
.attr("y", 20);
// update + enter
sel.text(function(d) { return d; });
// exit
sel.exit().remove();
}