Question

＆＃13;

var dataArray=[20,40,50,60,70,80,90];
d3.select("body")
    .selectAll(".small-div")
    .data(dataArray)
    .enter()
    .append("span")
    .text(function(d){
      return d;
    });

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>

＆＃13;

我创建了上面的一组代码，用class =＆＃34; small-div＆＃34;将数据数组添加到div元素中。代码无效，请提供任何解决方案

Answer 1

你的问题只是这一行：

.enter()

在D3中，这是最着名的方法之一。它...

返回输入选择：选区中没有相应DOM元素的每个数据的占位符节点。（强调我的）

因此，如果您在页面中已经有<div>，那么您的＆＃34;输入＆＃34;选择将是空的！

让我们证明一下：

＆＃13;

var dataArray = [20, 40, 50, 60, 70, 80, 90];
var selection = d3.select("body")
  .selectAll(".small-div")
  .data(dataArray)
  .enter();
  
//nothing will be appended here!
selection.append("span")
  .text(function(d) {
    return d;
  });
  
console.log("the size of the enter selection is: " + selection.size())

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>
<div class="small-div"></div>
<div class="small-div"></div>
<div class="small-div"></div>
<div class="small-div"></div>
<div class="small-div"></div>
<div class="small-div"></div>
<div class="small-div"></div>

＆＃13;

正如您所看到的，没有任何反应，没有附加元素（并且控制台中的消息非常清楚）。

但是，如果我们只是删除enter()，数据将绑定到现有的DOM元素，并且您将拥有我们称之为＆＃34;更新＆＃34;选择。现在，您将<span>元素附加到非空的选择中。

看看：

＆＃13;

var dataArray = [20, 40, 50, 60, 70, 80, 90];
d3.select("body")
  .selectAll(".small-div")
  .data(dataArray)
  .append("span")
  .text(function(d) {
    return d;
  });

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>
<div class="small-div"></div>
<div class="small-div"></div>
<div class="small-div"></div>
<div class="small-div"></div>
<div class="small-div"></div>
<div class="small-div"></div>
<div class="small-div"></div>

＆＃13;

如何使用d3将文本数组添加到多个div

1 个答案: