selectAll不选择D3上的任何节点 [英] selectAll not selecting any nodes on D3
问题描述
我正在尝试使用d3 selectAll函数选择4个div，但是没有任何选择.此代码中的高度永远不变:
I am trying to select 4 divs using a d3 selectAll function, but nothing is getting selected. The height in this code never changes:
var popop = d3.select("#chart")
.selectAll(".bar");
popop.style("height", "40px");
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<script src="../lib/d3.v3.min.js"></script>
<script src="project1.js"></script>
<style>
.bar {
float: left;
width: 30px;
margin-right: 20px;
border-color: #F4F5F7;
border: 1px solid #C5C5C5;
}
#chart {
width: 100%;
height: 300px;
}
</style>
</head>
<body>
<div id="chart">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
</body>
</html>
select('#chart')单独使用时可以工作.当我在代码检查器"中查看代码时，弹出窗口有一个元素.当我添加.selectAll(.bar")时，仅给出一个元素.
The select('#chart') works when it is used by itself. When I look at the code in the Code Inspector it popop has one element. When I add .selectAll(".bar") only one element is given.
当我在浏览器中在Stack Overflow上运行它时，得到的代码与本地代码相同.只有四个小水平线.当您将鼠标悬停在它们上方时，它们的高度为0.
When I run this in the browser here on Stack Overflow I get the same as my local code. Just four small horizontal lines. Their height is 0 when you hover over them.
当我在Stack Overflow上运行Aagam Jain的代码时，它将起作用！！！当我在本地复制Aagam的代码时，它不起作用.其中包括从网站下载d3.v3.
When I run Aagam Jain's code on Stack Overflow it works!!! When I copy Aagam's code locally, it doesn't work. The includes downloading d3.v3 from the website.
在Firefox和Chrome中尝试过并得到相同的结果.
Tried in Firefox and Chrome and get the same.
推荐答案
这是一个计时问题.如果我推迟脚本(以便它们在所有内容加载后运行，然后按顺序运行)，如
It was a timing issue. If I defer the scripts (so they run after everything has loaded and then runs them in order) like mentioned in the comments on my question, everything works:
<script src="https://d3js.org/d3.v3.min.js" defer></script>
<script src="./project1.js" defer></script>
这篇关于selectAll不选择D3上的任何节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
