Javascript “的获取错误”；D3树；，在使用Vue时

我正在尝试使用

Vue

和

dTree

js库（）创建一个树

我使用：

npmid3 dtree

安装了库

然后我写了以下脚本：

<template>
    <div id="tree"></div>
</template>

<script>
    import dTree from 'd3-dtree/dist/dTree.js';
    import * as d3 from 'd3';

    Vue.use(VueResource);

    export default {

        data() {
            return {
                treeData: [{
                  "name": "Niclas Superlongsurname",
                  "class": "man",
                  "textClass": "emphasis",
                  "marriages": [{
                    "spouse": {
                      "name": "Iliana",
                      "class": "woman",
                      "extra": {
                        "nickname": "Illi"
                      }
                    },
                    "children": [{
                      "name": "James",
                      "class": "man",
                      "marriages": [{
                        "spouse": {
                          "name": "Alexandra",
                          "class": "woman"
                        },
                        "children": [{
                          "name": "Eric",
                          "class": "man",
                          "marriages": [{
                            "spouse": {
                              "name": "Eva",
                              "class": "woman"
                            }
                          }]
                        }, {
                          "name": "Jane",
                          "class": "woman"
                        }, {
                          "name": "Jasper",
                          "class": "man"
                        }, {
                          "name": "Emma",
                          "class": "woman"
                        }, {
                          "name": "Julia",
                          "class": "woman"
                        }, {
                          "name": "Jessica",
                          "class": "woman"
                        }]
                      }]
                    }]
                  }]
                }]
            }
        },

        mounted: function() {
            dTree.init(this.treeData, {
                target: "#tree",
                debug: true,
                height: 800,
                width: 1200,
                callbacks: {
                    nodeClick: function(name, extra) {
                    console.log(name);
                    }
                }
            });
        },

    }
</script>

<style scoped>
     div {
             margin: auto 0;
              width: 100%;
     }
 </style>

从“d3 dTree/dist/dTree.js”导入dTree；
从“d3”导入*作为d3；
Vue.use（VueResource）；
导出默认值{
数据（）{
返回{
特雷达：[{
“名称”：“Niclas Superlongsurname”，
“阶级”：“人”，
“文本类”：“强调”，
“婚姻”：[{
“配偶”：{
“姓名”：“伊利安娜”，
“阶级”：“女人”，
“额外”：{
“昵称”：“伊利”
}
},
“儿童”：[{
“姓名”：“詹姆斯”，
“阶级”：“人”，
“婚姻”：[{
“配偶”：{
“姓名”：“Alexandra”，
“阶级”：“女人”
},
“儿童”：[{
“姓名”：“埃里克”，
“阶级”：“人”，
“婚姻”：[{
“配偶”：{
“姓名”：“Eva”，
“阶级”：“女人”
}
}]
}, {
“姓名”：“简”，
“阶级”：“女人”
}, {
“姓名”：“贾斯珀”，
“阶级”：“人”
}, {
“姓名”：“艾玛”，
“阶级”：“女人”
}, {
“姓名”：“朱莉娅”，
“阶级”：“女人”
}, {
“姓名”：“杰西卡”，
“阶级”：“女人”
}]
}]
}]
}]
}]
}
},
挂载：函数（）{
dTree.init（this.treeData{
目标：“树”，
是的，
身高：800，
宽度：1200，
回调：{
nodeClick：函数（名称，额外）{
console.log（名称）；
}
}
});
},
}
div{
保证金：自动0；
宽度：100%；
}

运行脚本后，出现以下错误：

挂载挂钩中出错：“ReferenceError:未定义d3”

（还尝试将方法移动到

created（）

）

试图在以下方面找到解决方案，但没有解决问题

---

如何解决此问题？

您是否有理由忽略创建的

钩子/函数？这就是错误所在is@Phil，谢谢您的注意，我的意思是
mounted
（但我也尝试将该方法移动到
创建的
。请查看我的小编辑。您没有在
挂载的
钩子中的任何位置使用
d3
。您确定此错误消息是指此组件吗？@Phil我知道
dtree
（线程中的链接）正在使用
d3
。因此我猜它来自那里。