我希望可视化从人口普查数据API中提取的数据,特别是来自ACS调查。
数据以非标准版本的JSON形式返回,作为二维数组。它基本上是这样的:
[
[
“POPULATION”,
“DATE”,
“ANOTHERTHING”
],
[
“ALABAMA”,
“2000”,
“MORESTUFF”
],
[
“ALASKA”,
“2000”,
“OTHERSTUFF”
],
…
]
我不熟悉使用这种JSON数据,这些数据几乎看起来更像CSV,其中键写在第一行,而每行中的值都写在第一行之后。
是否有人熟悉如何在D3中解析和处理这些数据,而不必先进行转换(即https://gist.github.com/sarfarazansari/7e8ae05168b80b36016eb1c561a82f73)? (我想直接从数据API中提取)。
非常感谢任何帮助或指导。
答案 0 :(得分:0)
首先:不要在JSON(或代码中,无论它是什么)中使用智能引号(“
)。我认为你真正的JSON是正确的,这恰好是因为你使用文本编辑器(如MS Word)来编写这个问题。此外,没有像非标准JSON 这样的东西,因为没有标准JSON 开头。你只有一个JSON,它是一个数组数组,这里没什么特别的。
话虽这么说,你可以使用那个确切的数据结构来创建你的图表...但是,特别是如果你是一个初学者,坚持最常见(这里我们可以)是个好主意说标准)方法来组织D3代码中的数据,这是一个对象数组。
我们可以轻松地在对象数组中转换该数组数组,这对您来说会更舒服。
首先,假设您的数组名为data
,让我们提取标题:
var keys = data.shift();
这不仅会创建一个头数组,而且会从数据数组中删除第一个内部数组。
现在,我们迭代每个内部数组,创建一个包含我们需要的所有键/值对的对象:
var newData = data.map(function(d) {
var obj = {};
d.forEach(function(e, i) {
obj[keys[i]] = e;
});
return obj;
});
有更短的方法可以做到这一点,上面的方法相当冗长,但它更具说教性。
以下是使用您分享的数据的演示:
var data = [
[
"POPULATION",
"DATE",
"ANOTHERTHING"
],
[
"ALABAMA",
"2000",
"MORESTUFF"
],
[
"ALASKA",
"2000",
"OTHERSTUFF"
]
];
var keys = data.shift();
var newData = data.map(function(d) {
var obj = {};
d.forEach(function(e, i) {
obj[keys[i]] = e;
});
return obj;
});
console.log(newData)

<script src="https://d3js.org/d3.v5.min.js"></script>
&#13;