selectAll不选择D3上的任何节点
[英]selectAll not selecting any nodes on D3
问题描述
I am trying to select 4 divs using a d3 selectAll function, but nothing is getting selected. 
我正在尝试使用d3 selectAll函数选择4个div，但是没有任何选择。 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>
The select('#chart') works when it is used by itself. select（'＃chart'）单独使用时可以工作。 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. 当我添加.selectAll（“。bar”）时，仅给出一个元素。
When I run this in the browser here on Stack Overflow I get the same as my local code. 当我在浏览器中的Stack Overflow上运行此命令时，它与本地代码相同。 Just four small horizontal lines. 只有四个小水平线。 Their height is 0 when you hover over them. 将鼠标悬停在其上方时，其高度为0。
When I run Aagam Jain's code on Stack Overflow it works!!! 当我在Stack Overflow上运行Aagam Jain的代码时，它起作用了！！！ When I copy Aagam's code locally, it doesn't work. 当我在本地复制Aagam的代码时，它不起作用。 The includes downloading d3.v3 from the website. 其中包括从网站下载d3.v3。
Tried in Firefox and Chrome and get the same. 在Firefox和Chrome中尝试过并获得相同的结果。
2 个解决方案
解决方案1
-1 2018-09-21 11:31:27
The question was in d3.v3. 问题出在d3.v3中。 Below snippet works for me. 下面的代码段对我有用。
d3.select('#chart').selectAll('.bar').style('height', '40px')
<!DOCTYPE html> <html lang="en" > <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v3.min.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>
解决方案2
-1 2018-09-21 12:10:02
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.