проблема с обновлением гистограммы d3.js - PullRequest
0 голосов
/ 03 апреля 2019

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

//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"
  },

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

1 Ответ

0 голосов
/ 03 апреля 2019

Ваш фрагмент кода не закрывает все скобки, но кажется, что data [0] - это элемент массива, который представляет собой объект с двумя атрибутами, позициями и годом.Таким образом, чтобы сослаться на номер 36815 в вашем примере, ваш ref это data [0] .standings [0] .Black.Между тем, ваша ссылка на 1989 год - это данные [0] .год

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...