Question

我正在尝试使用d3 lib制作饼图。我首先尝试使用csv文件。它工作正常这是我的代码 https://plnkr.co/edit/GQVptaAULzHVRYsQCycG?p=preview

但是当我使用json文件而不是csv文件时，它不显示pie图表

这是我的代码 https://plnkr.co/edit/OYH6TYPPJgshaSzPbN1e?p=preview

d3.json("data.json", function(d) {
       // alert(d)
        d.population = +d.population;
        return d;
    }, function(error, data) {
        if (error) throw error;

        var arc = g.selectAll(".arc")
            .data(pie(data))
            .enter().append("g")
            .attr("class", "arc");

        arc.append("path")
            .attr("d", path)
            .attr("fill", function(d) { return color(d.data.age); });

        arc.append("text")
            .attr("transform", function(d) { return "translate(" + label.centroid(d) + ")"; })
            .attr("dy", "0.35em")
            .text(function(d) { return d.data.age; });
    });

文档

https://bl.ocks.org/mbostock/3887235

Answer 1

获取json的回调函数设置不同（旧样式）。

在我获得代码工作后，我调查并确认了如何发送回调。在没有任何错误的良好请求传递（null，数据）。错误请求仅传递（错误）

以下是它的外观

d3.json("data.json", function(error, data) {
    if (error) throw error;

    var arc = g.selectAll(".arc")
        .data(pie(data))
        .enter().append("g")
        .attr("class", "arc");

    arc.append("path")
        .attr("d", path)
        .attr("fill", function(d) {
            return color(d.data.age);
        });

    arc.append("text")
        .attr("transform", function(d) {
            return "translate(" + label.centroid(d) + ")";
        })
        .attr("dy", "0.35em")
        .text(function(d) {
            return d.data.age;
        });
});

如何使用饼图读取d3中的json文件？

1 个答案: