瞭解D3.js如何將數據綁定到節點

我在閱讀D3.js文檔，發現很難從文檔中瞭解the selection.data method。瞭解D3.js如何將數據綁定到節點

這是示例代碼的文檔中給出：

var matrix = [ 
    [11975, 5871, 8916, 2868], 
    [ 1951, 10048, 2060, 6171], 
    [ 8010, 16145, 8090, 8045], 
    [ 1013, 990, 940, 6907] 
]; 

var tr = d3.select("body").append("table").selectAll("tr") 
    .data(matrix) 
    .enter().append("tr"); 

var td = tr.selectAll("td") 
    .data(function(d) { return d; }) 
    .enter().append("td") 
    .text(function(d) { return d; });

我明白這個最，但什麼是與var td聲明.data(function(d) { return d; })部分回事？

我最好的猜測如下：

的var tr語句已結合的四元件陣列的每個TR節點
的var td語句然後使用該四元件陣列作爲其數據，不知何故

但是.data(function(d) { return d; })實際上是如何獲取這些數據的，它會返回什麼？

來源

2012-02-28 Richard

這可能有助於閱讀[本教程]（http://bost.ocks.org/mike/join/）。 – Phrogz 2012-02-29 05:27:47

謝謝！我現在明白代碼中的'.enter（）'部分是怎麼回事。不過，我想我可能需要等待將來的教程才能理解數據鍵功能正在發生什麼。 – Richard 2012-02-29 11:57:15

我希望能儘快撰寫一篇新的教程，其中涵蓋了關鍵功能以及分層選擇（selectAll.selectAll）。 – mbostock 2012-03-01 03:29:55

當寫：

….data(someArray).enter().append('foo');

D3產生一束<foo>元件，一個用於所述陣列中的每個條目的。更重要的是，它還將數組中每個條目的數據與該DOM元素關聯起來，作爲__data__屬性。

試試這個：

var data = [ {msg:"Hello",cats:42}, {msg:"World",cats:17} ]; 
d3.select("body").selectAll("q").data(data).enter().append("q"); 
console.log(document.querySelector('q').__data__);

你將看到（控制檯）爲對象{msg:"Hello",cats:42}，因爲這是與第一次創建q元素相關聯。

如果以後做：

d3.selectAll('q').data(function(d){ 
    // stuff 
});

的d價值真可謂是__data__財產。（此時，由您決定是否將代碼// stuff替換爲返回一組新數值的代碼）。

Here's another example顯示綁定到HTML元素的數據以及重新綁定下層數據子集的能力元素：

no description

來源

2012-02-29 22:25:05 Phrogz

+1分享D3.js遊樂場！漂亮的工具！ – oluckyman 2013-04-12 06:29:56

理解的關鍵這是什麼代碼正在做的是要認識到選擇是數組DOM元素的陣列。最外層的數組稱爲「選擇」，內層數組稱爲「組」，這些組包含DOM元素。您可以通過在d3js.org中進入控制檯並進行選擇（如d3.selectAll（'p'））來測試，您將看到一個包含包含'p'元素的數組的數組。

在你的例子中，當你第一次調用selectAll（'tr'）時，你會得到一個包含所有'tr'元素的選擇。然後每個元素matrix與每個'tr'元素匹配。

但是，當您在該選擇上調用selectAll（'td'）時，選擇已經包含一組'tr'元素。這一次，這些元素中的每一個都將成爲'td'元素的組。一個組只是一個數組，但它也有一個引用舊選擇的parentNode屬性，在本例中爲'tr'元素。

現在，當您在此新選擇的'td'元素上調用data(function(d) { return d; })時，d表示綁定到每個組的父節點的數據。因此，在該示例中，第一組中的'td將與數組綁定[11975,5871,8916,2868]。第二組「td」與[1951，10048，2060，6171]綁定。

您可以閱讀邁克·博斯托克自己的選擇和數據的優秀解釋在這裏結合：http://bost.ocks.org/mike/selection/

來源

2014-06-10 16:56:55

謝謝！我認爲這個答案非常清楚，直截了當;比其他答案更多（這也提供有用的信息，沒有進攻） – wires 2015-08-12 23:28:22

感謝鏈接金。這足以讓我明白。此外，這促使我http://bost.ocks.org/mike/nest/ – VivekDev 2016-01-02 17:26:43

雖然Phrogz的評論有一些很好的信息，並且非常有用，但這個答案清楚地解釋了**精確**問題。我有同樣的困惑，當我看到'返回d;'返回**父**節點時，它會點擊。令人困惑的是，某些方法在不同的層次上工作。例如，'attr'可以處理單個元素，與'data'不同。謝謝！ – 2016-07-09 02:25:27

使用計數器我顯示正在使用的數據的索引。

var tr = d3.select("body").append("table").selectAll("tr") 
.data(matrix) 
.enter().append("tr") //create a row for each data entry, first index 
.text(function(d, i) { return i}); // show the index i.e. d[0][] then d[1][] etc. 

var td = tr.selectAll("td") 
.data(function(d) { return d; }) 
.enter().append("td") 
.style("background-color", "yellow") //show each cell 
.text(function(d,i) { return i + " " + d; }); // i.e d[from the tr][0] then d[from the tr][1]...

來源

2016-05-25 21:57:42 Mortis

瞭解D3.js如何將數據綁定到節點

回答

相關問題