Sunday, May 12, 2024
Homepage · d3.js
 Popular · Latest · Hot · Upcoming
141
rated 0 times [  144] [ 3]  / answers: 1 / hits: 61909  / 12 Years ago, tue, february 28, 2012, 12:00:00

I'm reading through the D3.js documentation, and am finding it hard to understand the selection.data method from the documentation.



This is the example code given in the documentation:



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; });


I understand most of this, but what is going on with the .data(function(d) { return d; }) section of the var td statement?



My best guess is as follows:




  • The var tr statement has bound a four-element array to each tr node

  • The var td statement then uses that four-element array as its data, somehow



But how does .data(function(d) { return d; }) actually get that data, and what does it return?


More From » d3.js
 Answers
47

When you write:



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


D3 creates a bunch of <foo> elements, one for each entry in the array. More importantly, it also associates the data for each entry in the array with that DOM element, as a __data__ property.



Try this:



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__ );


What you will see (in the console) is the object {msg:Hello,cats:42}, since that was associated with the first created q element.



If you later do:



d3.selectAll('q').data(function(d){

  // stuff

});


the value of d turns out to be that __data__ property. (At this point it's up to you to ensure that you replace // stuff with code that returns a new array of values.)



Here's another example showing the data bound to the HTML element and the ability to re-bind subsets of data on lower elements:



  no


[#87164] Monday, February 27, 2012, 12 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
sageallenv
Add To Favorites
Follow
Total Points: 458
Total Questions: 102
Total Answers: 104
Location: Venezuela
Member since Thu, Jul 15, 2021
3 Years ago
sageallenv questions
Wed, Jun 16, 21, 00:00, 3 Years ago
Fri, Apr 10, 20, 00:00, 4 Years ago
Sun, Feb 2, 20, 00:00, 4 Years ago
Mon, Nov 11, 19, 00:00, 5 Years ago
Mon, Feb 18, 19, 00:00, 5 Years ago
View All
;