Question

我有一些以下格式的csv数据，我已加载d3.csv()：

Name, Group, Amount
Bill, A, 25
Bill, B, 35
Bill, C, 45
Joe, A, 5
Joe, B, 8

但正如我从各种例子中所理解的那样，我需要像这样的数据在堆积条形图中使用它：

Name, AmountA, AmountB, AmountC
Bill, 25, 35, 45
Joe, 5, 8, NA

如何在js脚本中正确转换数据？还有一个缺少数据的问题，正如您在我的示例中所看到的那样。

感谢您的帮助。

Answer 1

是的，你是正确的，为了使用d3.stack，你的数据需要重新塑造。您可以使用d3.nest按名称对数据进行分组，然后为每个组构建一个对象 - 但是您丢失的数据将导致问题。

相反，我会做以下事情。解析数据：

var data =`名称，组，金额

Bill,A,25
Bill,B,35
Bill,C,45
Joe,A,5
Joe,B,8`;

var parsed = d3.csvParse(data);

获取一组名称和一组组：

// obtain unique names
var names = d3.nest()
    .key(function(d) { return d.Name; })
    .entries(parsed)
    .map(function(d) { return d.key; });

// obtain unique groups
var groups = d3.nest()
    .key(function(d) { return d.Group; })
    .entries(parsed)
    .map(function(d) { return d.key; });

（注意，这是使用d3.nest创建一个唯一值数组。其他实用程序库如下划线有一个更简单的机制来实现这一点。）

接下来，迭代每个唯一名称并添加组值，使用零作为缺失数据：

var grouped = names.map(function(d) { 
  var item = {
    name:  d
  };
  groups.forEach(function(e) {
    var itemForGroup = parsed.filter(function(f) {
      return f.Group === e && f.Name === d;
    });
    if (itemForGroup.length) {
      item[e] = Number(itemForGroup[0].Amount);
    } else {
      item[e] = 0;
    }
  })
  return item;
})

这使得数据以正确的形式与d3.stack一起使用。

这是一个带有完整示例的codepen：

https://codepen.io/ColinEberhardt/pen/BQbBoX

它还使用了d3fc，以便更容易渲染堆叠系列。

重塑D3堆积条形图的数据

1 个答案: