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:

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

        <p> from data[1] </p>
        <p> from data[1] </p>

        <p> from data[2] </p>
        <p> from data[2] </p>
    </div>

creating nested structures would go something like

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

but I would like to maintain the original selection even after the append, so I could continue appending to the parent element. Thank you!

Adam Pearce · Accepted Answer · 2016-10-13T20:30:14.110

74

The idomatic way of doing is with 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> from data[0] </p>
    <p> from data[0] </p>
  </div>

  <div>
    <p> from data[1] </p>
    <p> from data[1] </p>
  </div>

  <div>
    <p> from data[2] </p>
    <p> from data[2] </p>
  </div>
</div>

If that won't work, save your selection and repeatedly append:

var enterSelection = d3.select('#parent').selectAll('p').data(data).enter();

enterSelection.append('p')
enterSelection.append('p')

then sort what you've added:

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

You'll need to add an index property to each element of data that describes the sort order. The normal i is only defined in the context of a particular selection, which is lost when we reselect.

edited Oct 13 '16 at 20:30

answered Jan 31 '14 at 17:15

Adam Pearce

9,243
2
38
35

Thanks Adam. I hadn't thought of just sorting afterward – user4815162342 Jan 31 '14 at 17:38
1

Works perfectly, my data is going to be sorted by data, anyways. And just for later reference by anyone, we must reselect d3.select('#parent') in the last line to sort instead of using the enterSelection, as we already entered(). Thanks! – user4815162342 Jan 31 '14 at 17:43
4

You can also use enterSelection.insert("p") for the second element. That should eliminate the need to sort as last step. – scuerda Mar 29 '15 at 12:42

score 27 · Answer 2 · edited Nov 05 '16 at 05:48

27

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:

<p>from data[0]</p>

<p>from data[0]</p>

<p>from data[1]</p>

<p>from data[1]</p>

<p>from data[2]</p>

<p>from data[2]</p>

edited Nov 05 '16 at 05:48

Nate Anderson

18,334
18
100
135

answered Apr 11 '15 at 13:26

Caleb Clark

271
3
2

4

This is actually the solution that should be the accepted one because it is exactly what was asked for, without any detours! – Dominic Sep 21 '16 at 07:18
3

this is nice, but are you sure it is not : `
from data[0]

from data[1]

from data[2]

from data[0]

from data[1]

from data[2]
` – Anne Mar 25 '20 at 00:41
2

It depends on the d3 version. For example, with d3 v7 it doesn't work anymore – floatingpurr Jun 17 '21 at 15:39
Still to find a solution for newer versions of d3 – floatingpurr Jun 17 '21 at 15:45

score 20 · Answer 3 · answered Nov 19 '15 at 16:51

20

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]')});

answered Nov 19 '15 at 16:51

Karl Koster

209
2
2

9

this is gross and _exactly what I'm looking for_ – Alex Lenail Jul 30 '18 at 19:11
Is this significantly faster in terms of CPU cycles than the approach where you capture a selection and then append to the selection twice? – Tronathan Dec 05 '22 at 00:34

score 9 · Answer 4 · answered Nov 18 '14 at 22:40

9

Instead of a .append(),

You can also wrap a function that creates new content in a .html()

d3.select('#parent')
  .selectAll('div')
    .data(data)
  .enter()
    .append('div')
    .html(function(d) {return "<p>" + from data[0] + "<p>" etc..... ;});

answered Nov 18 '14 at 22:40

Nate Daubert

91
1
1

score 1 · Answer 5 · answered Jun 03 '16 at 00:10

Similar to the above but in a different idiom. This is truer to the nested selections approach and eliminates the need for sorting or insertion:

var divs = d3.select('#parent');

var ps = divs.selectAll('#parent > div')
    .data(d3.range(3)).enter().append('div');

ps.append('p').html(function(d,i) { return 'from data[' + i + ']'; });
ps.append('p').html(function(d,i) { return 'from data[' + i + ']'; });

More elegantly (and probably faster):

var divs = d3.select('#parent');

  var ps = divs.selectAll('#parent > div')
    .data(d3.range(3)).enter().append('div');

    ps.append('p').html(function(d,i) { return 'from data[' + i + ']'; })
    .select(function() { return this.parentNode.appendChild(this.cloneNode(true)); });

score 0 · Answer 6 · answered Sep 09 '20 at 14:04

1. Duplicate each element

Create a new list, which contains all element twice (like this):

doubleData = data.reduce(function (res, current, index, array) {
    return res.concat([current, current]);
}, []);

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

2. Enter twice

Sometimes you want to do further manipulation on the appended elements. In this case, you maybe want to know if you are accessing the first or the secondly added element. Add a first-paragraph and second-paragraph class to these elements.

d3.select('#parent').selectAll('.first-paragraph')
  .data(data)
  .enter()
  .append('p')
  .attr('class', 'first-paragraph');

d3.select('#parent').selectAll('.second-paragraph')
  .data(data)
  .enter()
  .append('p')
  .attr('class', 'second-paragraph');

In this case you maybe have to sort the elements based on Adam Pearce's answer.

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

6 Answers6

1. Duplicate each element

2. Enter twice

Linked

Related