selectAll not selecting any nodes on D3
Question
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>
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.
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.
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.
Tried in Firefox and Chrome and get the same.
2 answers
solution1
-1 2018-09-21 11:31:27
The question was in 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>
solution2
-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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.