ReferenceError: d3 is not defined while using Vue js and d3 for data visualization

Question

I am trying to display a .json file as a treemap using npm run dev I believed I installed everything correctly however it seems like a problem occurs

Here is my App.vue code

<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>

And when I run it using npm run dev I get this below error message

Answer 1

I can see two potential solutions,

1. Ensure that you have correctly installed d3.

2. import * as d3 from 'd3' right after your beginning script tag