如何在ObservableHQ/VizHub运行D3.js代码并获取预期柱状图输出

我刚入门D3的时候也踩过一模一样的坑！ObservableHQ的代码是为它自己的交互式运行环境量身打造的，直接照搬去普通JS文件里肯定会出问题。下面是一步步帮你解决的方法：

1. 先确认VizHub的JS版本设置 #

VizHub默认应该支持ES6+语法，但有时候可能不小心切换到了旧版本。你可以：

• 点击编辑器右上角的齿轮图标打开「Settings」
• 在「JavaScript」选项里，确认选中的是「ES6+」或「Modern」，而不是「ES5」
• 保存设置后重启项目

2. 适配Observable代码到普通JS环境 #

Observable的代码有很多专属语法，必须调整才能在VizHub里运行：

（1）处理D3的引入方式 #

Observable里的import是它自己的模块系统，在VizHub里更简单的方式是用CDN引入：
在HTML的<head>标签里添加：

<script src="https://d3js.org/d3.v7.min.js"></script>

这样你的index.js里就不需要import语句，直接用全局的d3对象即可。

（2）修复顶层await和变量作用域问题 #

Observable里允许直接写const data = await d3.csv("data.csv")，但普通JS环境里顶层await需要把脚本声明为模块。你需要修改HTML里的脚本引用：

<script type="module" src="index.js"></script>

如果不想用模块，也可以把数据加载逻辑包裹在.then()里：

d3.csv("data.csv").then(data => {
  // 所有可视化逻辑都放在这里面
}).catch(error => {
  console.error("加载数据失败：", error);
});

（3）移除Observable专属语法 #

如果你的代码里有viewof、mutable这类Observable独有的语法，必须替换成普通的D3交互逻辑。比如分组柱状图里的动态参数控制，要改成用D3的事件监听来实现。

3. 针对性调试第57行的const错误 #

针对你提到的第57行语法错误，你可以：

• 检查该行及附近代码，看是不是const声明在了不合法的位置（比如在ES5环境的非块级作用域里，但只要你按步骤1切换到ES6+就不会有这个问题）
• 确认没有拼写错误，比如漏了分号、括号不匹配，或者在同一个作用域里混用var和const导致的冲突
• 把第57行的代码单独抽出来测试，看是不是和上下文的逻辑冲突

4. 验证数据加载是否正常 #

确保data.csv放在VizHub项目的根目录（和index.js、index.html同级），可以在加载代码里加日志排查：

d3.csv("data.csv").then(data => {
  console.log("加载的数据：", data);
  // 这里写可视化逻辑
}).catch(err => console.error(err));

最后给你一个适配后的分组柱状图基础框架参考：

// index.js
d3.csv("data.csv").then(data => {
  // 转换数据类型，把字符串转成数值
  data.forEach(d => {
    d.value = +d.value;
  });

  // 设置SVG尺寸
  const width = 600;
  const height = 400;

  // 创建SVG容器
  const svg = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

  // 在这里添加比例尺、坐标轴、绘制柱子等核心逻辑
  // 注意替换成你从Observable复制的代码，移除所有Observable专属语法
}).catch(err => console.error(err));

按照这些步骤调整后，应该就能解决语法错误并正常显示可视化了！

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