[英]selectAll not selecting any nodes on D3
我正在尝试使用d3 selectAll函数选择4个div，但是没有任何选择。 此代码中的高度永远不变：
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”）时，仅给出一个元素。
当我在浏览器中的Stack Overflow上运行此命令时，它与本地代码相同。 只有四个小水平线。 将鼠标悬停在其上方时，其高度为0。
当我在Stack Overflow上运行Aagam Jain的代码时，它起作用了！！！ 当我在本地复制Aagam的代码时，它不起作用。 其中包括从网站下载d3.v3。
在Firefox和Chrome中尝试过并获得相同的结果。
问题出在d3.v3中。 下面的代码段对我有用。
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>
这是一个时间问题。 如果像我对问题的评论中提到的那样，如果我推迟脚本（以便它们在所有内容加载后运行，然后按顺序运行），则一切正常：
<script src="https://d3js.org/d3.v3.min.js" defer></script>
<script src="./project1.js" defer></script>
选择 null：D3 中 selectAll(null) 背后的原因是什么？
[英]Selecting null: what is the reason behind selectAll(null) in D3?
d3 使用 selectAll().data().enter().append() 连续创建节点
[英]d3 successive creation of nodes with selectAll().data().enter().append()
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.