使用D3向body元素追加简单SVG元素无法在页面显示问题求助

你的JS脚本放在<head>标签内加载执行，此时页面的<body>元素还未被浏览器解析完成，d3.select("body")无法获取到真实存在的DOM节点，因此SVG元素虽然被D3创建，但无法插入到页面DOM树中，自然不会在页面展示。控制台能正常打印日志只说明脚本本身执行没有报错，不代表DOM操作成功。

你可以选择以下任意一种方法修复：

• 方案1：调整脚本加载位置
  把<head>里的D3和selections.js引用移到</body>闭合标签之前，确保DOM加载完成后再执行脚本，修改后的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">
    <link rel="stylesheet" href="style.css">
    <title>D3 Selections</title>
</head>
<body>
    <script src="node_modules/d3/dist/d3.min.js"></script>
    <script src="selections.js"></script>
</body>
</html>

• 方案2：给JS代码添加DOM加载完成监听
  不需要修改HTML结构，把selections.js的所有逻辑包裹在DOMContentLoaded事件回调中，确保DOM加载完成后再执行选择和插入操作，修改后的selections.js代码如下：

console.log("This appears...")
document.addEventListener('DOMContentLoaded', function() {
    const w = window.innerWidth
    const h = window.innerHeight
    const svg = d3.select("body")
        .append("svg")
        .attr("height", h)
        .attr("width", w)
        .attr("class", "svg")
})

如果修改后还是看不到SVG，可以检查style.css中是否给.svg类设置了display: none、opacity: 0、visibility: hidden这类隐藏样式，也可以打开浏览器开发者工具的元素面板，直接搜索svg标签确认是否已经成功插入到body下。

内容的提问来源于stack exchange，提问作者Lenn