2

Simple question for someone checking out d3 4: https://jsfiddle.net/dwrzso58/

d3.select("body")
    .data([1,2,3])
  .enter()
  .append("div")
  .text((d,i)=>d)

when this code runs only 2 and 3 show up in the DOM. What gives with the first element in the array being lost?

wootscootinboogie
  • 8,461
  • 33
  • 112
  • 197
  • Tormi's answer explained it: if you want your "enter" selection to have all your data, select something that doesn't exist. Have a look at this documentation: http://stackoverflow.com/documentation/d3.js/2135/selections/16948/the-role-of-placeholders-in-enter-selections#t=201608142333397609478 – Gerardo Furtado Aug 14 '16 at 23:34

1 Answers1

4

d3.select("body") selection contains one element so the .data() adds 1 to the selected body element and 2, 3 are left over and included into the .enter() pipeline. If you want to enter all three elements you have to call .data() on an empty selection like this:

d3.select("body").select("div")
.data([1,2,3])
.enter()
.append("div")
.text((d,i)=>d)
Tormi Reinson
  • 555
  • 3
  • 11