Question

我必须设计一个饼图，它会在外部JSON文件中进行更改时动态更新。我写了一个相当简单的代码，但不知怎的，我没有得到在chrome页面上呈现的图表。似乎有一些未捕获的错误和“数据”的定义缺失。我是d3和Javascript的新手，我需要你帮助我调试/修复这段代码。我的Json文件由d3.json方法调用调用。 json文件中的x是Name，y是Value。 x，y成为我的名字：价值对。

<!DOCTYPE html>
<meta charset="utf-8">

<body>
    <script src="../lib/d3.v3.min.js"></script>
    <script type="text/javascript">

        var width = 960; 
        var height = 500; 
        var radius = 400;

        var outerRadius = radius;
        var innerRadius = 0;

        var pie = d3.layout.pie().sort(null).y(function(d) {
            return d.y;
        });

        var color = d3.scale.category10();

        var svg = d3.select("body").append("svg").attr("width", width).attr(
                "height", height).append("g").attr("transform",
                "translate(" + width / 2 + "," + height / 2 + ")");

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

        var arc = d3.svg.arc().outerRadius(outerRadius)
                .innerRadius(innerRadius);

        var labelArc = d3.svg.arc().outerRadius(radius - 40).innerRadius(
                radius - 40);

        d3.json("data.json", function(error, data ) {
            data.forEach(function(d) {

                d.x = d.x;

                d.y = d.y+d.y;

                x.domain(data.map(function(d) {
                    return d.x;
                }));

                y.domain([ 0, d3.max(data, function(d) {
                    return d.y;
                }) ]);

                g.append("path")

                .attr("fill", function(d, i) {
                    return color(i);
                }).attr("d", arc);

                g.append("text").attr("transform", function(d) {
                    return "translate(" + labelArc.centroid(d) + ")";
                }).attr("text-anchor", "middle").text(function(d) {
                    return d.data.x;
                });
            })
        });
    </script>

Answer 1

代码结构存在一些逻辑问题...就像数据变量在d3.json之外使用，它不可访问。看下面的方法......它应该工作，我还没有测试过。如果您遇到运行此代码的任何问题，请告诉我

    var width = 960; 
    var height = 500; 
    var radius = 400;

    var outerRadius = radius;
    var innerRadius = 0;

    var pie = d3.layout.pie().sort(null).y(function(d) {
        return d.y;
    });

    var g, arc, labelArc;

    var color = d3.scale.category10();

    var svg = d3.select("body").append("svg").attr("width", width).attr(
            "height", height).append("g").attr("transform",
            "translate(" + width / 2 + "," + height / 2 + ")");



    d3.json("data.json", function(error, data ) {

        x.domain(data.map(function(d) { return d.x; }));

        y.domain([ 0, d3.max(data, function(d) { return d.y; }) ]);

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

        arc = d3.svg.arc()
                    .outerRadius(outerRadius)
                    .innerRadius(innerRadius);

        labelArc = d3.svg.arc()
                         .outerRadius(radius - 40)
                         .innerRadius(radius - 40);

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

        g.append("text")
         .attr("transform", function(d) { return "translate(" + labelArc.centroid(d) + ")";})
         .attr("text-anchor", "middle").text(function(d) { return d.data.x; });        

    });

使用文件中的外部Json数据显示d3.js饼图

1 个答案: