Question

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

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

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

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

谢谢，斯科特

Answer 1

如果要将选区缩小为所选元素的子集，请使用过滤器。如果您想选择后代元素，请使用选择或 selectAll 。

通常，过滤器用于根据数据或索引过滤元素。但是，您可以在过滤器功能中将所选元素作为this进行访问。因此，如果您选择了某些元素，并且希望将该选择仅减少为不透明度为1的元素，则可以说：

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

为安全起见，您可能更愿意查看computed style而不是元素的样式属性。这样，如果从样式表继承不透明度，您将获得正确的值;否则，当继承样式时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");