使用文件中的外部Json數據顯示d3.js餅圖

Question

我必須設計一個餅圖，當在外部JSON文件中進行更改時，該餅圖將動態更新。 我已經編寫了一個相當簡單的代碼，但是不知何故我無法在chrome頁面上顯示圖表。 似乎存在一些未捕獲的錯誤，並且缺少“數據”的定義。 我對d3和Java語言還很陌生，我需要您的幫助為我調試/修復此代碼。 我的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 個解決方案

解決方案1
0 2016-10-07 09:09:29

使用文件中的外部Json數據顯示d3.js餅圖

問題描述

1 個解決方案

解決方案1 0 2016-10-07 09:09:29

解決方案1
0 2016-10-07 09:09:29