Appending multiple non-nested elements for each data member with D3.js

Question

I would like to create multiple non-nested elements using d3 to create a structure like this:

    

        
 from data[0] &l         


        
      

Answer 1

You can also do this in a single select/enter cycle as follows

d3.select('#parent').selectAll('p').data(data).enter().
append('p').text(function(d) {return 'from data[0]')}).
select(function() { return this.parentNode; }).
append('p').text(function(d) {return 'from data[0]')});