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）点，你需要创建一个像dToString = function(d) {return "(" + d.x + "," + d.y + ")";}这样的命名辅助函数，然后在设置属性时传入该函数的名称，并在需要时再次使用它。你比较旧的和新的。

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

2 个答案: