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

标签 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 结构,但不适用于第一个。

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

编辑:结果我想使用的数据被格式化为 NDJSON。因此,除了将数据解析为文本并按照@Mark 解释的方式在移动中重新格式化外,目前没有其他方法可以使用 d3.js 本地读取数据。

最佳答案

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

关于javascript - d3.js 从文件中解析类似 JSON 的数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49612350/

相关文章:

angular - d3v5 Angular 8 生产模式 - 错误类型错误 : (void 0) is not a function

javascript - D3 区分具有拖动行为的元素的单击和拖动

javascript - D3.js重叠条形图显示错误

javascript - 为什么我的 jQuery 动画不能正常工作?

javascript - 从部署中排除不必要的文件

javascript - 将 FB 小时 json 对象转换为 json 对象数组

json - 为什么 JSON.NET 添加所有这些反斜杠

自动调用 vs 手动调用的 Javascript 闭包

javascript - 如何在 Laravel 中使用 Viewer js

java - 从模式生成 JSON 绑定(bind)和解析器,无需反射和注释