D3.js：未捕获的类型错误：无法读取未定义的属性“文档”答案

【问题标题】：D3.js : Uncaught TypeError: Cannot read property 'document' of undefinedD3.js：未捕获的类型错误：无法读取未定义的属性“文档”
【发布时间】：2016-06-04 06:32:43
【问题描述】：

我在 d3.js 初始化方面遇到了一个非常奇怪的问题。在 d3.js 脚本中，一开始它尝试获取var d3_document = this.document;，但弹出以下错误：

Uncaught TypeError: Cannot read property 'document' of undefined

调试时，this.document 返回未定义。

我正在使用yo webapp 来生成项目。它使用 bower 作为包管理器并使用 gulp 进行构建过程（将 babel 用于 ES2015 功能）。

有趣的是，我已经用 xampp 对其进行了测试，并且效果很好！

我会很感激一些建议！Thnx！

【问题讨论】：

有关设置的详细信息。没有这些细节，我无法回答这个问题。

标签： javascript d3.js initialization undefined

【解决方案1】：

听起来有些东西（很可能是 Babel）在 D3 脚本文件的开头插入 "use strict"; 或将其合并到另一个文件中，顶部带有“use strict”。这意味着全局范围内的this（或在没有特定this 的函数中调用）不再是对全局对象的引用，而是undefined。（而在“松散”模式或在没有特定 this 值的情况下调用的函数中，全局范围内的 this 是对全局对象的引用，也可以通过全局变量 `window1 访问。）

您需要从 Babel 转换的脚本列表中删除您的 d3.js，并按原样包含它。假设您使用的是普通的 d3.js 文件，它看起来像这样：

!function() {
  var d3 = {
    version: "3.5.16"
  };
  var d3_arraySlice = [].slice, d3_array = function(list) {
    return d3_arraySlice.call(list);
  };
  var d3_document = this.document;
  // ...
  // ...
  // ...lots of stuff here...
  // ...
  // ...
}();

这依赖于在松散模式下运行。

【讨论】：

Thnx，绝对是 babel 将'use restrict' 附加到脚本中。对于遇到相同问题的任何人，请转到 here 以了解如何在 babel 5 和 babel 6 中解决它。