score:3

Accepted answer

As you can see in the snippet below, your code generates both divs (click "run code snippet").

What is probably happening in your real code is that you already have a <div> in your page. In that case, for assuring that your "enter" selection have all your data, select something else, like:

d3.select("body").selectAll(".somediv")

The reason for this is to avoid associating your data to an existent DOM element. Also, if you already have other divs in your document, mind your d3.selectAll("div") just before the each function.

Here is your working snippet:

  var data = [{"title":"lamda1","indent":1,"R":1,"seq":29},
              {"title":"lamda2","indent":1,"R":2,"seq":29}], 
  colors =  d3.scale.category20();

d3.select("body").selectAll(".somediv")
        .data(data)
        .enter()
        .append("div")          
        .attr("id",function(d){return d.seq;})          
        .attr("class", "hcenter button button--aylen button--round-s button--border-thin button--size-m")
        .style("position","absolute")
        .style("width", "300px")
        .style("height", "50px")
        .style("line-height", "40px")
        .style("background-color", function (d, i) { return colors(i); })
        .style("color", "white")                    
        .text(function (d) { return d.title.slice(0,15); })
        .on("click", function(d){
            $(parent.document).find("#board_contents").attr("src","/lamda/board/board_selectOne.jsp?seq_board="+d.seq);
        });

d3.selectAll("div").each(function(d, i){
    d3.select(this)
        .transition().ease("cubic")
        .duration(500)
        .style("left", function(d){ return d.indent*20+"px";})
        .style("top", i*42+"px");           
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>


Related Query

More Query from same tag