I know this is a super easy question. But I am apparently missing something super obvious.
I just want to create an svg element with D3 and see it on my page.
My index.htmllooks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="node_modules/d3/dist/d3.min.js"></script>
<script src="selections.js"></script>
<link rel="stylesheet" href="style.css">
<title>D3 Selections</title>
</head>
<body>
</body>
</html>
Whereas my selections.js looks like this:
console.log("This appears...")
w = window.innerWidth
h = window.innerHeight
// // make the svg
const svg = d3.select("body")
.append("svg")
.attr("height", h)
.attr("width", w)
.attr("class", "svg")
The first console.log() is still visible in the console. But I cant see the svg. I know I am missing something super clear, but I just cant see it at the moment:/
Advertisement
Answer
I don’t know d3.js that well but you should probably wait for the DOM to load:
console.log("This appears...");
w = window.innerWidth;
h = window.innerHeight;
document.addEventListener('DOMContentLoaded', e => {
// // make the svg
const svg = d3.select("body")
.append("svg")
.attr("height", h)
.attr("width", w)
.attr("class", "svg");
});