javascript - 展平 D3.js 嵌套数据或将其映射到新数据集

Question

D3.js 完全菜鸟，正在努力创建我的第一个分组条形图。但是，我无法使我的数据与在线示例相符。我尝试在这里使用这个示例，其中我的数据已使用 D3 嵌套 JSON。

我的问题是我无法使用 d3.keys 方法来检索 key ，因为我的 key 不是州名称。他们只是 Key .

下半年就更不用说了forEach不起作用，因为键不是州名称，它们只是术语 key 。所以+d[name]会尝试d[MAPLE]当我的值确实在 d.values[(Get the Value where the key = name)] 的键内时。一旦数据嵌套在 JSON 中，我真的很困惑如何执行此操作

我将如何获取所有可能的键值，然后将键与下一级键和值映射？使用与下面类似的示例，但使用我的 JSON 嵌套数据。

var ageNames = d3.keys(data[0]).filter(function(key) { return key !== "State"; });

  data.forEach(function(d) {
    d.ages = ageNames.map(function(name) { return {name: name, value: +d[name]}; });
  });

我的数据是这样

{
    "key": "1/10/2014",
    "values": [
      {
        "key": "Texas",
        "values": 200
      },
      {
        "key": "Colorado",
        "values": 300
      },
      {
        "key": "Utah",
        "values": 227
      }
    ]
  },{
    "key": "2/10/2014",
    "values": [
      {
        "key": "Texas",
        "values": 225
      },
      {
        "key": "Colorado",
        "values": 241
      },
      {
        "key": "Utah",
        "values": 500
      }

    ]
  }

Answer 1

从问题中尚不清楚目标是按州(“德克萨斯州”、“科罗拉多州”...)或日期(“1/10/2014”、“2/10/2014”...进行分组) )沿 x 轴。

假设日期(因为这就是数据当前的结构方式)，这是一个有效的 plunk:http://plnkr.co/edit/C8lkPMGanFY9BkTc6f1i?p=preview

将数据处理为分组条形图的现有 D3 代码可以处理的格式的代码如下所示:

// Call the first mapping function on every 'date' in the data array
processed_data = data.map( function (d) {
    var y0 = 0;
    var total = 0;
    return {
        date: d.key,
        // Call the second mapping function on every 'state' in the given date array
        values: (d.values).map( function (d) {
            return_object = {
                state: d.key,
                count: d.values,
                y0: y0,
                y1: y0 + d.values
            };
        // Calculate the updated y0 for each new state in a given date
        y0 = y0 + d.values;
        // Add the total for a given state to the sum total for that date
        total = total + d.values;
        return return_object;
        }),
        total: total
    };
});

我们使用嵌套的 array.map 转换将两级嵌套数据操作为预期格式并计算 y0、y1 和 总计值。您的 processed_data 对象将如下所示:

唯一棘手的一点是计算唯一状态列表，以便定义color.domain。如果您不想对此进行硬编码(例如，因为列表可能因数据集而异，您可以使用此方法:

// Define the color domain, by first building a list of states:
var states = [];
// Loop through each date
processed_data.forEach(
    function (d) {
        // Loop through each state in that date
        d.values.forEach(
            function(d) {
                // add to the array if not already present
                if (!(states.indexOf(d.state) > -1)) {
                    states.push(d.state)
                }
            }
        ) 
    }
);
color.domain(states);