我正在努力学习D3。我正在处理的示例之一是在旧版本的 D3 下编写的代码。我知道在 5.7.0 下数据加载的工作方式不同,但我无法在本例中正确加载数据。当只是加载数据(1 个函数)时,我知道它是如何工作的,但是在这个有 2 个函数的例子中,我只是无法制定出解决方案。
谁能给我一些关于如何返工以在最新版本的 d3 下工作的建议?这是代码:
function show() {
'use strict';
// load the data
var loadedData;
d3.csv('./data/businessFiltered.csv').then(
function(row) {
switch (row.yearsInBusiness) {
case "001" : row.yearsInBusinessLabel = "All"; break;
case "311" : row.yearsInBusinessLabel = "less then 2 years"; break;
case "318" : row.yearsInBusinessLabel = "2 to 3 years "; break;
case "319" : row.yearsInBusinessLabel = "4 to 5 years"; break;
case "321" : row.yearsInBusinessLabel = "6 to 10 years"; break;
case "322" : row.yearsInBusinessLabel = "11 to 15 years"; break;
case "323" : row.yearsInBusinessLabel = "more then 16 years"; break;
}
return row;
},
function (data) {
loadedData = data;
updateCircle();
}); ...
查看 d3.csv() 的文档,似乎您可以使用 .get()
指定一个回调函数:
function show() {
'use strict';
// load the data
var loadedData;
d3.csv('./data/businessFiltered.csv')
.row(function(row) {
switch (row.yearsInBusiness) {
case "001" : row.yearsInBusinessLabel = "All"; break;
case "311" : row.yearsInBusinessLabel = "less then 2 years"; break;
case "318" : row.yearsInBusinessLabel = "2 to 3 years "; break;
case "319" : row.yearsInBusinessLabel = "4 to 5 years"; break;
case "321" : row.yearsInBusinessLabel = "6 to 10 years"; break;
case "322" : row.yearsInBusinessLabel = "11 to 15 years"; break;
case "323" : row.yearsInBusinessLabel = "more then 16 years"; break;
}
return row;
})
.get(function(error, data) {
loadedData = data;
updateCircle();
});
经过更多的谷歌搜索和尝试,我似乎找到了在最新版本的 D3 (v5) 中工作的东西:
function show() {
'use strict';
// load the data
var loadedData;
d3.csv('./data/businessFiltered.csv', function(row) {
switch (row.yearsInBusiness) {
case "001" : row.yearsInBusinessLabel = "All"; break;
case "311" : row.yearsInBusinessLabel = "less then 2 years"; break;
case "318" : row.yearsInBusinessLabel = "2 to 3 years "; break;
case "319" : row.yearsInBusinessLabel = "4 to 5 years"; break;
case "321" : row.yearsInBusinessLabel = "6 to 10 years"; break;
case "322" : row.yearsInBusinessLabel = "11 to 15 years"; break;
case "323" : row.yearsInBusinessLabel = "more then 16 years"; break;
};
return row;
})
.then(function(data) {
loadedData = data;
updateCircle();
});