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

【问题标题】：d3.js parse JSON-like data from filed3.js 从文件中解析类似 JSON 的数据
【发布时间】：2018-04-10 18:47:45
【问题描述】：

我正在努力从 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
 }
]

我正在使用这段代码 sn-p 试图显示第一个数据对象只是为了看看它是否有效：

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

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

现在我的问题是：是否可以使用 d3.js 以某种方式读取数据？还是我必须编写一个程序，将整个 JSON 文件重新格式化为 JSON 数组？

编辑： 结果我想使用的数据被格式化为 NDJSON。因此，除了将其解析为文本并按照@Mark 解释的方式随时重新格式化之外，目前没有办法使用 d3.js 本地读取数据。

【问题讨论】：

标签： javascript json d3.js

【解决方案1】：

正如@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 上运行。

【讨论】：

谢谢你！这就像一个魅力，我能够修改它来解析我的数据。我仍然有点困惑为什么我的数据源无效，因为其他开发人员似乎对此没有任何问题。但有了这个解决方案，我应该能够让它运行。

【解决方案2】：

您尝试读取的 JSON 文件的格式不正确。 JSON（根据标准）可以是名称/值对的集合，即对象或对象列表，即对象数组。参考这个：http://json.org/

如果您的 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}

您已经尝试过使用数组结构。

我建议您将 JSON 文件更改为对象数组。希望这能解决问题。

【讨论】：