Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Understanding how D3.js binds data to nodes

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?

like image 458
Richard Avatar asked Feb 28 '12 11:02

Richard


People also ask

How does D3 bind data?

The data() function is used to join the specified array of data to the selected DOM elements and return the updated selection. D3 works with different types of data like Array, CSV, TSV, JSON, XML etc. You can pass two types of value to the data() function, an array of values (number or object) or a function of data.

How does D3 js work?

D3 is a JavaScript library and framework for creating visualizations. D3 creates visualizations by binding the data and graphical elements to the Document Object Model. D3 associates (binding) the data (stuff you want to visualize) with the DOM. This allows the user to manipulate, change or add to the DOM.

Is D3 js obsolete?

The JavaScript ecosystem has completely changed during this time, in terms of libraries, best practices and even language features. Nevertheless, D3 is still here. And it's more popular than ever.

What is D3 js explain select () selectAll () and data () in brief?

select() − Selects only one DOM element by matching the given CSS selector. If there are more than one elements for the given CSS selector, it selects the first one only. selectAll() − Selects all DOM elements by matching the given CSS selector. If you are familiar with selecting elements with jQuery, D3.


1 Answers

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 description

like image 160
Phrogz Avatar answered Nov 08 '22 06:11

Phrogz