现有<div>和层次结构上的D3.js .append()-6ren

现有
和层次结构上的D3.js .append()

转载作者：行者123 更新时间：2023-12-01 22:28:41

根据我的代码，看起来key_square和key_line分区应该是key_row的同级元素，因为我将它们 append 到分区“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;});

最佳答案

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

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

在上面的代码中，我们使用id选择了div，在此处添加div的次数是根据数据的长度创建的，然后我们为这些div指定了类和id，执行这些代码d3后将返回一个包含这些div的数组，因此现在变量键保存这些新创建的div。如果您想看到上面的代码，请写一个console.log(key)stmt。

第二

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

在这里，我们将div append 到键上，这意味着此 append 函数在一个由KEY保持的div上调用，因此在执行此代码后，div会在内部创建为上面创建的div的后代。

第三

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

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

这就是它的工作原理。
我可以这么说。
如果有任何地方犯了错误的话。
谢谢

关于现有<div>和层次结构上的D3.js .append()，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24318154/