javascript - Why selectAll("element") is important in d3js while generating a chart -

i'm learning d3js these days, following example have tried of d3js documentation.

<script>     var data = [4, 8, 15, 16, 23, 42];      d3.select(".chart").selectall("div").data(data).enter().append("div").style("width", function(d){return d * 10 + "px"; }).text(function(d){return d;}).attr("class", "bar"); </script> 

i'm not clear in why selectall() important in code snippet. without selectall() can generate chart, it's creating outside of body tag. can 1 me understand this. role of selectall() in here.

thanks.

the selectall statement allows manipulate set of dom elements, or without data binding. instance, modify paragraphs in page:

// select paragraphs in document , set font color red d3.selectall('p').style('color', 'red'); 

in d3, manipulate dom elements joining selection of dom elements (which may exist of not) elements in array. rewrite code clarity:

// data array var data = [4, 8, 15, 16, 23, 42];  // bind array elements dom elements var divs = d3.select(".chart").selectall("div").data(data);  // create divs on enter selection divs.enter().append("div");  // update style , content of div elements divs.style("width", function(d){return d * 10 + "px"; })     .text(function(d){return d;}).attr("class", "bar");  // remove divs on exit selection divs.exit().remove() 

suppose have div classed chart, , has nested divs:

<div class="chart">     <div></div>     <div></div> </div> 

when select('chart').selectall('div'), selecting div elements inside div of class chart. in case, have 2 of such div elements. binding selection data array select('chart').selectall('div').data(data), several things happen:

• the existing div elements bound first , second elements of array.
• the enter selection created. selection contains 4 placeholder dom elements. append div element each 1 .append('div'). enter selection appended divs selection.
• if there more divs data elements, remaining dom elements stored in exit selection, , removed divs.exit().remove().

you can learn more selections reading mike bostock's excellent tutorial how selections work.