使用D3.js通过文件选择对话框读取JSON文件的跨文件夹读取问题

嘿，我来帮你搞定这个头疼的问题！你遇到的情况其实是浏览器的安全限制在搞鬼，完全不是D3.js的锅～

问题根源 #

当你直接用file://协议打开本地HTML文件时，浏览器出于安全考虑，会严格限制脚本的文件访问权限：

• 默认只能访问和HTML文件同目录或子目录的文件，跨目录的文件会被直接拦截
• 如果你尝试通过文件的绝对路径（比如C:\Users\xxx\data.json）调用d3.json()加载，浏览器根本不允许前端脚本直接读取本地文件系统的路径，这是浏览器的核心安全规则

正确解决方案：用File API读取用户选择的文件 #

不管用户选哪个文件夹的JSON文件，只要是用户主动选择的，我们就能通过浏览器的File API读取内容，完全不受目录限制。下面是完整的实现代码：

HTML部分

<!DOCTYPE html>
<meta charset="utf-8">
<title>Test</title>
<!-- 隐藏原生文件选择框，用按钮触发更友好 -->
<input type="file" id="fileInput" style="display: none;" accept=".json">
<button class="mybutton" id="fileSelect">Select a file</button>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script type="text/javascript" src="my_script.js"></script>
</html>

my_script.js部分

// 获取按钮和隐藏的文件输入控件
const fileSelectBtn = document.getElementById('fileSelect');
const fileInput = document.getElementById('fileInput');

// 点击按钮触发文件选择对话框
fileSelectBtn.addEventListener('click', () => {
  fileInput.click();
});

// 用户选择文件后的处理逻辑
fileInput.addEventListener('change', (e) => {
  const selectedFile = e.target.files[0];
  if (!selectedFile) return;

  // 使用FileReader读取文件内容
  const reader = new FileReader();
  reader.onload = function(event) {
    // 解析JSON数据
    const jsonData = JSON.parse(event.target.result);
    
    // 现在你可以用D3自由处理这份数据了，举个简单例子：
    console.log('成功加载JSON数据：', jsonData);
    // 比如用D3在页面上渲染数据项
    d3.select('body')
      .selectAll('.data-item')
      .data(jsonData)
      .enter()
      .append('div')
      .attr('class', 'data-item')
      .text(d => d.name || JSON.stringify(d));
  };
  // 以文本形式读取选中的文件
  reader.readAsText(selectedFile);
});

另一种方案：用本地服务器运行页面 #

如果你习惯用d3.json()直接通过路径加载文件，可以把你的项目放到本地服务器上运行：

• 比如用Python：在项目根目录执行python -m http.server（Python3），然后访问http://localhost:8000
• 或者用Node.js的http-server：先安装npm install -g http-server，然后执行http-server启动
  这样页面在http://协议下运行，浏览器就允许加载服务器目录下任意位置的文件了，比如d3.json('./data/other-folder/data.json')就能正常工作。

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