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代码放在回调函数中，因为您想在数据返回后调用它（请参阅this example）：

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异步执行，并且input_data尝试创建图表时未填充d3pie。

在其他示例中，input_data发生了一些高度可疑的事情-应该data中的每个项目都调用它，但似乎只被调用一次。与其使用input_data来整理中间结果，不如使用javascript's map function来将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遍历一个数组并生成一个数组作为输出，因此，比在其中添加数据等的额外数组要干净和容易得多。

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
        }
    });
});

在JavaScript中发布用于饼图的数据格式问题

3 个答案: