d3 js树形图未知错误导致不显示

Question

我正在使用 d3 js 和 vue js 向本地服务器显示树形图。 我通过 d3.json 数据加载数据并正确记录，但是当我将其加载到树形图 function 并将其显示到它不显示的主体时。 这是我的代码中的错误还是我做错了什么？ 我对 d3 js 相当陌生，所以我一直将其用作参考。 谢谢你的帮助。 我使用的数据以 a.json 格式表示

数据

{
    "warehouses":[
        {
            "id":4,
            "name":"Goimek",
            "value":354,
            "idParent":0,
            "nameParent":"",
            "locationInfo":[
            {
                "id":19,
                "name":"Puerta 4",
                "value":354
            }],
            "warehouseChildrenInfo":[]
        },
        {
            "id":5,
            "name":"Karpa",
            "value":167,
            "idParent":0,
            "nameParent":"",
            "locationInfo":[
            {
                "id":24,
                "name":"Karpa",
                "value":167
            }],
            "warehouseChildrenInfo":[]
        },
        {
            "id":6,
            "name":"Wec",
            "value":145,
            "idParent":0,
            "nameParent":"",
            "locationInfo":[
            {
                "id":25,
                "name":"WEC",
                "value":115
            }],
            "warehouseChildrenInfo":[
            {
                "id":1009,
                "name":"BIGUMETRIK",
                "value":30,
                "idParent":0,
                "nameParent":"",
                "locationInfo":[
                {
                    "id":1015,
                    "name":"BIGUMETRIK",
                    "value":30
                }],
                "warehouseChildrenInfo":[]
            }]
        },
        
        {
            "id":1037,
            "name":"PROVEEDOR",
            "value":10,
            "idParent":0,
            "nameParent":"",
            "locationInfo":[
            {
                "id":1553,
                "name":"PROVEEDOR Lehenetsitako kokapena",
                "value":10
            },
            {
                "id":1554,
                "name":"PIKUMEK S.L",
                "value":10
            },
            {
                "id":1555,
                "name":"TENKOR S.L",
                "value":10
            },
            {
                "id":1556,
                "name":"ZUMELTXU S.L",
                "value":10
            }],
            "warehouseChildrenInfo":[]
        }
    ]
}

代码

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

      
      <body id="container">  </body>
      <svg id="treemap" width="400" height="200" viewBox="0 0 400 220">

        <g transform="translate(0,10)">
        </g>

      </svg>

    </div>
    

  </div>
</template>

<script>

import * as d3 from "d3"
import WareHouse from "../static/warehouses.json"
export default {
  name: "App",
  
  data() {
    return {
      warehouses: WareHouse.warehouses,
      title: 'Warehouse sizes',
      
    };
  },
  

  mounted(){
  //calls funciton to create treemap 
  this.createTreemap()

  //this.createTreemapNode()

  },

methods: {

  createTreemap() {
      

    d3.json("https://raw.githubusercontent.com/BrennanAdams/treemap/master/warehouses.json").then(function(data) {
       //reformating the data to fit hierarchy layout
      var root = d3.hierarchy(data)
      root.sum(d => d.value)
      root.sort((a, b) => b.value - a.value)

      var treemapLayout = d3.treemap()
        .paddingTop(20)
        .paddingInner(2)
        .round(true)
        .tile(d3.treemapSquarify.ratio(2)); // Squarify, Slice, SliceDice, Binary

      //finalizing treemap
      treemapLayout(root)
       //need to load the data
       console.log(data)

      //creating the treemap and its properties
        
      var svg = d3.select("#treemap g")
        .selectAll("g")
        .data(root.leaves())
        .enter()
        .append("rect")
        .attr('x', function (d) { return d.x0; })
        .attr('y', function (d) { return d.y0; })
        .attr('width', function (d) { return d.x1 - d.x0; })
        .attr('height', function (d) { return d.y1 - d.y0; })
        .style("stroke", "black")
        .style("fill", "slateblue")
    })
  },




  }
}
</script>