基于函数的子选择

Question

我有一些元素，我试图根据特定的样式值（我只想要不透明度= 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");