為什麼在 D3.js 中使用 selectAll(null) ？

選擇null：D3.js 中selectAll(null) 背後的邏輯

在D3.js 中，你可能會遇到類似這樣的程式碼用於添加DOM 元素：

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

雖然選擇特定元素很常見，例如“circle”、“p”或“.foo”，但選擇“null”可能看起來令人困惑。但是，此技術可確保「輸入」選擇始終與資料數組相對應，每個資料點對應一個元素。

「輸入」選擇

「輸入」選擇包含沒有對應 DOM 元素的資料元素。 D3.js 允許將資料綁定到現有 DOM 元素。但是，如果資料點多於 DOM 元素，則多餘的資料點屬於「回車」選擇。在此選擇上使用「append」函數會建立新的 DOM 元素，並將資料綁定到它們。

將資料綁定到現有元素

傳統上，選擇元素綁定如下所示：

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

circles.enter()
.append("circle");

此方法為現有圓形元素建立「更新」選擇，而「輸入」選擇處理沒有對應元素的資料點。

;selectAll(null)

但是，無論是否存在現有元素，selectAll(null) 都會傳回代表整個資料陣列的選擇。這可確保「輸入」選擇始終包含完整的資料集，無論 DOM 的狀態為何。

範例

為了說明這個概念，考慮以下範例：

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

即使沒有

最初，selectAll(null) 確保「輸入」選擇包含所有資料點，並相應地為它們建立段落。

總而言之，selectAll(null) 提供了一致的機制來確保「輸入」選擇包含所有資料點。 「選擇始終與資料數組對齊，無論 DOM 狀態如何，資料綁定都變得簡單。

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