d3-3d.js函数无法识别报TypeError错误的原因与解决方案

核心报错原因 #

• 脚本引入顺序错误：d3-3d是基于D3.js开发的插件，必须先加载D3主库，再加载d3-3d插件。你当前的引入顺序是先加载d3-3d、后加载D3，插件初始化时无法绑定完整的方法到d3全局对象上。
• 库版本与示例不匹配：你从unpkg引入的是最新版d3-3d（v1.x版本），两个运行失败的示例是基于早期v0.x版本的d3-3d编写的。v1.x版本做了不兼容的API调整，已经删除了链式调用的.primitiveType()方法，改为初始化时直接传入图元类型配置，因此执行老示例代码时会找不到对应方法。你能成功运行的第三个示例本身就是适配v1.x版本API编写的，所以不会触发这个报错。
• 浏览器环境不是问题诱因，你在Chrome、Firefox下复现相同报错符合版本、顺序错误的问题特征，和浏览器兼容性无关。

修复方法 #

如果你的目标是正常跑通那两个老示例，直接替换资源引入代码即可，注意严格遵守「先D3主库、后d3-3d插件」的顺序，且指定d3-3d为适配老示例的v0.0.10版本：

<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/d3-3d@0.0.10/build/d3-3d.min.js"></script>

如果你后续打算用最新版d3-3d开发自己的3D渲染功能，不要直接照搬那两个老示例的代码，需要按照新版API规则调整初始化逻辑，把原来链式调用.primitiveType()传入图元类型的写法，改成调用d3._3d()初始化时就传入shape类型参数，新版不再支持单独的primitiveType链式调用方法。

跑第三方开源库示例前，一定要先确认示例编写时对应的库版本，不要默认拉取最新版运行，大版本迭代经常会出现API破坏性变更，直接照搬老代码大概率会报方法不存在的错误。

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