|<- [[Modifying attributes and CSS]]|[[Creating subselections with enter()]] ->|

===== Binding data to the DOM =====

Plusieurs manière d'ajouter de l'information, la plus simple : méthode data

<code>
d3.selectAll('.item')
  .data([true, true, true]) // application aux seuls trois premiers éléments .item
  .style('background', 'cyan');
  
d3.selectAll('.item')
  .data([false, false, true]) // application aux troisième élément .item
  .style('background', 'cyan');


var colors = ['red'];

d3.selectAll('.item')
  .data(colors)
  .style('background', 'colors[0]');

var colors = ['red', 'orange', 'yellow'];

d3.selectAll('.item')
  .data(colors)
  .style('background', function(d) {
    return d
  });

d3.selectAll('.item')
  .data(colors)
  .style({
    'color', 'white',
    'background': function(d) {
      return d
    },
  });

colors = [
  { width: 100,
    color: 'red',
  },
  { width: 90,
    color: 'orange',
  },
  { width: 80,
    color: 'yellow',
  },
  ];

d3.selectAll('.item')
  .data(colors)
  .style({
    'color', 'white',
    'background': function(d) {
      return d.color;
    },
    'width': function(d) {
      return d.width + 'px';
    },
  });
</code>