我需要实现以下代码:
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 中类似的东西来用于 key 变量,如引用代码的最后一行所示:
var keys = data.columns.slice(1);
如何使用data
在没有“columns”属性的情况下获得相同的d
和keys
?
最佳答案
尽管现在您知道 v3 version of that bl.ocks ,值得一提的是,创建自己的 columns
属性非常容易,但有一些缺点。
source code在 V4 中创建 columns
属性是这样的:
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的标题:
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
属性。因此,您不能在行访问器函数中使用列
,因为此时它不存在。当然,您可以在 row 函数中创建columns 属性,但这不是一个非常明智的解决方案,因为 CSV 中的每一行都会调用 row 函数,这可以数百甚至数千。
关于javascript - d3v4 "columns"的替代方案(我必须使用 d3v3),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47817627/