为什么 D3 在使用 data().enter() 时不在所选元素内插入元素？

Question

我正在弄乱 D3 (v7)，并在将元素插入另一个元素时注意到一些奇怪的事情。

情况如下：在 body 标签内，我有一个 div 元素

<div id='graph'></div>

在加载主体时调用的 JS 中，我有三个命令：

// declare a sample array
var dataset = [5, 10, 15, 20, 25]

// 1) Insert the contents of 'dataset' in a <p> inside #graph
d3.select("#graph").insert('p').text(dataset)

// 2) Insert a <div> with the class 'block' inside #graph
d3.select("#graph")
.insert("div")
.attr("class", "block")

// 3) Insert one <div> per each element inside 'dataset' with the class 'block' inside #graph
d3.select("#graph")
    .data(dataset)
    .enter()
    .insert("div")
    .attr("class", "block")

按照我的理解，上面三个句子中的每一个都应该在#graph 中创建元素。但是，出于某种原因，第三条命令是在 body 元素外插入 4 div.block，如下所示：

<body>
    <div id="graph">
        <p>5,10,15,20,25</p>
        <div class="block"></div>
    </div>
</body> 
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>

我不确定为什么第三句中的 div 被附加在#graph 之后而不是在 #graph 内部，即使我在命令开头执行 d3.select("#graph") 也是如此。我想我可能在 .data().enter()

之后遗漏了另一个命令

为什么要在之后插入 div？和我怎样才能让这些 div 改为在 #graph 中创建？

Answer 1

您需要指定要附加的内容：您需要 select 容器，然后 select 您希望添加的元素 add/remove/update:

d3.select("#graph")
    .selectAll("div")
    .data(dataset)
    .enter()
    .insert("div")
    .attr("class", "block")

如果不指定容器，您将文档用作父级，而第一个数据将绑定到 selected div (#graph) 其余数据将是绑定到附加到文档的新 divs（不是正文），因此它们出现在 do.

的位置

下面的代码片段采用了您的代码并进行了更改（以及一些文本来指示 div 是更新还是输入）：

// declare a sample array
var dataset = [5, 10, 15, 20, 25]

// 1) Insert the contents of 'dataset' in a <p> inside #graph
d3.select("#graph").insert('p').text(dataset)

// 2) Insert a <div> with the class 'block' inside #graph
d3.select("#graph")
.insert("div")
.attr("class", "block")

// 3) Insert one <div> per each element inside 'dataset' with the class 'block' inside #graph
var selection = d3.select("#graph")
    .selectAll("div")
    .data(dataset);
    
selection.enter().insert("div")
    .attr("class", "block")
    .text(d=>"entered:" + d); 
    
selection.text(d=>"updated:" + d);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id='graph'></div>

为什么 D3 在使用 data().enter() 时不在所选元素内插入元素？

Why does D3 not insert elements inside the selected element, when using data().enter()?

javascript

d3.js