Question

我正在尝试使用JSON文件创建动画饼图来存储数据。

我的JSON文件是这样的：

{"data":[
    {"ap": [
        {"floorratio": [
            {"floor":"Basement", "ratio": 0.20},
            {"floor":"Ground", "ratio": 0.20},
            {"floor":"First Floor", "ratio": 0.15},
            {"floor":"Second Floor", "ratio": 0.20},
            {"floor":"Third Floor", "ratio": 0.25}
        ]}
    ]},
    {"ap": [
        {"floorratio": [
            {"floor":"Basement", "ratio": 0.10},
            {"floor":"Ground", "ratio": 0.30},
            {"floor":"First Floor", "ratio": 0.10},
            {"floor":"Second Floor", "ratio": 0.15},
            {"floor":"Third Floor", "ratio": 0.35}
        ]}
    ]}
]}

和我的HTML代码：

    <!doctype html>
<html>
<head>
    <title>Pie Chart Test</title>
    <script src="d3.min.js"></script>
</head>
<style>

body {
  font: 10px sans-serif;
}

.arc path {
  stroke: #fff;
}
</style>

<body>

<label><input type="radio" name="dataset" value="0" checked> 1</label>
<label><input type="radio" name="dataset" value="1"> 2</label>
    <script>
    var width = 960,
        height = 500,
        radius = Math.min(width, height) / 2;

    var color = d3.scale.ordinal()
        .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

    var arc = d3.svg.arc()
        .outerRadius(radius - 10)
        .innerRadius(0);

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

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

    var nodeSelected;

    d3.json("APCategories.json", function (error, data) {
        //initialise data
        floorRatio = data.data[0].ap[0].floorratio;

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

        g.append("path")
            .attr("d", arc)
            .style("fill", function (d) {
            return color(d.data.floor);
        })
            .each(function(d) {this._current = d;});

        g.append("text")
            .attr("transform", function (d) {
            return "translate(" + arc.centroid(d) + ")";
        })
            .attr("dy", ".35em")
            .style("text-anchor", "middle")
            .text(function (d) {
            return d.data.floor;
        });
        //showing initial pie chart code ends here

        function changePieChart() {
            nodeSelected = this.value;
            newFloorRatio = data.data[nodeSelected].ap[0].floorratio;

            g = g.data(pie(newFloorRatio));
            g.transition().duration(750).attrTween("d", arcTween);

        }
        function radioSelectedChange() {
            nodeSelected = this.value;
            changePieChart();

        }
        d3.selectAll("input")
            .on("change", changePieChart);
        function arcTween(a) {
            var i = d3.interpolate(this._current, a);
            this._current = i(0);
            return function(t) {
            return arc(i(t));
            };
        }


    });
    </script>
</body>
</html>

所以目前我只加载第一组数据，因为我正在调用

floorRatio = data.data[0].ap[0].floorratio

但我希望能够做的事情更多：

floorRatio = data.data[i].ap[0].floorratio

我曾尝试在changePieChart函数中执行此操作，但我认为问题在于数据的初始化，我不太确定使用JSON文件的正确方法。

注意：我的json文件只是更大版本的一个小例子。

我想创建一个更新/更改的饼图但不确定如何使用JSON数据。加载所有数据然后使用它的正确方法是什么？

Answer 1

您必须编写像forEach这样的函数来浏览json数据中的每个元素。查看this plnkr链接。 d将有对象，即在这个例子中（data.data），我将保存每个对象的索引。

d3.json("json/APCategories.json", function (error, data) {
    //initialise data
    //floorRatio = data.data[0].ap[0].floorratio;

    (data.data).forEach(function(d,i) {
       console.log(d.ap[i].floorratio);
     // d.data = +d.data;
      floorRatio = d.ap[i].floorratio;
      console.log(floorRatio);
    });

已编辑：我相信你想为多个“ap”对象绘制多个饼图，请参阅this link进行工作演示。 This link将显示svg对象，该对象将在选择更改时更新。

d3js使用json动画饼图

1 个答案: