First of all in this D3 Binding Data Example we shall take an array of numbers.

Now we make a selection and selectAll ‘h4’ elements. Even though the ‘h4’ elements don’t exist yet the selectAll method will create an empty array where the ‘h4’ elements can go.

The numbers array is counted and parsed by the data method.

Next we bind our data with the enter() method. This creates the ‘h4’ elements from each value in the numbers array. In this case five values, so five ‘h4’ elements are created.

And now we can append the ‘h4’ elements to the DOM (Document Object Model).

And lastly a text method takes the passed value (‘heading’) and gives each created ‘h4’ element that value.

And here is a working example.

See the Pen d3BarChartExample by Daniel (@Parsons) on CodePen.

Now to change the input going into each ‘h4’ element. Instead of the text value ‘heading’ being passed we use a function to get the values from the numbers array and pass each value to a ‘h4’ element.

Here is how that looks in a working example.

See the Pen D3BindingDataExample2 by Daniel (@Parsons) on CodePen.

The ‘d’ value being passed to the anonymous function is set to the value in the numbers array. As d3 loops through each value it attaches it to the array and passes the value to the ‘d’ input each time.

  1. d = numbers[0]
  2. d = numbers[1]
  3. d = numbers[2]
  4. d = numbers[3]
  5. d = numbers[4]

Check out the excellent tutorial below for more understanding of d3 data binding.

source: Binding data – Scott Murray – aligned left

More on D3 (Data Driven Documents)

D3 logo. D3 Binding Data Example.

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

Leave a Reply

Your email address will not be published. Required fields are marked *