ReferenceError: d3 is not defined while using Vue js and d3 for data可视化

Question

我正在尝试使用 npm run dev 将 .json 文件显示为树状图 我相信我正确安装了所有东西，但似乎出现了问题

这是我的 App.vue 代码

<template>
      <div id="app">
        <title> {{ title }}</title>
      </div>
</template>

<script>
  export default {
    name: "App",
    data() {
      return {
        title: 'List of warehouses',

        jsonData: null,
        rootNode: {},

        margin: {
          top: 20,
          right: 0,
          bottom: 0,
          left: 0
        },

        width: 960,
        height: 530,
        selected: null,
        color: {}
      }
    },


    mounted() {
      var that = this;
      that.color = d3.scaleOrdinal(d3.schemeCategory20) //array of color to use

      //creating a canvas
      var canvas = d3.select("body").append("svg")
        .attr("width", 500)
        .attr("height", 500)

      //d3 load funciton for json files
      d3.json('./assets/warehouses.json',
        function(error, data) {

          //if error happens write to console
          if (error) {
            console.log(error)
          }

          //creating treemap variable
          var treemap = d3.treemap()

          //config layout here
          treemap
            .size([500, 500])
            .nodes(data)
            .paddingOuter(10);

          that.jsonData = data
          that.initialize()
          that.accumulate(that.rootNode, that)
          that.treemap(that.rootNode)
        }
      )
    },
  };
</script>
<style>
</style>

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

Answer 1

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

1. 确保您已正确安装 d3。

2. import * as d3 from 'd3' 在您的开始脚本标记之后