困惑selection.filter

Question

我很難理解selection.filter。我想這一點，在一個空白文檔：

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

// [ Array[0] ] 

我預想的選擇有兩個元素，但它有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()。這正是您在類似於您的情況下所要做的 - 如果您可以過濾決定它的數據，則無需過濾選擇。