从选择中排除元素

Question

Which is the most straightforward way to exclude an item (or maybe two or few) from a selection?

For example, in the following code ( JSFiddle snippet ) I want to change the y-position for all squares except the third one. What have I to do?

var svg = d3.select("body")
  .append("svg")
  .attr("width", 320)
  .attr("height", 300);

for (var i=0;i<10;i++) {
svg.append("rect")
  .attr({
    x: 32*i,
    y: 0,
    height: 30,
    width: 30,
    fill: "green"
  })
} 

var rects=d3.selectAll("rect"); // this line has to be changed/completed to exclude the third rect

rects.forEach(function(rect, i){
    d3.select(rect).attr("y", 20)
})

PS: The forEach function contains an error since the instruction is not executed, but I'm not able to find my mistake.

Answer 1

For de d3 framework you could use the selection.filter(selector) . Using the filter function, you provide a function that returns false for the elements you want to filter. Documentation: https://github.com/mbostock/d3/wiki/Selections#filter

And for the 'PS', there's no forEach on d3, you must use the each function.

Code below should work.

var rects = d3.selectAll("rect").filter(function(d, i) { return i != 2; });

rects.each(function(d, i){
        d3.select(this).attr("y", 20);
})

Answer 2

Inside your forEach, you have access to 'i' which is the index. Since the third item is equal to an index of 2 (due to it being 0-based), you can simply add an if statement.

rects.forEach(function(rect, i){
    if (i !== 2) {
        d3.select(rect).attr('y', 20);
    }
});