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

i create multiple non-nested elements using d3 create structure this:

    <div id="parent">         <p> data[0] </p>         <p> data[0] </p>          <p> data[1] </p>         <p> data[1] </p>          <p> data[2] </p>         <p> data[2] </p>     </div> 

creating nested structures go like

    d3.select('#parent').selectall('p').data(data).enter().            append('p')...append('p') 

but maintain original selection after append, continue appending parent element. thank you!

the idomatic way of doing is nesting:

var divs = d3.select('#parent').selectall('p').data(data).enter().append('div');  divs.append('p') divs.append('p') 

which creates:

<div id="parent">   <div>     <p> data[0] </p>     <p> data[0] </p>   </div>    <div>     <p> data[1] </p>     <p> data[1] </p>   </div>    <div>     <p> data[2] </p>     <p> data[2] </p>   </div> </div> 

if won't work, save selection , repeatedly append:

var enterselection = d3.select('#parent').selectall('p').data(data).enter();  enterselection.append('p') enterselection.append('p') 

then sort you've added:

d3.select('#parent').selectall('p').sort(function(a, b){ return a.index - b.index; }) 

you'll need add index property each element of data describes sort order. normal i defined in context of particular selection, lost when reselect.