使用D3.JS将CSV转换为JSON

Question

我有一个以以下格式的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,...
......

我想使用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}, … }

有人能告诉我这里我做错了什么吗？或者我该如何获得期望的格式？

- Thusitha Thilina Dayaratne

Answer 1

那就是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对象。
• 你在问题末尾所称的“数组”既不是数组也不是对象，实际上是无效的。
• 最后，不要使用数字作为属性名称。

- Gerardo Furtado