为何在Observable中调用D3图表报未定义属性错误，HTML中却正常？

我之前在Observable里折腾D3图表的时候也踩过这个坑，结合你的情况来看，这个错误的根源主要是Observable和传统HTML环境的D3加载/作用域机制不一样，咱们一步步拆解：

错误原因分析 #

• D3模块导入不完整：传统HTML里你可能是通过<script>标签引入了完整的D3库，全局环境里有完整的d3对象；但Observable默认是按需导入模块的，如果你的chart函数依赖d3.timeFormat（属于d3-time-format子模块），但你没导入这个模块，或者只导入了部分D3功能，就会出现找不到timeFormat的情况。
• 作用域不匹配：Observable里的变量都是单元格级别的作用域，不像浏览器里有全局的d3对象。如果你的chart函数是从原来的HTML脚本直接复制过来的，它可能在依赖全局的d3，但Observable里这个全局对象不存在，自然会报错。
• 执行顺序问题：Observable是按单元格的执行顺序来运行代码的，如果定义chart的单元格在D3导入之前，或者调用chart的时候repositoriesData还没准备好，也可能触发这类依赖错误（不过你的错误明确指向timeFormat，所以这个是次要因素）。

修复方法 #

1. 确保完整导入D3或所需子模块 #

如果不想麻烦，直接导入完整的D3库，这样所有方法都能直接用：

import * as d3 from "d3"

如果想按需导入（减小体积），就把chart用到的所有D3子模块都导入，比如用到timeFormat、select、scaleLinear的话：

import { select } from "d3-selection"
import { timeFormat } from "d3-time-format"
import { scaleLinear } from "d3-scale"
// 按需添加其他用到的模块

2. 调整chart函数的依赖引用 #

如果chart是你自己写的，要确保它内部的D3方法引用的是Observable里导入的模块，而不是全局对象。比如原来的HTML里的代码：

function chart(selection) {
  selection.each(function(data) {
    const format = d3.timeFormat("%Y-%m-%d");
    // 其他绘制逻辑
  });
}

在Observable里要改成对应导入的模块：

// 如果是完整导入d3
function chart(selection) {
  selection.each(function(data) {
    const format = d3.timeFormat("%Y-%m-%d");
    // 其他绘制逻辑
  });
}

// 如果是按需导入timeFormat
function chart(selection) {
  selection.each(function(data) {
    const format = timeFormat("%Y-%m-%d");
    // 其他绘制逻辑
  });
}

3. 保证执行顺序正确 #

在Observable里，单元格的执行顺序很重要：

• 先放D3导入的单元格
• 再放chart函数定义的单元格
• 最后放调用d3.select('#events').data([repositoriesData]).call(chart);的单元格
  另外，要确保#events元素已经存在，比如可以单独一个单元格创建它：

<div id="events"></div>

4. 适配外部chart函数（如果是第三方的） #

如果你的chart函数是从外部脚本复制过来的，本身依赖全局d3，可以把它包装成一个接受d3参数的函数：

import * as d3 from "d3"

function externalChart(selection, d3) {
  // 原来的chart函数代码，把里面的d3都换成传入的这个参数
}

// 调用的时候
d3.select('#events').data([repositoriesData]).call(sel => externalChart(sel, d3))

内容的提问来源于stack exchange，提问作者aaron.kyle