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;
我创建了上面的一组代码,用class =&#34; small-div&#34;将数据数组添加到div元素中。代码无效,请提供任何解决方案
答案 0 :(得分:2)
你的问题只是这一行:
.enter()
在D3中,这是最着名的方法之一。它...
返回输入选择:选区中没有相应DOM元素的每个数据的占位符节点。 (强调我的)
因此,如果您在页面中已经有<div>
,那么您的&#34;输入&#34;选择将是空的!
让我们证明一下:
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>
元素附加到非空的选择中。
看看:
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;