由selection.filter困惑

Question

我很难理解selection.filter。我在一份空白文件中尝试了这个：

d3.selectAll('rect')
    .data([1, 2, 3])
    .filter(function(d) { return d>1; })

// [ Array[0] ]

我希望选择有2个元素，但它有0.也许是因为我正在使用空的更新选择......

d3.selectAll('rect')
    .data([1, 2, 3])
  .enter()
    .filter(function(d) { return d>1; })

// []

现在看来我甚至没有选择。

如果DOM元素存在

d3.selectAll('rect').data([1, 2, 3])
  .enter().append('rect')

然后我选择并过滤

d3.selectAll('rect').filter(function(d) { return d>1; })

// [ Array[2] ]

它似乎有效。那么这里发生了什么？过滤器似乎在this example中适用于与任何DOM元素不对应的选项，因此我希望它可以在上面的第一个示例中使用。

Answer 1

.filter()函数仅适用于已经绑定了数据的选择，即在您调用.data()之后。您链接到的示例实际上并不像它看起来那样 - 让我重新说明一下：

var node = svg.selectAll(".node")
  .data(bubble.nodes(classes(root))
    .filter(function(d) { return !d.children; })
  )
  .enter().append("g")

.filter()函数实际上并未应用于此处的选择，而是应用于bubble.nodes()返回的数组。然后将其传递给.data()。这正是您在像您这样的情况下所做的事情 - 如果您可以过滤决定它的数据，则无需过滤选择。