Как получить доступ к данным JSON с помощью D3.js?

Question

Я внешний JSON-файл структурирован следующим образом:

{ 
data: [ 
     { 
     0: 'cat', 
     1: 232, 
     2: 45 
     }, 
     { 
     0: 'dog', 
     1: 21, 
     2: 9 
     }, 
     { 
     0: 'lion', 
     1: 32, 
     2: 5 
     }, 
     { 
     0: 'elephant', 
     1: 9, 
     2: 4 
     }, 
     ] 
} 

Использование d3.js Я хочу, чтобы получить доступ к данным с ключом 2 на высоту в гистограмме, так что я установить это:

d3.select('#chart').append('svg') 
    .selectAll('rect') 
    .data(data) 
    .enter() 
    .append('rect') 
    .attr('width', barWidth) 
    .attr('height', function(d) { 
     return d.data['2']; 
    }); 

Я могу видеть холст SVG, но я не могу получить прямоугольники для высоты гистограммы, какие-либо идеи?

Благодаря

Answer 1

d переменная посланные к вашей функции уже ваши данные, и его называют для каждого элемента в массиве:

.attr('height', function(d) { 
    return d['2']; 
}); 

Answer 2

Я изменил несколько вещей, чтобы сделать код функции, как гистограмма по умолчанию. Основная проблема заключалась в использовании d.data вместо d. После этого вы должны установить координаты x и y и чередующийся цвет (или дополнение с x), чтобы прямоугольники не перекрывали друг друга.

var width = 30; 
var padding = 5; 
var chartheight = 100; 
d3.select('#chart').append('svg') 
    .selectAll('rect') 
    .data(data) 
    .enter() 
    .append('rect') 
    .attr('width', width) 
    .attr('height', function(d) { 
    return d[2]; 
    }) 
    .attr('x', function(d, i) { 
    return i*(width + padding); 
    }) 
    .attr('y', function(d, i) { 
    return chartheight - d[2]; 
    }); 

d3.selectAll('rect') 
    .style('fill', function(d, i) { 
    return i % 2 == 0 ? "#0f0" : "#00f"; 
    });