从object-as-data创建多个元素

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 function，它会将其转换为普通数组。