从选择中排除元素

时间:2016-04-08 19:39:08

标签: javascript d3.js foreach selection

从选择中排除某个项目(或两个或几个)的最简单方法是什么?

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

2 个答案:

答案 0 :(得分:3)

对于de d3框架,您可以使用 selection.filter(selector)。使用filter函数,您可以为要过滤的元素提供返回false的函数。文档:https://github.com/mbostock/d3/wiki/Selections#filter

对于&#39; PS&#39;,在d3上没有forEach,你必须使用每个功能。

以下代码应该有效。

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

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

答案 1 :(得分:1)

在forEach中,您可以访问&#39; i&#39;这是索引。由于第三项等于索引2(由于它基于0),因此您只需添加if语句。

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