D3.js配置Web环境

前言

当使用D3.js加载外部数据文件（如JSON、CSV等）时，浏览器的同源策略会阻止从本地文件系统（file://协议）直接加载这些数据。这是因为浏览器出于安全考虑，默认不允许通过JavaScript进行跨域请求，以防止恶意脚本访问本地文件系统中的敏感数据。也就是说直接点击HTML页面（页面加载了外部数据），打开网页是看不到数据的可视化。以下是直接点击的页面：

解决方法：使用服务器可以绕过这一限制，因为服务器提供的文件通过HTTP或HTTPS协议加载，不会触发同源策略的限制。

二、启动本地服务器的方法

1. 使用VS Code的Live Server插件

VS Code的Live Server插件可以快速启动一个本地开发服务器。

步骤：

1. 打开VS Code。
2. 在扩展商店中搜索并安装Live Server插件。
3. 右键点击你的HTML文件，选择Open with Live Server。
4. 浏览器会自动打开页面，你可以在这个页面加载本地数据文件。

2. 使用Python的SimpleHTTPServer

Python提供了一个内置的简单HTTP服务器，可以快速启动本地服务器。

Python 3.x：

python -m http.server 8000

Python 2.x：

python -m SimpleHTTPServer 8000

导航到包含你的HTML文件的目录，然后运行上述命令。在浏览器中访问http://localhost:8000/your_html_file.html。