javascript - 从对象即数据创建多个元素

Question

在尝试使用 D3.js 制作多个 svg 元素时，我使用了以下代码，该代码适用于这种数据格式：

// Data that works:
    var data= [
        {x:1, y:2, z:5}, 
        {x:3, y:5, z:10}, 
        {x:8, y:9, z:11}
    ]

// Make svg elements
    var svg = d3.select('body').selectAll('svg')
              .data(data)
              .enter().append('svg')
              .style('display', 'inline-block')
              .style('width', width)
              .style('height', height)
              .append('svg:svg')

但是，当我的数据嵌套时，DOM 上不会出现 svg 元素：

var data = {
    x: {
        val1: 10,
        val2: 20
       },
    y: {
        val1: 15,
        val2: 14
       },
   z: {
        val1: 10,
        val2: 20
       }
}

我想创建对应于数据的每个子对象（x、y 和 z）的 svg 元素。似乎它们在数据的第一个表示中自动为每个对象创建。给定第二种数据结构，我如何实现这一点？

Answer 1

该.data()函数需要一个普通数组，因此只有一个对象/关联数组是行不通的。看一下d3.entries函数，它将把它转换成一个普通的数组。