为D3堆叠条形图准备嵌套的JSON数据

Question

我有嵌套的JSON数据，其中第一级键是活动类型(骑行、徒步旅行等)。第二个层次是年份。每年都有一个值(以公里为单位的距离)。我的数据结构如下所示：

​

我想从我的数据中绘制一个堆叠的条形图，就像这样的http://bl.ocks.org/mstanaland/6100713。如何将数据放入适合D3堆叠条形图的结构中？

Answer 1

这可以按如下方式完成：

const data = [];
myData.forEach(a => a.values.forEach(v => {
    const element = data.find(e => e.year === v.key);
    if (element) {
        element[a.key] = v.values;
    } else {
        data.push({ year: v.key, [a.key]: v.values });
    }
}));

Answer 2

基于@unminder的答案，但只是将每个属性都放入对象中：

Stakblitz示例：https://stackblitz.com/edit/js-d5sitf

const entryArr = [
  {
    key: 'ride',
    values: [
      { key: '2008', value: 3234 },
      { key: '2009', value: 3234 },
      { key: '2010', value: 5000 },
      { key: '2011', value: 6000 },
      { key: '2012', value: 1456 },
      { key: '2013', value: 2453 }
    ]
  },
  {
    key: 'hike',
    values: [
      { key: '2006', value: 3234 },
      { key: '2009', value: 2420 },
      { key: '2010', value: 4530 },
      { key: '2011', value: 2000 },
      { key: '2012', value: 1900 },
      { key: '2013', value: 3700 }
    ]
  },
  {
    key: 'walk',
    values: [
      { key: '2009', value: 3001 },
      { key: '2010', value: 1090 },
      { key: '2011', value: 2020 },
      { key: '2012', value: 2000 },
      { key: '2013', value: 6000 }
    ]
  }
];

const getKeys = entryArr.map(x => x.key);
const result = [];
entryArr.forEach(a => a.values.forEach(v => {
  const element = result.find(e => e.year === v.key);
  if (element) {
    element[a.key] = v.value;
  } else {
    const obj = getKeys.reduce((acc, x) => ({ ...acc, year: v.key, [x]: a.key === x ? v.value : '' })
      , {});
    result.push(obj);
  }
}));

console.log(result)

注意:可以使用reducers来改进它，以避免全局变量

Answer 3

这很有效，但当缺少组合时，不会输入任何条目，因此它不是真正的宽泛数据。我用下面的代码实现了这个功能：

// make data long
var flatdata = []
            distance_per_year.forEach(function(type) {
              type.values.forEach(function(typeYears) {
                flatdata.push({
                  type: type.key,
                  year: typeYears.key,
                  distance: typeYears.values,
                });
              });
            });

    // Unique activity types
    groups = Array.from(new Set(flatdata.map(({ type }) => type)));
    years = Array.from(new Set(flatdata.map(({ year }) => year)));

    // make wide data with 0 where value is missing
    var grouped = years.map(function(d) {
      var item = {
        year:  d
      };
      groups.forEach(function(e) {
        var itemForGroup = flatdata.filter(function(f) {
          return f.type === e && f.year === d;
        });
        if (itemForGroup.length) {
          item[e] = Number(itemForGroup[0].distance);
        } else {
          item[e] = 0;
        }
      })
      return item;
    })

这将首先生成一个未嵌套的长数据集(3列)，然后将其重塑为宽，并在缺少距离的位置填充0。

来源是这两个问题：Reshape data for D3 stacked bar chart和d3: flatten nested data?