The example looks like this:

a=[1,2,3,4,5];
svg.selectAll("rect").data(a)
a[1]=10;
a[4]=50;
svg.selectAll("rect").data(a)

The second and the fifth elements of a are changed. And I want to ONLY select these two elements and set their color as red. However, I don't know how to do that, or in other words, select these changed element in d3.js. (As I understand, enter() can't do this job). Does anyone have ideas about this?

The example looks like this:

a=[1,2,3,4,5];
svg.selectAll("rect").data(a)
a[1]=10;
a[4]=50;
svg.selectAll("rect").data(a)

The second and the fifth elements of a are changed. And I want to ONLY select these two elements and set their color as red. However, I don't know how to do that, or in other words, select these changed element in d3.js. (As I understand, enter() can't do this job). Does anyone have ideas about this?

• javascript
• d3.js

2 Answers 2

There might be a better way of doing this:

//update data array
a[4]=50;

//color update elements
svg.selectAll('rect')
    .filter(function(d, i){ return d != a[i]; })
    .style('color', 'red')

//bind updated data
svg.selectAll('rect').data(a)

You need a way to store the old data value so that you can pare it against the new one. Maybe add a custom data attribute like this:

a=[1,2,3,4,5];
svg.selectAll("rect").data(a)
    .attr("data-currentVal", function(d){return d});
a[1]=10;
a[4]=50;
svg.selectAll("rect").data(a)
    .style("fill", function(d) {
       if (d3.select(this).attr("data-currentVal") != d) {return red;}
       else {return black;}
    });

Live example (slightly fancied up so you can see the changes happening):
http://fiddle.jshell/5Jm5w/1/

Of course, for the more mon example where d is a plex object, you would need to have a way of accessing it's value(s) as a unique string, since the attribute value would always be coerced to string. For example, if you have an (x,y) point, you would need to create a named helper function like dToString = function(d) {return "(" + d.x + "," + d.y + ")";}, and then pass in the name of that function when you set the attribute, and use it again when you pare the old and new.