Javascript ReferenceError:使用Vue js和d3进行数据可视化时未定义d3

我试图使用npm run dev将

.json

文件显示为树状图 我相信我安装的一切都正确，但似乎出现了问题

这是我的App.vue代码

{{title}}
导出默认值{
名称：“应用程序”，
数据（）{
返回{
标题：“仓库清单”，
jsonData:null，
根节点：{}，
保证金：{
前20名，
右:0,，
底部：0，
左：0
},
宽度：960，
身高：530，
选中：空，
颜色：{}
}
},
安装的（）{
var=这个；
that.color=d3.scaleOrdinal（d3.schemeCategory20）//要使用的颜色数组
//创建画布
var canvas=d3.select（“body”）.append（“svg”）
.attr（“宽度”，500）
.attr（“高度”，500）
//d3 json文件的加载函数
d3.json（“./assets/warehouses.json”，
函数（错误、数据）{
//如果发生错误，则写入控制台
如果（错误）{
console.log（错误）
}
//创建树映射变量
var treemap=d3.treemap（）
//此处配置布局
树形图
.尺寸（[500500]）
.节点（数据）
.填塞器（10）；
that.jsonData=数据
初始化（）
that.accumulate（that.rootNode，that）
that.treemap（that.rootNode）
}
)
},
};

当我使用npm run dev运行它时，我得到下面的错误消息

---

我可以看到两种可能的解决方案

确保已正确安装d3

import*作为d3从“d3”导入

就在开始脚本标记之后

---

您是否使用NPM安装D3？