从选择中排除元素

Question

从选择中排除一项（或可能两项或几项）的最直接方法是什么？

例如，在下面的代码 (JSFiddle snippet) 中，我想更改除第三个以外的所有方块的 y 位置。我该怎么办？

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

P.S.: forEach函数包含一个错误，因为指令没有被执行，但我找不到我的错误。

Answer 1

在您的 forEach 中，您可以访问索引 'i'。由于第三项等于索引 2（因为它从 0 开始），您可以简单地添加一个 if 语句。

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

Answer 2

对于 de d3 框架，您可以使用 selection.filter（选择器）。使用 filter 函数，你提供了一个 returns false 的函数来过滤你想要过滤的元素。文档：https://github.com/mbostock/d3/wiki/Selections#filter

而对于 'PS'，d3 上没有 forEach，您必须使用 each 函数。

下面的代码应该可以工作。

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

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

从选择中排除元素

Exclude an element from a selection

javascript

d3.js

foreach

selection