d3.js解析文件中类似JSON的数据

时间:2018-04-02 13:34:43

标签: javascript json d3.js

我正在努力阅读JSON文件中的数据。

我想要阅读的JSON文件具有以下结构:

{"name":"Andy Hunt",
  "title":"Big Boss",
  "age": 68,
  "bonus": true
}
{"name":"Charles Mack",
  "title":"Jr Dev",
  "age":24,
  "bonus": false
}

但是,据我所知,d3.js只能解析具有以下结构的JSON数组:

[
 {"name":"Andy Hunt",
  "title":"Big Boss",
  "age": 68,
  "bonus": true
 },
 {"name":"Charles Mack",
  "title":"Jr Dev",
  "age":24,
  "bonus": false
 }
]

我正在使用此代码段尝试显示第一个数据对象,以查看它是否有效:

d3.json("/data/sample_data.json", function(data) {
  console.log(data[0]);
});

这适用于第二个JSON结构,但不适用于第一个JSON结构。

现在我的问题:是否有可能以某种方式读取数据与d3.js? 或者我是否必须编写一个程序,将整个JSON文件重新格式化为JSON数组?

编辑:将我想要使用的数据格式化为NDJSON。所以目前没有办法用d3.js本地读取数据,除了将其解析为文本并按照@Mark解释的方式重新格式化。

2 个答案:

答案 0 :(得分:4)

由于@Shashank指出您的JSON无效。这与d3无关,而是与JavaScript和可接受的JSON格式无关。那么,我们该如何解决呢?您可以在d3 / javascript中进行,而不是预处理文件。

// how many lines of JSON make an object?
var chunks = 5,
    data = [];
//download file as TEXT
d3.text("data.txt", function(error, text) {
  if (error) throw error;
  // split on new line
  var txt = text.split("\n");
  // iterate it
  for (var i = 0; i < txt.length; i += chunks) {
    var block = "";
    // grab blocks of 5 lines
    for (var j = 0; j < chunks; j++ ){
      block += txt[i+j];
    }
    // parse as JSON and push into data ARRAY
    data.push(JSON.parse(block));
  }
  console.log(data);
});

此处它正在plunker上运行。

答案 1 :(得分:2)

您尝试阅读的JSON文件的格式不正确。 JSON (根据标准)可以是名称/值对的集合,即对象或对象列表,即对象数组。请参阅:http://json.org/

  1. 如果您的JSON文件包含以下数据(请注意格式 - 单个对象):

    {
     "name":"Andy Hunt",
     "title":"Big Boss",
     "age": 68,
     "bonus": true,
     "value": 500
    }
    

    d3.json将提供以下结果:

    => {name: "Andy Hunt", title: "Big Boss", age: 68, bonus: true, value: 500}
    
  2. 您已经尝试过使用数组结构。

  3. 我建议您将JSON文件更改为对象数组。希望这可以解决它。