技术求助：使用D3.js无法在HTML文档中添加SVG元素

嘿，我一眼就看出问题所在啦——你的脚本执行时机不对！

你把hello.js放在<head>标签里加载，这时候浏览器还没来得及解析<body>部分呢，d3.select("body")根本找不到对应的DOM元素，自然没法成功创建SVG并添加进去。

给你两个简单的解决方案：

方案一：调整脚本位置 #

把hello.js的引入脚本移到<body>的末尾，这样等整个body都渲染完成后，再执行D3的代码：

<html>
<head>
    <meta charset="utf-8">
    <title>Hello, D3</title>
    <script type="text/javascript" src="js/d3/d3.js"></script>
</head>
<body>
    <!-- 把脚本移到body最后 -->
    <script type="text/javascript" src="js/hello.js"></script>
</body>
</html>

方案二：监听DOM加载完成事件 #

如果不想移动脚本位置，就在hello.js里加上DOM加载完成的监听，确保代码在DOM就绪后再执行：

const w = 600;
const h = 600;
let dataset = [];
let x;
let y;

// 等待DOM全部加载完成后再执行D3代码
document.addEventListener('DOMContentLoaded', function() {
    // 创建SVG元素
    let svg = d3.select("body")
                .append("svg")
                .attr("width", w)
                .attr("height", h);
});

随便选一个方案修改后，再打开浏览器开发者工具（按F12），去Elements面板里就能看到生成的SVG标签啦～

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