Как вызвать все значения во вложенных данных JSON (d3js) - PullRequest
Новая
       6

Как вызвать все значения во вложенных данных JSON (d3js)

0 голосов
/ 25 мая 2018

У меня есть данные, которые структурированы в виде JSON, который выглядит следующим образом (реальные данные намного больше, а каждый экземпляр имеет гораздо больше переменных и атрибутов): 

var json = [
{
    "CLIN": "1",
    "cost": 257,
},
{
    "CLIN": "1",
    "cost": 846,
},
{
    "CLIN": "2",
    "cost": 162         
},
{
    "CLIN": "2",
    "cost": 984
}]

Так выглядит мой код JS: 

   <script>
        var margin = {top: 20, right: 160, bottom: 35, left: 30};

        var width = 960 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;

        var svg = d3.select('body')
                    .append('svg')
                    .attr('width', width + margin.left + margin.right)
                    .attr('height', height + margin.top + margin.bottom)
                    .append('g')
                    .attr('transform', 'translate('+ margin.left + "," + margin.top + ")");

        var dataByCLIN = d3.nest()
            .key(function(d) {return d.CLIN; })
            .entries(json);

  </script>

Это успешно вкладывает данные по атрибуту CLIN.Однако, когда я пытаюсь передать все четыре переменные для создания четырех прямоугольников для моего гистограммы, он не возвращает никаких значений 

        var bars = svg.selectAll('rect')
                    .data(dataByCLIN)
                    .enter()
                        .append('rect')
                        .attr('width', function(d) { return d.values.cost; })
                        .attr('height', 10)
                        .attr('y', function(d, i) { return i * 20; });

Если я запускаю приведенный ниже код с различными вариантами выбора массива: 

console.log(dataByCLIN[0].values[0].cost)

Возвращает нужные мне значения, но код: 

.attr('width', function(d, i, j) { return d[i].values[j].cost;

недействителен.Консоль выдает ошибку 

Cannot read property 'values' of undefined

Я знаю, как выбрать нужные мне данные, но нет правильного форматирования для передачи этих данных в функцию d3.

1 Ответ

0 голосов
/ 25 мая 2018

Что вы можете сделать, это использовать for/forEach для своих данных dataByCLIN и создать rects внутри каждого цикла следующим образом: 

var bars = svg.selectAll('.rects');
dataByCLIN.forEach(function(d,i1) {
  bars.data(d.values).enter().append('rect').attr('class', 'rects')
    .attr('width', function(d) {
      return d.cost;
    })
    .attr('height', 10)
    .attr('y', function(d, i) {
      return (i+i1+i1+1) * 20 - 20;
    });
});

Вот скрипка: 

var json = [{
    "CLIN": "1",
    "cost": 257,
  },
  {
    "CLIN": "1",
    "cost": 846,
  },
  {
    "CLIN": "2",
    "cost": 162

  },
  {
    "CLIN": "2",
    "cost": 984
  }
];


var margin = {
  top: 20,
  right: 160,
  bottom: 35,
  left: 30
};

var width = 960 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;

var svg = d3.select('body')
  .append('svg')
  .attr('width', width + margin.left + margin.right)
  .attr('height', height + margin.top + margin.bottom)
  .append('g')
  .attr('transform', 'translate(' + margin.left + "," + margin.top + ")");

var dataByCLIN = d3.nest()
  .key(function(d) {
    return d.CLIN;
  })
  .entries(json);

var bars = svg.selectAll('.rects');
dataByCLIN.forEach(function(d, i1) {
  bars.data(d.values).enter().append('rect').attr('class', 'rects')
    .attr('width', function(d) {
      return d.cost;
    })
    .attr('height', 10)
    .attr('y', function(d, i) {
      return (i + i1 + i1 + 1) * 20 - 20;
    });
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
...