javascript - d3v4 "columns"的替代方案(我必须使用 d3v3)

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 引用中找到了“列”:

The returned array also exposes a columns property containing the column names in input order (in contrast to Object.keys, whose iteration order is arbitrary).

For example: data.columns; // ["Year", "Make", "Model", "Length"]

但我正在努力想出版本 3 中类似的东西用于 keys 变量，如引用代码的最后一行所示:

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

如何在没有“列”属性的情况下使用 data 获得相同的 d 和 keys？

Answer 1

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

source code在创建 columns 属性的 V4 中是这样的:

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>

我们可以创建我们的列获取该 CSV 的 header :

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，因为此时它不存在。当然，您可以在 row 函数内创建 columns 属性，但这不是一个非常明智的解决方案，因为为 CSV 中的 every 行调用 row 函数，这可以成百上千。