从创建对象作为数据

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

然而，当我的数据是嵌套的，没有SVG元素出现在DOM：

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

我想创建对应于数据的每个子对象的SVG元素（x，y和z）表示。看起来他们自动为数据的第一个表示中的每个对象创建。在给定第二个数据结构的情况下，我该如何实现？

Answer 1

.data()函数期望一个正常的数组，因此只是一个对象/关联数组将不起作用。看看d3.entries function，它会将其转换为普通数组。