无法将简单的 svg 附加到 body 元素

Question

我知道这是一个超级简单的问题。但我显然遗漏了一些非常明显的东西。我只想用 D3 创建一个 svg 元素并在我的页面上看到它。我的 index.html 看起来像这样：

<!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>

而我的 selections.js 看起来像这样：

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")

第一个 console.log() 在控制台中仍然可见。但是我看不到svg。我知道我错过了一些非常清楚的东西，但我现在看不到它：/

Answer 1

我不太了解 d3.js，但您可能应该等待 DOM 加载：

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");
});

无法将简单的 svg 附加到 body 元素

Can't append simple svg to body element

javascript

svg

d3.js