I have a very simple HTML file in which I want to draw SVGs based on data I retrieve by an AJAX-call.
Should I wait until the document is fully loaded by encapsulating my code in a document.onload = function() { ... }
block, or can I be sure that the document is already fully loaded when my JS code executes, since my JS code is loaded at the end of the HTML file?
The HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<svg id="first"></svg>
<svg id="second"></svg>
<script src="d3.v3.min.js"></script>
<script src="myscript.js"></script>
</body>
</html>
The myscript.js code:
d3.json('data.json', function (data) {
var svgs = d3.selectAll('svg');
// do some fancy stuff with data and svgs
});