Создание нескольких элементов из объекта-в-данных

Question

В попытке сделать несколько элементов с помощью SVG D3.js, я использую следующий код, который работает данный этот формат данных:

// 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 соответствуют каждому ребенку объект данных (х, у, г). Кажется, они автоматически создаются для каждого объекта в первом представлении данных. Как я могу добиться этого, учитывая вторую структуру данных?

Answer 1

Функция .data() ожидает обычный массив, поэтому просто объект/ассоциативный массив не будет работать. Посмотрите на d3.entries function, который преобразует его в обычный массив.