Question

我需要实现以下代码：

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(error, data) {
  if (error) throw error;
  var keys = data.columns.slice(1);
  ...

来自：https://bl.ocks.org/mbostock/3886208

但是，我必须使用d3.js版本3.我在d3 v4 API参考中找到了'columns'：

返回的数组还公开了一个包含输入顺序列名的columns属性（与Object.keys相反，其迭代顺序是任意的）。

例如：data.columns; // [“年”，“制作”，“模特”，“长度”]

但是我正在努力想出类似于版本3的东西来用于密钥变量，如引用代码的最后一行所示：

var keys = data.columns.slice(1);

如果没有“columns”属性，如何使用data获取相同的d和keys？

Answer 1

尽管现在您知道v3 version of that bl.ocks，但它提到创建自己的columns属性非常容易，但有一些缺点。

V4中创建columns属性的source code是：

function inferColumns(rows) {
  var columnSet = Object.create(null),
      columns = [];

  rows.forEach(function(row) {
    for (var column in row) {
      if (!(column in columnSet)) {
        columns.push(columnSet[column] = column);
      }
    }
  });
  return columns;
}

我们可以制作一个（非常）简化版本。

以下是D3 v3的普通d3.csv代码，我正在加载我在网上找到的一些CSV：

d3.csv("https://www.ibm.com/support/knowledgecenter/SVU13_7.2.1/com.ibm.ismsaas.doc/reference/AssetsImportMinimumSample.csv?view=kc", function(data) {
  console.log(data)
})

<script src="https://d3js.org/d3.v3.min.js"></script>

我们可以创建columns获取该CSV的标题：

data.columns = d3.keys(data[0])

以下是演示（请查看您的浏览器控制台，而不是代码段）：

d3.csv("https://www.ibm.com/support/knowledgecenter/SVU13_7.2.1/com.ibm.ismsaas.doc/reference/AssetsImportMinimumSample.csv?view=kc", function(data){
	data.columns = d3.keys(data[0])
  console.log(data)
})

<script src="https://d3js.org/d3.v3.min.js"></script>

但这些都是缺点：首先，这段代码过于简单：例如，它没有考虑重复的值。其次，它在加载/解析文件后创建了columns属性。因此，您不能在行访问器函数中使用columns，因为它在该点不存在。你可以在行函数中创建columns属性，但这不是一个非常明智的解决方案，因为行中的每行行调用行函数，可以是数百或者甚至数千人。

d3v4“列”的替代方法（我必须使用d3v3）

1 个答案: