从选择中排除元素答案

【问题标题】：Exclude an element from a selection从选择中排除元素
【发布时间】：2016-04-09 04:03:32
【问题描述】：

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

例如，在以下代码 (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 函数包含一个错误，因为该指令没有执行，但我无法找到我的错误。

【问题讨论】：

ViZeke 给了你正确的答案，他证明了 each 在 D3 中的巨大优势（以及与 forEach 的区别）是它使用了 d、i 和 @ 987654327@。话虽如此，你不需要它。你可以简单地写rects.attr("y", 20);

标签： javascript d3.js foreach selection

【解决方案1】：

对于 de d3 框架，您可以使用 selection.filter(selector)。使用filter 函数，您可以提供一个函数，该函数为要过滤的元素返回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);
})

【讨论】：

【解决方案2】：

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

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

【讨论】：