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

Use append() for the first item and insert() for the second. This eliminates any need to sort afterwards (thanks to @scuerda's comment for pointing this out) (JSFiddle):

data = [{}, {}, {}];
var enterSelection = d3.select('#parent').selectAll('p').data(data).enter()

enterSelection.append('p').text(function(d, i) {return 'from data[' + i + ']'})
enterSelection.insert('p').text(function(d, i) {return 'from data[' + i + ']'})

This will give you the exact structure requested:

from data[0]

from data[0]

from data[1]

from data[1]

from data[2]

from data[2]