javascript - Javascript D3.js d3.json() 函数不接受有效的 json，如何使用它与 d3.csv 相同？

Question

学习 d3.js 我正在使用来自 .csv 文件的原始数据构建直方图，如下所示，

CSV

x,y
2,16
3,18
5,18
12,19

D3

d3.csv("data.csv", function (data) {

var map = data.map(function (i) {
    return parseFloat(i.y);
})

var histogram = d3.layout.histogram()
    .bins(4)
    (map)

...ETC。这是我最初的电话，它有效。

像这样以有效的 json 格式放置相同的数据，

[{"y":["16","18","18","19"],"x":["2","3","5","12"]}]

像这样调用数据是行不通的，

d3.json("data.json", function (json) {

var map = data.map(function (i) {
    return parseFloat(i.y);
})

var histogram = d3.layout.histogram()
    .bins(4)
    (map)

如何让 d3.js 以与原始 .csv 格式相同的方式解释 .json 文件，以便我必须更改的代码最少。这可能吗？我阅读的文档真的让我感到困惑，并且似乎不适用于我的示例。Youtube 上最好的教程使用 .csv 而不是 json。我需要使用 json。

Answer 1

为您的 json 文件尝试此数据：

[{"x":"2","y":"16"}, {"x":"3","y":"18"}, {"x":"5","y":"18"}, {"x":"12","y":"19"}]

You could also get rid of the parseFloat(i.y) (just return i.y) if you specify your data in number instead of string. CSV values are forced into strings while JSON can have numbers.

EDIT: change the first line to: d3.json("data.json", function (error, data) {. Note the parameter names. Your code should work after this.