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.

Short answer: The `` element is not yet ready when your script is executed. For the long answer and ways around this have a look at [*"Where should I put — altocumulus, Sep 21 '18 at 11:33
Again, read my above comment; that **is** the solution. Your snippet does not run for two reasons: 1) You fail to include d3 as it refers to a local copy. 2) You put the JS code in the CSS section. If you correct these two points, it runs because the JS code gets inserted at the bottom of the body element much like the above linked answer explains in much more detail. — altocumulus, Sep 21 '18 at 12:05
I added a comment at the bottom. It worked. Thank you very much. I have been staring at this code for 8 hours now. I owe you one!! — Pob Livsig, Sep 21 '18 at 12:29

score -1 · Answer 1 · answered Sep 21 '18 at 11:31

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>

Thank you both for your replies. They kind of help. Something Very strange is going on. I have extended my question above... — Pob Livsig, Sep 21 '18 at 11:54

score -1 · Answer 2 · edited Sep 21 '18 at 12:18

-1

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>

edited Sep 21 '18 at 12:18

altocumulus

21,179
13
61
84

answered Sep 21 '18 at 12:10

Pob Livsig

95
1
9

selectAll not selecting any nodes on D3

2 Answers2

Linked