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

Question

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

CSV

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

第三天

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

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

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

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

像这样将相同的数据放入有效的 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"}]

如果您以数字而不是字符串指定数据，您也可以去掉parseFloat(i.y)（只返回i.y）。 CSV 值被强制转换为字符串，而 JSON 可以包含数字。

编辑： 将第一行更改为：d3.json("data.json", function (<strong>error</strong>, <strong>data</strong>) {。注意参数名称。您的代码应该在此之后工作。