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

时间:2017-11-02 11:46:44

标签: d3.js



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;
    });

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

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

1 个答案:

答案 0 :(得分:2)

你的问题只是这一行:

.enter()

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

  

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

因此,如果您在页面中已经有<div>,那么您的&#34;输入&#34;选择将是空的!

让我们证明一下:

&#13;
&#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;
&#13;
&#13;

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

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

看看:

&#13;
&#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;
&#13;
&#13;