示例如下所示:
a=[1,2,3,4,5]; svg.selectAll("rect").data(a) a[1]=10; a[4]=50; svg.selectAll("rect").data(a)
第二个和第五个元素a
被改变了.我想只选择这两个元素并将其颜色设置为红色.但是,我不知道该怎么做,换句话说,在d3.js中选择这些更改的元素.(据我所知,enter()
不能做这个工作).有没有人有这个想法?
可能有更好的方法:
//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)
您需要一种方法来存储旧数据值,以便您可以将其与新数据值进行比较.也许添加这样的自定义数据属性:
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;} });
实例(略微幻想,以便您可以看到发生的变化):http:
//fiddle.jshell.net/5Jm5w/1/
当然,对于d是复杂对象的更常见示例,您需要有一种方法可以将其值作为唯一字符串访问,因为属性值总是被强制转换为字符串.例如,如果你有一个(x,y)点,则需要创建一个名为helper的函数dToString = function(d) {return "(" + d.x + "," + d.y + ")";}
,然后在设置属性时传入该函数的名称,并在比较旧函数时再次使用它.新.