D3載入資料

Question

我正在學習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();
    }); ...

Answer 1

查看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();
    });

Answer 2

經過更多的谷歌搜索和嘗試之后，我似乎發現了在最新版本的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();
    });