D3.js开发环境搭建遇阻求助：HTML、JS配置及报错问题

我正在自学D3.js制作数据可视化效果，用Visual Studio Code开发，通过Node.js搭建了live server，按照Amelia Wattenberger的Fullstack D3课程配置环境，目前遇到两个问题：

• 打开HTML文件时出现资源加载错误
• 直接运行Javascript文件时提示“d3未定义”

当前文件结构与代码 #

在名为daft的文件夹下，有以下两个文件：

HTML文件代码 #

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>My Timeline</title>
    </head>
    <body>
        <div id="wrapper"></div>

        <script src="./../../d3.v6.js"></script>
        <script src="./chart.js"></script>
    </body>
</html>

chart.js文件代码 #

async function drawLineChart() {

  // 1. Access data
  const dataset = await d3.json("./../../my_weather_data.json")

  console.table(dataset[0])
}

drawLineChart()

问题原因与解决方法 #

1. 资源加载错误的原因与解决 #

报错核心是文件路径不匹配：

• ./../../d3.v6.js和./../../my_weather_data.json表示从daft文件夹出发，向上退回两级目录后寻找对应文件，请确认这两个文件确实存在于该位置。
• 若路径错误，调整为正确的相对路径：比如如果D3文件和daft文件夹同级，路径应改为../d3.v6.js；如果文件就在daft文件夹内，路径改为./d3.v6.js即可。

2. 直接运行chart.js提示d3未定义的原因与解决 #

chart.js依赖浏览器通过<script>标签引入的D3对象，直接用Node.js运行js文件时，没有加载D3的环境，因此会报错。正确的运行方式是通过live server打开HTML文件，而非单独运行js文件。

简化配置的替代方案 #

如果总是被路径问题困扰，可以尝试：

• 将d3.v6.js和my_weather_data.json直接放到daft文件夹下，修改代码中的路径为./d3.v6.js和./my_weather_data.json
• 使用CDN引入D3，替换HTML中的D3引入标签为：<script src="https://d3js.org/d3.v6.min.js"></script>，无需本地保存D3文件，避免路径问题

内容的提问来源于stack exchange，提问作者William Quin Webster