使用D3创建SVG画布无显示，D3已加载，请求排查原因

你的SVG画布无法显示的核心原因是错误地在同一个<script>标签中同时使用了src属性和内部代码。当浏览器遇到带有src的<script>标签时，它会优先加载外部脚本文件，并且完全忽略标签内部的所有JavaScript代码——这意味着你的drawSVG函数定义和调用代码根本没有被执行，自然不会生成SVG元素。

修正步骤 #

1. 将引入D3的脚本和自定义代码拆分到两个独立的<script>标签中：
   • 第一个标签专门用于加载D3库
   • 第二个标签编写你的绘图逻辑
2. （可选）给SVG添加背景色，方便直观确认画布是否生成

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Bar Chart</title>
<style>
/* 可选：添加背景色方便查看画布 */
svg {
    background-color: #f5f5f5;
}
</style>
</head>
<body>
<div id="chart"></div>
<!-- 单独的标签加载D3 -->
<script src="d3.v3.js"></script>
<!-- 单独的标签写自定义代码 -->
<script>
var w = 500;
var h = 500;
function drawSVG(s) {
    var svg = d3.select("#chart")
        .append("svg")
        .attr("width",w)
        .attr("height",h);
    console.log(s);
}
var sampleStr = "hello";
drawSVG(sampleStr);
</script>
</body>
</html>

额外检查点 #

• 确保d3.v3.js文件的路径正确，和HTML文件在同一目录下，或者使用正确的相对/绝对路径
• 打开浏览器控制台，确认没有404错误（如果D3加载失败会有提示）

这样修改后，你的SVG画布应该就能正常显示了，控制台也会输出"hello"，证明代码已经被执行。

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