D3.js .append( ) 在现有 <div> 和层次结构上答案

【问题标题】：D3.js .append( ) on existing <div> and hierarchyD3.js .append( ) 在现有 <div> 和层次结构上
【发布时间】：2014-08-10 16:09:53
【问题描述】：

根据我的代码，看起来 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;});

【问题讨论】：

标签： d3.js append

【解决方案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;})

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

秒

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

这里我们将 div 附加到 key，这意味着这个 append 函数是在一个 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。

这就是它的工作原理。我能说的就这么多了。如果有哪里出错了指出来。谢谢

【讨论】：

非常感谢您的详细回答。根据您的解释，我知道我在哪里误解了。变量 Key 包含
元素的数组，其类为“key_row”..NOT
，其 ID 为 #key....