d3中的可重用圖表：創建和更新選擇如何工作？

Question

若干的reusable charts例子，如histogram，包括以下內容：

// select the svg element, if it exists 
var svg = d3.select(this).selectAll("svg").data([data]); 

// append the svg element, if it doesn't exist 
svg.enter().append("svg") ... 

...其中this是當前的DOM元素和data是一個已經綁定到它的數據。據我所知，這個習慣用法允許在第一次調用圖表函數時創建圖表，但如果您喜歡，則不會在隨後的調用之後「重新創建」。但是，有沒有人能詳細解釋這個習語呢？例如：

• 爲什麼使用.selectAll("svg")而不是.select("svg")？
• 爲什麼不是.empty()用於檢查空的選擇？
• 是否可以將任何單元素數組傳遞給.data()？ （我假設這個數組的目的僅僅是返回輸入選擇。）

在此先感謝您的幫助。

Answer 1

當這是第一次被調用時，沒有SVG，因此選擇將包含傳遞給它的數據。在隨後的通話中，.enter()選擇將爲空，因此不會添加任何新內容。

關於具體的問題：

• .selectAll()返回其然後可以匹配傳遞給.data()陣列的陣列。
• .empty()可以使用，但它不是必要的 - 如果選擇是空的，則什麼都不會發生。檢查.empty()會添加一個if聲明並具有完全相同的效果。
• 是的。例如，查看this tutorial以獲取更多關於選擇的更多細節。