如何在 D3 javascript 中从加载的 CSV 中对列进行子集化

Question

我们有一些 data.csv

University,Total,Females,Males,Year,Type
PortSaid,13817,6679,7138,2012,Public
PortSaid,14790,7527,7263,2013,Public
PortSaid,17295,8509,8786,2010,Public
6OctoberUniversity,12507,4297,8210,2012,Private
6OctoberUniversity,14608,5360,9248,2013,Private

我们尝试使用 D3 来操作数据，并加载数据：

var dataset;

d3.csv("universities_data.csv", function(data) {
    data.forEach(function(d) {
      d.Females = +d.Females;
      d.Males = +d.Males;
      d.Total = +d.Total;
      d.Year = +d.Year
    dataset = data;
    });
  });

我正在尝试重新创建以下D3 block，这非常简单。唯一的区别：我加载的是 CSV 数据，而不是示例代码中的简单一维数组。

在 Chrome 开发人员中运行它，您将在第 60 行遇到无法读取属性 'length' of undefined 错误，我将数据绑定到 pie() 函数。

我的问题：

• 我是否正确加载了 csv 数据？
• 如何对 Total 进行子集化 列仅用作 pie() 函数中的值？看起来 应该可以解决问题。

Answer 1

问题是当您尝试在回调函数之外访问数据集变量时未定义它。 查看 mbostock 的 answer 到另一个问题的原因。

在 d3.csv 方法的回调函数中添加用于创建表示的代码。

要使用 Total 列的值，您可以使用 value method of the pie layout，如下所示：

var pie = d3.layout.pie()
    .value(function(d) { return d.Total; })
    .padAngle(.02);

Demo