选择/检测d3.js中更改的元素？

Question

示例如下所示:

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()不能做这个工作).有没有人有这个想法？

Answer 1

可能有更好的方法:

//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)

Answer 2

您需要一种方法来存储旧数据值,以便您可以将其与新数据值进行比较.也许添加这样的自定义数据属性:

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 + ")";},然后在设置属性时传入该函数的名称,并在比较旧函数时再次使用它.新.