如何了解 Mike Bostock 示例中的 json 结构(使用 d3 进行操作后):
http://bl.ocks.org/mbostock/3886208
我的目标是使用我自己的 JSON 对象虚拟数组来实现它，而不加载 csv 数据。但我不知道 json 应该是什么样子。
Mike Bostock 的数据处理:
d3.csv("data.csv", function(d, i, columns) {
for (i = 1, t = 0; i < columns.length; ++i) t += d[columns[i]] = +d[columns[i]];
d.total = t;
return d;
}, function(error, data) {
if (error) throw error;
我已经尝试在本地保存 csv 并在 node.js 命令中运行上面的代码，但它不起作用。有没有更简单的方法？
最佳答案
在 d3 的文档中，它显示了如何将 CSV 解析为对象数组的示例。以下是 CSV 文件示例:
Year,Make,Model,Length
1997,Ford,E350,2.34
2000,Mercury,Cougar,2.38
生成的 JavaScript 数组是:
[
{"Year": "1997", "Make": "Ford", "Model": "E350", "Length": "2.34"},
{"Year": "2000", "Make": "Mercury", "Model": "Cougar", "Length": "2.38"}
]
(来自 https://github.com/d3/d3-dsv/blob/master/README.md#dsv_parse )
这意味着在您的示例中，第一个数据元素将如下所示:
[
{"State": "AL", "Under 5 Years": "310504","5 to 13 Years": "552339","14 to 17 Years": "259034","18 to 24 Years": "450818","25 to 44 Years": "1231572","45 to 64 Years": "1215966","65 Years and Over": "641667"}
]
或者像这样更容易阅读的格式:
[
{
"State": "AL",
"Under 5 Years": "310504",
"5 to 13 Years": "552339",
"14 to 17 Years": "259034",
"18 to 24 Years": "450818",
"25 to 44 Years": "1231572",
"45 to 64 Years": "1215966",
"65 Years and Over": "641667"
}
]
您最好的选择是将 Bostock 的 CSV 复制到 JSON 到 CSV 转换器( this one has worked for me 但还有很多其他转换器)，然后在本地代码中使用 JSON。
如果您确实使用 D3 CSV 加载功能，由于跨源请求错误，您将很难在没有简单服务器的情况下从本地文件执行此操作。
此外，当您说您将其作为 node.js 命令运行时，我不太清楚您的意思 - 我认为您可能希望将 javascript 和 json 对象包含在“.js”文件和链接中到一个 html 文件，或者如果它是一个简单的项目，则将您的 javascript 内联到 html 文件中(就像 Bostock 在您链接的视觉效果中所做的那样)
关于javascript - 如何了解 Mike Bostock 的 d3.js 示例中的数据结构，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41601119/