基於函數的子選擇

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");