使用Vue时出现“ D3-tree”错误

Question

我正在尝试使用Vue和dTree js库（link）创建树。

我通过使用npm i d3-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>

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

  

挂接的钩子中出现错误：“ ReferenceError：未定义d3”

（也尝试将方法移至created()）。

试图在以下thread中找到解决方案，但并没有解决问题。

我该如何解决这个问题？