使用D3.JS将CSV转换为JSON

时间:2018-05-01 06:42:01

标签: javascript json d3.js linechart

我有以下格式的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使用这个csv数据绘制折线图。一旦我使用下面的代码嵌套它们

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 :(得分:3)

嗯,这是d3.nest()的预期行为。

如果你想要在你的问题中分享的结构,values作为一个对象数组,我建议你编写自己的嵌套函数。

以下是使用mapfor...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>
&#13;
&#13;
&#13;

其他一些评论:

  • 你的问题中有什么不是JSON,它只是一个简单的JavaScript对象。
  • 在问题的最后,你所谓的数组既不是数组也不是对象,它实际上是无效的。
  • 最后,不要使用数字作为您的地产名称。