什麼時候使用selection.data（...）。something（）與selection.merge（）。something（）in d3？

當對new data is joined進行選擇時，我對d3中的UPDATE和MERGE之間的區別感到困惑。什麼時候使用selection.data（...）。something（）與selection.merge（）。something（）in d3？

ENTER很容易;它適用於新的元素。

EXIT很簡單;它適用於舊數據中的元素。

如何知道何時使用UPDATE與MERGE？

var thingies = d3.selectAll('.mythingy') 
thingies.data(newData).call(handle_update) // UPDATE 
    .enter().call(handle_enter)    // ENTER 
    .merge().call(handle_merge)    // MERGE 
    .exit().call(handle_exit)     // EXIT

？

來源

2017-06-16 Jason S

你總是要使用更新，所以問題是「何時合併」？如果您想將相同的邏輯應用於「輸入」和「更新」選擇，則合併。有時候，你想要在與'update'合併之前以不同的方式處理'enter'選項。在你的鏈接中，麥克將'.attr（「r」，2.5）'應用於輸入選擇，然後THEN與更新合併。更新選項已經應用了'.attr（「r」，2.5）'。 –

首先，沒有*更新vs合併*。「merge」是爲了去除D3 v2中引入的「魔術」而創建的。看看S.O.中的這個例子。 docs：https://stackoverflow.com/documentation/d3.js/5749/update-pattern/24929/merging-selections#t=201706162120068208209 –

TLDR：更新在概念上指的是一組元素; .merge()是一種可用於組合輸入和更新選擇的方法。

更新是一個概念，指的是在數據更改之前在DOM中並在數據更改後保留在那裏的DOM元素（即鏈接中維恩圖的中間部分）。沒有.update()方法，但是 - 您可以使用.selectAll()獲取您的更新選擇。

如果您將相同屬性/樣式應用於剛剛輸入的元素（.enter()選擇）並且已經存在，那麼這會導致一些冗餘。在D3v4中引入的.merge()方法提供了一個解決方案，您可以從中選擇輸入和更新元素。

仍然可以在不使用.merge()的情況下執行更新過程，並且在某些情況下，爲輸入和更新選擇編寫單獨的語句仍然有意義。

來源

2017-06-16 20:52:45 anbnyc

什麼時候使用selection.data（...）。something（）與selection.merge（）。something（）in d3？

回答

相關問題