Question

我从https://bl.ocks.org/找到了一个例子。该示例使用d3.csv导入数据。但是我不想使用d3.csv来导入外部文件，我只想使用当前环境中存在的数据，因此我自定义了自己的转换函数。

原始代码：

d3.csv("data.csv",
function(d, i, columns) {
  for (i = 1, t = 0; i < columns.length; ++i) t += d[columns[i]] = +d[columns[i]];
  d.total = t;
  return d;
},
function (data){
...
})
...

我的尝试

var tmp_data = type(data);
dataViz(tmp_data);

function type(data) {
  data.columns = Object.keys(data[0]);
  for (i = 1, t = 0; i < data.columns.length; ++i) t += data[data.columns[i]] = +data[data.columns[i]];
  data.total = t;
  return data;
};

function dataViz(data){
...
};

将我的数据输入到type函数中后，data.total是NaN。我无法理解t += d[columns[i]] = +d[columns[i]]的工作方式以及data.total方法中d3.csv的外观。我该如何修复我的代码？

Answer 1

您以bl.ocks为例的原始数据（this one，您的链接已断开）如下所示：

State,Under 5 Years,5 to 13 Years,14 to 17 Years,18 to 24 Years,25 to 44 Years,45 to 64 Years,65 Years and Over
AL,310504,552339,259034,450818,1231572,1215966,641667
AK,52083,85640,42153,74257,198724,183159,50277
AZ,515910,828669,362642,601943,1804762,1523681,862573
AR,202070,343207,157204,264160,754420,727124,407205
CA,2704659,4499890,2159981,3853788,10604510,8819342,4114496

所以，让我们看看如何复制该行函数：

尝试的主要问题是，与原始行函数不同，您没有在数据数组中的每个对象中进行迭代。当您这样做时...

data.total = t;

...您只是在该数组中设置一个属性，这不是您想要的。

因此，您必须遍历数组中的每个对象。例如，使用Array.prototype.forEach：

function type(data) {
  data.columns = Object.keys(data[0]);
  data.forEach(function(d) {
    for (i = 1, t = 0; i < data.columns.length; ++i) t += d[data.columns[i]] = +d[data.columns[i]];
    d.total = t;
  });
  return data;
};

这是演示：

var csv = `State,Under 5 Years,5 to 13 Years,14 to 17 Years,18 to 24 Years,25 to 44 Years,45 to 64 Years,65 Years and Over
AL,310504,552339,259034,450818,1231572,1215966,641667
AK,52083,85640,42153,74257,198724,183159,50277
AZ,515910,828669,362642,601943,1804762,1523681,862573
AR,202070,343207,157204,264160,754420,727124,407205
CA,2704659,4499890,2159981,3853788,10604510,8819342,4114496`;

const data = d3.csvParse(csv);

var tmp_data = type(data);

console.log(tmp_data)

function type(data) {
  data.columns = Object.keys(data[0]);
  data.forEach(function(d) {
    for (i = 1, t = 0; i < data.columns.length; ++i) t += d[data.columns[i]] = +d[data.columns[i]];
    d.total = t;
  });
  return data;
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

这两个行转换函数有什么区别？

1 个答案: