在JavaScript中發布用於餅圖的數據格式問題

Question

我不是JavaScript專家，因此我嘗試使用csv文件中的數據將一個簡單的餅圖放在一起。 餅圖的示例代碼及其輸入數據如下所示，並且可以完美運行。

var pie = new d3pie("pie", {
        header: {
            title: {
                text: "A Very Simple Pie",
                fontSize: 30
            }
        },
        data: {
            content: [
                { label: "JavaScript", value: 264131 },
                { label: "Ruby", value: 218812 },
                { label: "Java", value: 157618}
            ]
        }
    });

但是當我嘗試使用csv文件中的數據時。 它說沒有提供數據。 我顯然試圖將動態數據傳遞給data.content但似乎我沒有正確執行。 下面是我的代碼：

var input_data = []
d3.csv("data.csv", function (data) {

    input_data.push({
        label: data["First"],
        value: +data["Age"]
    });
});

console.log(input_data); // This shows [{label: "james", value:30},{"John",value:22}]
var pie = new d3pie("pie", {
    header: {
        title: {
            text: "Simple Pie",
            fontSize: 30
        }
    },
    data: {
        content: input_data
    }
});

知道我在這里做錯了嗎？

Answer 1

您可能希望將d3pie代碼放入回調函數中，因為您想在數據返回后調用它（請參見以下示例 ）：

var input_data = []
d3.csv("data.csv", function (data) {
    input_data.push({
        label: data["First"],
        value: +data["Age"]
    });
    console.log(input_data); // This shows [{label: "james", value:30},{"John",value:22}]
    var pie = new d3pie("pie", {
        header: {
            title: {
                text: "Simple Pie",
                fontSize: 30
            }
        },
        data: {
            content: input_data
        }
    });
});

Answer 2

如我的評論中所述，您的問題是因為d3.csv異步執行，並且在d3pie嘗試創建圖表時未填充input_data 。

在其他示例中， input_data發生了一些高度可疑的事情-應該為data每個項目都調用它，但似乎僅被調用一次。 與其使用input_data整理中間結果，不如使用javascript的map函數將csv數據轉換為所需的格式要容易得多：

d3.csv("data.csv", function (data) {
    var pie = new d3pie("pie", {
        header: {
         title: {
             text: "Simple Pie",
             fontSize: 30
            }
        },
        data: {
            content: data.map( function(d){
                return { label: d['First'], value: +d['Age'] }
            })
        }
    });
});

map在數組map迭代並生成一個數組作為輸出，因此比在其上推入數據的額外數組更清潔，更容易。

Answer 3

const promise = d3.csv("data.csv", function (data) {
    input_data.push({
        'label': data["First"],
        'value': +data["Age"]
    });
});

promise.then(function(){
    var pie = new d3pie("pieChart", {
        header: {
            title: {
                text: "Simple Pie",
                fontSize: 30
            }
        },
        data: {
            content: input_data
        }
    });
});