Question

总计noob到D3.js并致力于创建我的第一个分组条形图。但是我无法在线使用我的数据。我试图在这里使用这个例子，我的数据已经嵌套了JSON与D3。

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

更不用说下半场forEach不会工作，因为键不是州名，它们只是术语key。因此+d[name]会在d[MAPLE]的密钥中真正获得d.values[(Get the Value where the key = name)]时尝试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]}; }); });。一旦数据嵌套在JSON

中，真的很困惑如何做到这一点

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

{
    "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
      }

    ]
  }

我的数据是这样的

button.onclick = exampleFunk;

Answer 1

从问题中不清楚目标是按州（＆＃34; Texas＆＃34;，＆＃34; Colorado＆＃34; ...）或日期（＆＃34;沿x轴的1/10/2014＆＃34;，＆＃34; 2/10 / 2014＆＃34; ...）。

假设日期（因为那是当前数据的结构），这里有一个正常工作：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和total值。您的processed_data对象将如下所示：

processed_data view in console

唯一的另一个棘手的问题是计算您的唯一状态列表，以便定义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);

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

1 个答案: