title: d3.js data not bound the first time
body: <p>I have data like this:</p>
  
  <pre><code>[{
      label: "ABC", p1: "23", p2: "3"
  },
  {
      label: "EF", p1: "4", p2: "10"
  },
  {
      label: "GV", p1: "5", p2: "15"
  },
  {
      label: "FD", p1: "9", p2: "5"
  },
  {
      label: "SDF", p1: "20", p2: "10"
  },]
  </code></pre>
  
  <p>and i try to draw the data with:</p>
  
  <pre><code>var keys = ["p1", "p2"];
  
  function draw(data) {
      var p = d3.select("body")
        .selectAll(".one")
        .data(d3.stack().keys(keys)(data))
  
      p.enter()
        .append("p")
        .attr("class", "one")
  
      var span = p
        .selectAll("span")
        .data(function(d) { return d})
  
      span
        .enter()
        .append("span")
        .html(function(d) { return d})
  
      span.exit().remove();
  }
  </code></pre>
  
  <p>The p Elements are created with the first call of the draw function but not the span elements</p>
  
  <p>I want to have a span element for each object in the data array</p>
  
  <p>Why is it not created correctly the first time?</p>
  
  <p><a href="https://jsfiddle.net/h2ujjo98/" rel="nofollow noreferrer">https://jsfiddle.net/h2ujjo98/</a></p>