带有 JSON 数据的 D3 堆积图

Question

我想创建一个像http://bl.ocks.org/mbostock/3886208这样的堆积条形图。但我不想使用 CSV 文件。

如何使用 JSON 数据更改此示例？任何人都可以帮忙吗？

Answer 1

您的问题有点含糊，但假设我们将该 CSV 文件转换为 JSON 数据：

var data = [{
    "State": "VT",
    "Under 5 Years": 32635,
    "5 to 13 Years": 62538,
    "14 to 17 Years": 33757,
    "18 to 24 Years": 61679,
    "25 to 44 Years": 155419,
    "45 to 64 Years": 188593,
    "65 Years and Over": 86649
  }, {
    "State": "VA",
    "Under 5 Years": 522672,
    "5 to 13 Years": 887525,
    "14 to 17 Years": 413004,
    "18 to 24 Years": 768475,
    "25 to 44 Years": 2203286,
    "45 to 64 Years": 2033550,
    "65 Years and Over": 940577
  },
  ...

然后，您需要将预处理（以获取键和总数）修复为：

  // fix pre-processing
  var keys = [];
  for (key in data[0]){
    if (key != "State")
      keys.push(key);
  }
  data.forEach(function(d){
    d.total = 0;
    keys.forEach(function(k){
      d.total += d[k];
    })
  });

然后示例的其余部分就位：

var data = [{
    "State": "VT",
    "Under 5 Years": 32635,
    "5 to 13 Years": 62538,
    "14 to 17 Years": 33757,
    "18 to 24 Years": 61679,
    "25 to 44 Years": 155419,
    "45 to 64 Years": 188593,
    "65 Years and Over": 86649
  }, {
    "State": "VA",
    "Under 5 Years": 522672,
    "5 to 13 Years": 887525,
    "14 to 17 Years": 413004,
    "18 to 24 Years": 768475,
    "25 to 44 Years": 2203286,
    "45 to 64 Years": 2033550,
    "65 Years and Over": 940577
  },
  ...