[Solved]-d3.js data not bound the first time-d3.js

You are dealing with a nested selection. First, you don't need to re-bind the data to the nested element, it's automatically passed. Second, you aren't handling the enter, update and exit selections properly. Re-factored it would look like this:

// update selection
var p = d3.select("body")
  .selectAll(".lol")
  .data(d3.stack().keys(keys)(data));

// those being removed
p.exit().remove();

// those entering
var pEnter = p.enter()
  .append("p")
  .attr("class", "lol");

// append a span to those entering
pEnter.append("span");

// this is update + enter
p = pEnter.merge(p);

// update the update + enter selection's sub-selection
p.select("span").html(function(d) { return d });        

Updated fiddle.