D3.js代码在JSBin正常运行，本地服务器无法显示SVG问题排查

嗨，我之前也碰到过一模一样的问题！JSBin里跑的好好的代码，本地用Node服务器部署就出问题，大概率是本地环境和JSBin的运行差异导致的，我帮你梳理几个最可能的原因和对应的解决办法：

1. 先检查D3的引入是否正常 #

JSBin默认是用在线CDN加载D3的，比如你在JSBin里可能用的是类似 <script src="https://d3js.org/d3.v7.min.js"></script> 的链接。但如果本地保存文件时，你把这个链接改成了相对路径（比如./d3.min.js）却没下载对应的D3文件，或者路径写错了，那D3库根本加载不进来，代码自然没法生成SVG元素。

解决办法：

• 最简单的就是保留CDN链接（只要你本地能联网），确保<script>标签里的URL没写错；
• 要是想离线用，就去D3官网下载对应版本的JS文件，放到你的项目目录里，然后调整<script>的src路径和文件位置对应上。

2. 确认脚本执行时机是否正确 #

如果你的JS代码写在<head>里，或者写在<body>里但在SVG元素之前，浏览器会先执行JS，这时候d3.select("svg")根本找不到目标元素，当然渲染不出矩形。

解决办法：

• 把JS代码挪到<body>标签的最底部，等所有DOM元素都加载完再执行；
• 或者用DOM加载事件包裹你的D3代码，比如：

document.addEventListener("DOMContentLoaded", function() {
  // 把你的D3代码全部放在这里面
});

3. 检查SVG元素的基础尺寸 #

有时候JSBin里的SVG默认会自带宽高属性，而你本地保存的文件里可能没设置，导致SVG元素的宽高为0，就算生成了矩形也看不到。

解决办法：
给你的SVG标签明确设置宽高，比如：

<svg width="600" height="400"></svg>

4. 一定要看浏览器控制台的报错信息 #

这步超级关键！按F12打开浏览器的开发者工具，切换到Console面板，看看有没有红色的报错提示：

• 如果看到ReferenceError: d3 is not defined，那就是D3没加载成功；
• 如果看到TypeError: Cannot read properties of null，那就是找不到SVG元素；
  这些报错能直接帮你精准定位问题，比瞎猜高效多了。

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