D3.js:未捕获的TypeError:无法读取未定义的属性'document' [英] D3.js : Uncaught TypeError: Cannot read property 'document' of undefined

问题描述

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

I'm having a really weird problem with d3.js initilization. In the d3.js script, at the very beginning, it tries to get var d3_document = this.document; but it pops the following error:

Uncaught TypeError: Cannot read property 'document' of undefined

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

when debugging, this.document returns undefined.

我正在使用yo webapp生成项目.它使用bower作为程序包管理器，并使用gulp进行构建过程(将babel用于ES2015功能).

I'm using yo webapp to generate the project. It uses bower as package manager and gulp for the build process (that uses babel for the ES2015 features).

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

The funny thing is that I've tested it with xampp and it works fine!

请多多指教！谢谢！

推荐答案

听起来(Babel，很可能是在D3脚本文件的开头插入"use strict";或将其组合到另一个文件中，使用严格"在顶部.这意味着this在全局范围内(或在没有特定this的情况下调用的函数中)不再是对全局对象的引用，它是undefined. (在松散"模式下或在没有特定this值的情况下调用的函数中，在全局范围内的this是对全局对象的引用，也可以通过全局变量`window1进行访问.)

It sounds like something (Babel, most likely) is inserting "use strict"; at the beginning of the D3 script file or combining it into another file with "use strict" at the top. That means this at global scope (or in a function called without a specific this) is no longer a reference to the global object, it's undefined. (Whereas in "loose" mode or in a function called with no specific this value, this at global scope is a reference to the global object, which is also accessible via the global variable `window1.)

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

You need to remove your d3.js from the list of scripts being transformed by Babel and just include it as-is. Assuming you're using the normal d3.js file, it looks like this:

!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...
  // ...
  // ...
}();

这取决于在宽松模式下运行.

That relies on being run in loose mode.

这篇关于D3.js:未捕获的TypeError:无法读取未定义的属性'document'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！