如何从 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 行遇到 Cannot read 属性 'length' of undefined 错误，我将数据绑定到馅饼（）函数。

我的问题：

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

Answer 1

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

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

要为值使用“总计”列，您可以像这样使用 value method of the pie layout：

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

Demo

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

How to subset a column from loaded in CSV in D3 javascript from

javascript

csv

d3.js

data-visualization