為什麼在 D3.js 中使用 selectAll(null) 來追加元素？

選擇 null：為什麼在 D3 中使用 selectAll(null)？

背景

在D3 中，常常會看到這樣的模式：

var circles = svg.selectAll(null)
    .data(data)
    .enter()
    .append("circle");

這段程式碼將元素附加到DOM，但為什麼要用selectAll(null)呢？對於特定元素不應該是 selectAll("circle") 或 selectAll("p") 嗎？

回車選擇

D3.js 中「回車」選擇的說明：

將資料綁定到元素時，有三種情況：

1. 元素和資料點數量相等。
2. 元素數量多於數據點。
3. 資料點多於元素。

在場景 #3 中，沒有對應元素的資料點屬於「輸入」選擇。在「輸入」選擇中使用追加會為不符的資料建立新元素。

綁定到現有元素

建議的程式碼片段 var Circles = svg.selectAll("circle").data(data ) 選擇資料並將其綁定到現有圈子。隨後的 Enter() 呼叫處理沒有符合元素的資料點。

使用selectAll(null)

雖然在不存在圓圈時使用selectAll("circle") 可以工作，但使用selectAll(null) 可以提供一致保證「輸入」選擇始終對應於資料數組中的元素。這種方法確保為所有不匹配的資料點附加新元素。

結論

下面的範例示範如何使用 selectAll(null) 將段落附加到正文：

var body = d3.select("body");
var data = ["red", "blue", "green"];
var p = body.selectAll(null)
  .data(data)
  .enter()
  .append("p")
  .text(d => "I am a " + d + " paragraph!")
  .style("color", String)

以上是為什麼在 D3.js 中使用 selectAll(null) 來追加元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！