D3數據綁定 - 當週圍加上括號數據

Question

我在看類似這樣的多D3代碼示例：

var data = [1,2,3...]; 
var blah = d3.selectAll("#blah").data([data]).enter()...; 

但有時我會看到它，因爲這：

var data = [1,2,3...]; 
var blah = d3.selectAll("#blah").data(data).enter()... 

我寫的所有代碼都是第二種形式，我從來沒有遇到過任何問題，但我在線複製了一個代碼示例，這是第一種形式，當我刪除[]時它不起作用。

有人可以解釋爲什麼它有必要在這裏，當我們應該圍繞什麼已經是一個數組對象？

謝謝。

Answer 1

在d3。該data()方法接受三兩件事：

• 函數
• 陣列
• 無（當它用作吸氣劑）。

話雖這麼說，這是問題：

在大多數情況下，你可以簡單地傳遞["foo", "bar", "baz"]作爲數據。所以，如果您有：

var data = ["foo", "bar", "baz"]; 

你可以簡單的寫：

.data(data) 

然而，在某些情況下，當一個元素繼承父組的數據，你必須把它包在額外的一對括號（檢查this recent answer我寫了）。我們這樣做是因爲子元素作爲函數獲取其數據，父元素的數據被傳遞。

檢查：

var data = ["foo", "bar", "baz"]; 
 

 
var body = d3.select("body"); 
 

 
var divs = body.selectAll(".divs") 
 
\t .data(data) 
 
\t .enter() 
 
\t .append("div"); 
 
\t 
 
var par = divs.selectAll("p") 
 
\t .data(d => d) 
 
\t .enter() 
 
\t .append("p") 
 
\t .text(d => d);

<script src="https://d3js.org/d3.v4.min.js"></script>

現在，同樣的代碼，有一對額外的括號：

var data = ["foo", "bar", "baz"]; 
 

 
var body = d3.select("body"); 
 

 
var divs = body.selectAll(".divs") 
 
\t .data([data]) 
 
\t .enter() 
 
\t .append("div"); 
 
\t 
 
var par = divs.selectAll("p") 
 
\t .data(d => d) 
 
\t .enter() 
 
\t .append("p") 
 
\t .text(d => d);

<script src="https://d3js.org/d3.v4.min.js"></script>

的F第一個片段，3個div創建。對於每一個，一個字符串數據被傳遞給段落（d3會轉變每個字符串，如"foo"，在一個數組中，例如["f", "o", "o"]，並且每個div會得到3段）。

在第二個片段中，只創建了一個div（因爲我們的數組長度僅爲1），並且整個內部數組（["foo", "bar", "baz"]）被傳遞給段落。