编程语言
首页 > 编程语言> > javascript-使用D3.JS将CSV转换为JSON

javascript-使用D3.JS将CSV转换为JSON

作者:互联网

我有以下格式的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: […] }

在内部值中,它只是一个元素数组,其值是{1:54.69801915,2:84.4717406,3:3:81.87766667,…}

但我期望这将是一个类似于以下内容的数组

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

有人可以告诉我我在做什么错吗?还是我应该如何获得预期的格式?

解决方法:

好吧,这就是d3.nest()的预期行为.

如果要在问题中共享该结构,并将值作为对象数组,则建议您编写自己的嵌套函数.

这是一个使用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对象.
>问题末尾所说的数组既不是数组也不是对象,实际上是无效的.
>最后,请勿在属性名称中使用数字.

标签:linechart,d3-js,json,javascript
来源: https://codeday.me/bug/20191109/2011316.html