Hierarchy的links()函数返回空数组

Question

我正在尝试使用.json数据和d3 js和vue js创建一个treemap。我将数据加载到应用程序中，然后创建我的treemap对象。但是，当我将数据记录到控制台时，它会返回一个空数组。我怎样才能修复这个问题呢？console logs我试着删除了links()函数，这很好用，但是为了制作树状图，我认为我需要它

代码

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
      const links = treemapLayout(root).links()
       //need to load the data
       console.log(links)

      //creating the treemap and its properties
        
      var svg = d3.select("body")
        .data(root)
        .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")
    })
  },
}

数据集

{
    "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":[]
        }
    ]
}

Answer 1

您需要指定children accessor。例如：

var root = d3.hierarchy(data, d => d.warehouses);

以下是工作代码：

​

const data = {
  "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": []
    }
  ]
};

var root = d3.hierarchy(data, d=>d.warehouses);

var treemapLayout = d3.treemap()
  .paddingTop(20)
  .paddingInner(2)
  .round(true)
  .tile(d3.treemapSquarify.ratio(2)); 
  
const links = treemapLayout(root).links()

console.log(links)

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

​

顺便说一句，对于层次结构中的其他级别，属性名称(这里是warehouses)必须相同。