從創建對象作爲數據

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，它會將其轉換爲普通數組。