Question

根据我的代码，看起来key_square和key_line分区应该是key_row的兄弟元素，因为我将它们附加到分区“key”，但它们是key_row的后代。

有人可以向我解释一下吗？

谢谢，

<body>

    <div id="timeseries"> 
    </div>

    <div id="key"> 
    </div>

    <script>
       var key = d3.select("#key")
           .selectAll("div")
           .data(data)
           .enter()
           .append("div")
               .attr("class","key_row")
               .attr("id",function (d){ return d.line_id;})

//add square
            key.append("div")
               .attr("class", "key_square")
           .style("background-color","#C8DAF8")

//d3.select("#key")
        key.append("div")
            .attr("class","key_id")
            .attr("id","key_line")
            .style("background-color","#E9F0FC")
            .text(function (d) { return d.line_id;});

Answer 1

让我们逐一讨论代码，第一个

var key = d3.select("#key")
           .selectAll("div")
           .data(data)
           .enter()
           .append("div")
               .attr("class","key_row")
               .attr("id",function (d){ return d.line_id;})

在上面的代码中我们选择了div使用id，在这里附加div这里根据数据的长度创建div的数量然后我们在执行这些代码之后指定这些div的类和id d3将返回一个包含这些div的数组，所以现在变量键包含这些新创建的div。如果你想在上面的代码之后看到写一个console.log（key）stmt。

第二

key.append("div")
               .attr("class", "key_square")
           .style("background-color","#C8DAF8")

这里我们将div附加到key，意味着这个追加函数在一个div上被调用，这个div由key持有，所以在执行这个代码后，div作为后代创建在上面创建的div中。

第三

key.append("div")
            .attr("class","key_id")
            .attr("id","key_line")
            .style("background-color","#E9F0FC")
            .text(function (d) { return d.line_id;});

这里也是同样的事情，我们再次在最初创建的div上调用append函数，所以同样的事情也会在这里发生。 div被添加为最初创建的div的后代。

这就是它的运作方式。我可以这么说。如果有任何错误指向它。感谢

D3.js .append（）在现有的<div>和层次结构</div>上

1 个答案: