CSV в JSON с использованием D3.JS - PullRequest
0 голосов
/ 01 мая 2018

У меня есть CSV-файл в следующем формате

type,1,2,3,4,5,6,7,8,.... // Upto 48
type1,54.69801915,84.4717406,81.87766667,66.48516667,...
type2,51.57399106,84.23170179,82.13950136,67.37540461,...
......

Я хочу нарисовать линейный график, используя эти данные CSV с d3. Однажды я вложил их в код, указанный ниже

d3.nest().key(function(d) { 
    return d.type; 
  }).entries(data);

Мой JSON выглядит следующим образом

{ key: "type1", values: […] }

и внутри values это просто массив из одного элемента, значение которого { 1: 54.69801915, 2: 84.4717406, 3: 81.87766667, … }

Но я ожидаю, что это будет массив, похожий на

{ { 1: 54.69801915}, {2: 84.4717406}, {3: 81.87766667}, … }

Может кто-нибудь сказать мне, что я здесь делаю неправильно? Или как мне получить ожидаемый формат?

1 Ответ

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

Ну, это ожидаемое поведение d3.nest().

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

Вот пример кода, который делает то, что вы хотите, используя map и for...in. Это ни изящно, ни красиво, это преднамеренно многословно, чтобы быть легко понятым (я использую только несколько столбцов и строк в ваших данных):

var csv = `type,1,2,3,4
type1,54.69801915,84.4717406,81.87766667,66.48516667
type2,51.57399106,84.23170179,82.13950136,67.37540461`;

var data = d3.csvParse(csv);

var nested = data.map(function(d) {
  var obj = {
    key: d.type,
    values: []
  };
  for (var prop in d) {
    if (prop !== "type") {
      obj.values.push({
        [prop]: d[prop]
      })
    }
  }
  return obj;
});

console.log(nested)
<script src="https://d3js.org/d3.v5.min.js"></script>

Некоторые дополнительные комментарии:

  • То, что у вас есть в вашем вопросе, это не JSON, это просто простой объект JavaScript.
  • То, что вы называете массивом в конце вашего вопроса, не является ни массивом, ни объектом, это фактически неверно.
  • Наконец, не используйте цифры в именах своих объектов.
...