Ama*_*shy 5 html javascript d3.js
我d3从这里下载： https: //cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.js并将其包含在我的/static文件夹中。
/静态/graph.js
import * as d3 from "/static/d3.js"
export function graph() {
d3.select("#classname");
console.log("Selected");
}
索引.html
<html>
<body>
<script type="module">
import {graph} from "/static/graph.js"
graph()
</script>
</body>
</html>
但是，我收到错误d3.select is not a function.
/static是健全的；如果我更改引用任一 .js 文件的字符串，我（适当地）会TypeError: Error resolving module specifier: ...遇到，表示缓存的文件与服务器正在提供的内容匹配）。debugger;内部graph()，请转到开发人员。console 并输入d3，我可以滚动浏览 D3 中定义的所有函数的自动完成列表（包括select）。但是，类似d3.select, 返回Undefined。因此，D3 已加载到足以自动完成的程度，但所有内容都未定义。变量本身的类型在此Symbol(Symbol.toStringTag): "Module"记录（尽管我不确定如何处理所述文档）debugger;中放置一个语句似乎可以按预期工作，即使这不是它的导入位置。index.htmld3为什么d3.select不是函数？
rex*_*lly 16
我认为这里的问题是，您正在尝试加载模块，但有 ES6 模块，也有 UMD 模块。D3.js 是一个 UMD 模块。
UMD 模块被“引导”以挂钩到“窗口”或“全局”对象。UMD 模块在一段时间内不断发展，“模块”的工作方式一直在不断变化，无论如何，这是一个非常有趣的主题，我建议您有时阅读一下......
所以而不是
import * as d3 from "/static/d3.js"
你应该做
import "/static/d3.js"
现在您将能够使用 D3，因为它已附加到“窗口”对象。
话虽如此，您的设置将如下所示：
// index.html
<html>
<body>
<script type="module">
import {graph} from "/static/graph.js"
graph()
</script>
</body>
</html>
和
// static/graph.js
import "/static/d3.js" // Now loaded as UMD module
export function graph() {
d3.select("#classname");
console.log("Selected");
}
那行得通。
顺便说一句，这是 D3 模块的一部分，它执行引导并将 D3 附加到“窗口”对象。
...
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(global = global || self, factory(global.d3 = global.d3 || {})); // <-- the "magic" part.
}(this, function (exports) {
/*
THE REST OF THE MODULE SOURCE GOES HERE
all 18,561 lines of it...
*/
}));