在D3中使用2D数组

时间:2018-04-20 20:06:00

标签: javascript arrays json d3.js

我希望可视化从人口普查数据API中提取的数据,特别是来自ACS调查。

数据以非标准版本的JSON形式返回,作为二维数组。它基本上是这样的:

[
[
    “POPULATION”,
    “DATE”,
    “ANOTHERTHING”
],
[
    “ALABAMA”,
    “2000”,
    “MORESTUFF”
],
[
    “ALASKA”,
    “2000”,
    “OTHERSTUFF”
],
…
]

我不熟悉使用这种JSON数据,这些数据几乎看起来更像CSV,其中键写在第一行,而每行中的值都写在第一行之后。

是否有人熟悉如何在D3中解析和处理这些数据,而不必先进行转换(即https://gist.github.com/sarfarazansari/7e8ae05168b80b36016eb1c561a82f73)? (我想直接从数据API中提取)。

非常感谢任何帮助或指导。

1 个答案:

答案 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;
&#13;
&#13;