1

我有一些元素，我试图根据特定的样式值过滤掉它们（我只想要不透明度 = 1 的元素）。我正在查看selection.filter以及selection.select和selection.selectAll的文档，但我对函数参数的正确用法感到困惑。

“select”表示它选择了第一个匹配元素（如预期的那样），但是过滤器文档中的示例显示它与一个函数一起使用，以在保持索引的同时选择“奇数”元素。

“selectAll”表示您可以返回一个元素数组，但函数参数以通常的方式为原始选择中的每个元素一个接一个地调用。我很难想象这个用例。

我想我想知道是否有任何教程或示例讨论这些函数的正确用法？

谢谢，斯科特

4

1 回答 1

9

如果要将选择减少到选定元素的子集，请使用filter。如果要选择后代元素，请使用select或selectAll。

大多数情况下，过滤器用于根据数据或索引过滤元素。this但是，您可以像在过滤器函数中一样访问选定的元素。因此，如果您选择了一些元素，并且您想将该选择减少到仅那些不透明度为 1 的元素，您可以说：

var opaque = selection.filter(function() {
  return this.style.opacity == 1;
});

为了安全起见，您可能更喜欢查看计算的样式而不是元素的样式属性。这样，如果不透明度是从样式表继承的，您将获得正确的值；否则，当样式被继承this.style.opacity时将是空字符串。

var opaque = selection.filter(function() {
  return window.getComputedStyle(this, null).getPropertyValue("opacity") == 1;
});

或者等效地，选择节点并使用selection.style：

var opaque = selection.filter(function() {
  return d3.select(this).style("opacity") == 1;
});

如果您按数据或按类而不是按计算的样式属性进行过滤，您可能会发现它更容易。例如，如果您在节点上设置了一个类，则可以改为按类过滤选择：

var opaque = selection.filter(".opaque");
于 2012-04-10T21:09:26.827 回答