Question

这是D3代码。我不知道第一个对象（"title":"lamda1"）会发生什么。只有我可以看到第二个对象的div（"title":"lamda2"）。

<script>
  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("div")
        .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>

Answer 1

正如您在下面的代码段中看到的，您的代码会生成两个div（点击“运行代码段”）。

您的真实代码中可能发生的事情是您的网页中已有<div>。在这种情况下，为了确保您的“输入”选择包含您的所有数据，请选择其他内容，例如：

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

这样做的原因是为了避免将数据与现有的DOM元素相关联。另外，如果您的文档中已有其他div，请注意d3.selectAll("div")功能之前的each。

以下是您的工作片段：

  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>

我无法使用D3查看第一个对象数据的div

1 个答案: