Блог

Я пытаюсь создать гистограмму, которая обновляется в цикле с данными, которые у меня есть в файле json, но я не могу получить доступ к данным JSON data, потому что внутри массива вложен массив

 //X Scale
var x = d3.scaleBand()
    .domain(['Black', 'Hispanic', 'Other', 'White'])
    .range([0, width])
    .padding(0.2);

//Y Scale
var y = d3.scaleLinear()
    .domain([0, 120000])
    .range([height, 0]);

//X Axis
var xAxisCall = d3.axisBottom(x);
g.append('g')
    .attr('class', 'x axis')
    .attr('transform', 'translate(0,'   height   ')')
    .call(xAxisCall);

//Y axis
var yAxisCall = d3.axisLeft(y)
    .tickFormat(function(d){return '$'   d; })
g.append('g')
    .attr('class', 'y axis')
    .call(yAxisCall);

//Bars
var rects = g.selectAll('rect')
    .data(data[0])
    var groupOne = data[0];


//Problem is below
    console.log(groupOne.standings[0]);
    rects.enter()
        .append('rect')
            .**attr('y', function(d){return y(data[0].standings); })
            .attr('x', function(d){return x(d.standings) })
            .attr('width', function(d){return height - y(data[0].standings);})**
            .attr('width', x.bandwidth)
            .attr('fill', 'grey');


//Here is a sample of the json data
[
  {
    "standings": [
      {
      "Black": 36815,
      "Hispanic": 39742,
      "Other": 58884,
      "White": 86229
    }
    ],
    "year": "1989"
  },
  

моя гистограмма должна отображать значения, перечисленные для турнирной таблицы по столбцам, что в конечном итоге позволит мне обновлять диаграмму каждый год.

Ваш фрагмент кода не закрывает все круглые скобки, но, похоже, data[0] — это элемент массива, представляющий собой объект с двумя атрибутами: турнирная таблица и год. Итак, чтобы ссылаться на число 36815 в вашем примере, ваша ссылка — данные [0].таблица [0].Черный. Между тем ваша ссылка на 1989 год — data[0].year