d3.select("#element") not working when code above the html element

Question

This works:

<div id="chart"></div> <script>var svg = d3.select("#chart").append("svg:svg");</script> 

This doesn't:

<script>var svg = d3.select("#chart").append("svg:svg");</script> <div id="chart"></div> 

I tried wrapping the code in a jquery document.ready(), grabbing the element with jquery, and passing it into d3.select, but that didn't work either. Edit Once I got the jquery document.ready() syntax right, it worked.

Any way I can include the javascript at the top of the page and still select an element below? Thanks.

Answer 1

<script>$(function(){var svg = d3.select("#chart").append("svg:svg");});</script> <div id="chart"></div> 

In other words, it's not happening because you can't query against something that doesn't exist yet-- so just do it after the page loads (here via jquery).

Btw, its recommended that you place your JS files before the close of your body tag.

Answer 2

Not enough reputation to comment yet so I'll just put this here:

To expand on Micah's answer - the browser runs your code top to bottom, so if you write:

<div id="chart"></div> <script>var svg = d3.select("#chart").append("svg:svg");</script> 

The browser will create a div with id "chart", and then run your script, which will try to find that div, and, hurray, success.

Otherwise if you write:

<script>var svg = d3.select("#chart").append("svg:svg");</script> <div id="chart"></div> 

The browser runs your script, and tries to find a div with id chart, but it hasn't been created yet so it fails.

THEN the browser creates a div with id "chart".