समझना कि कैसे D3.js डेटा को

Question

पर डेटा से जोड़ता है, मैं D3.js दस्तावेज़ों के माध्यम से पढ़ रहा हूं, और दस्तावेज़ों से the selection.data method को समझना मुश्किल लगता है।

इस दस्तावेज में दिए गए उदाहरण कोड है:

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 बयान प्रत्येक टीआर नोड के लिए एक चार तत्व सरणी के लिए बाध्य है
• var td बयान तब का उपयोग करता है अपने डेटा, किसी भी तरह
के रूप में चार तत्व सरणी

लेकिन .data(function(d) { return d; }) वास्तव में वह डेटा कैसे प्राप्त करता है, और यह क्या लौटाता है?

Answer 1

जब आप लिखें:

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

डी 3 <foo> तत्वों, सरणी में प्रत्येक प्रविष्टि के लिए एक का एक समूह बनाता है। सबसे महत्वपूर्ण बात यह है कि यह उस डीओएम तत्व के साथ सरणी में प्रत्येक प्रविष्टि के लिए डेटा को __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 तत्व से जुड़े डेटा को दिखा रहा है और डेटा पर सबसेट को फिर से बांधने की क्षमता तत्वों:

 

Answer 2

कुंजी को समझ कर इस कोड को जा रहे कार्य की पहचान करने के लिए है कि चयन सरणियों डोम तत्वों की की सरणियों हो रहा है। बाहरी-अधिकांश सरणी को 'चयन' कहा जाता है, आंतरिक सरणी को 'समूह' कहा जाता है और उन समूहों में डोम तत्व होते हैं। आप d3js.org पर कंसोल में जाकर और d3.selectAll ('p') जैसे चयन करके इसका परीक्षण कर सकते हैं, आपको एक सरणी दिखाई देगी जिसमें 'पी' तत्व होते हैं।

अपने उदाहरण में, जब आप पहली बार selectAll ('tr') कहते हैं तो आपको एक समूह के साथ चयन मिलता है जिसमें सभी 'tr' तत्व होते हैं। फिर matrix का प्रत्येक तत्व प्रत्येक 'tr' तत्व से मेल खाता है।

लेकिन जब आप उस चयन पर selectAll ('td') कहते हैं, तो चयन में पहले से ही 'tr' तत्वों का एक समूह होता है।इस बार प्रत्येक तत्व प्रत्येक 'td' तत्वों के समूह बन जाएगा। एक समूह सिर्फ एक सरणी है, लेकिन इसमें एक parentNode प्रॉपर्टी भी है जो पुराने चयन का संदर्भ देती है, इस मामले में 'tr' तत्व।

अब जब आप 'td' तत्वों के इस नए चयन पर data(function(d) { return d; }) पर कॉल करते हैं, d प्रत्येक समूह के पैरेंट नोड से जुड़े डेटा का प्रतिनिधित्व करता है। तो उदाहरण में, 'पहले समूह में टीडी का सरणी [11975, 5871, 8916, 2868] से बंधेगा। 'टीडी' का दूसरा समूह [1 9 51, 10048, 2060, 6171] से बंधे हैं।

आप यहाँ बाध्यकारी चयन और डेटा के माइक Bostock की अपनी उत्कृष्ट व्याख्या पढ़ सकते हैं: http://bost.ocks.org/mike/selection/

Answer 3

काउंटर मैं डेटा के सूचकांक इस्तेमाल किया जा रहा दिखाने के लिए प्रयोग करें।

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]...