Fatal编程技术网
  • javascript/
  • Javascript 循环JSON数据以创建d3饼图

Javascript 循环JSON数据以创建d3饼图

javascript json d3.js charts

Javascript 循环JSON数据以创建d3饼图,javascript,json,d3.js,charts,pie-chart,Javascript,Json,D3.js,Charts,Pie Chart,我已经成功地用d3和JSON创建了我的第一个饼图，但我正在努力让多个饼图出现。我已经回顾了许多示例，包括，似乎我需要为代码中的每个循环指定一个 这是我的程序的简化版本，它生成一个饼图而不是两个： <!doctype html> <html> <head> <title>Pie Chart Test</title> <meta charset="UTF-8"> <script src="https

我已经成功地用d3和JSON创建了我的第一个饼图，但我正在努力让多个饼图出现。我已经回顾了许多示例，包括，似乎我需要为代码中的每个循环指定一个

这是我的程序的简化版本，它生成一个饼图而不是两个：

<!doctype html>
<html>
<head>
    <title>Pie Chart Test</title>
    <meta charset="UTF-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>

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

<body>
    <script>
        var width = 300,
            height = 300,
            radius = Math.min(width, height) / 2;

        var arc = d3.svg.arc()
            .outerRadius(radius)
            .innerRadius(radius - (radius / 2));

        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 + ")");

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

            node = data.data[0].pie1.results;

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

                g.append("path")
                    .attr("d", arc)
                    .style("fill", function(d) { 
                        if (d.data.failures > 0) {
                            return "#d63535";
                        } else {
                            return "#22c12d";
                        }
                    });
        });
    </script>
</body>
</html>
您有code
node=data.data[0].pie1.results

但你对馅饼什么也不做

如果要硬编码，可以使用
node2=data.data[0].pie2.results，但最好尝试并以编程方式进行

差不多


for( pie in data.data[0] ){
    node = pie.results;

    var g = svg.selectAll(".arc")
        .data(pie(node))
        .enter().append("g")
        .attr("class", "arc")
    g.append("path")
        .attr("d", arc)
        .style("fill", function(d) { 
            if (d.data.failures > 0) {
                return "#d63535";
            } else {
                return "#22c12d";
        }
    });
}


似乎我的代码中的每个循环都需要一个

一般来说，在d3中可以避免每个循环。大多数d3的管状示例都避免使用它们

您可以使用标准的d3 enter选择为数据数组中的每个项目创建svg元素（即每个饼图一个svg），而不是for-each循环。这会将每个饼图的数据绑定到其各自的svg：


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


现在，您可以使用绑定的数据为每个svg创建饼图：


    var g = svg.selectAll(".arc")
        .data(function(d,i) { return pie(d["pie"+(i+1)].results) })
        .enter().append("g")
        .attr("class", "arc")

        g.append("path")
         .attr("d", arc)
         .style("fill", function(d) { return (d.data.failures > 0) ? "#d63535" : "#22c12d"; });


所有这些看起来像：



var data={“data”：[
{“pie1”：{
“结果”：[
{“比率”：0.04，“总数”：7，“失败”：1}，
{“比率”：0.04，“总数”：8，“失败”：0}，
{“比率”：0.04，“总数”：9001，“失败”：0}
]}
},
{“pie2”：{
“结果”：[
{“比率”：0.04，“总数”：10，“失败”：0}，
{“比率”：0.04，“总数”：11，“失败”：1}，
{“比率”：0.04，“总数”：12，“失败”：1}
]}
}
]};
可变宽度=300，
高度=300，
半径=数学最小值（宽度、高度）/2；
var arc=d3.svg.arc（）
.外部（半径）
.内半径（半径-（半径/2））；
var pie=d3.layout.pie（）
.sort（空）
.value（函数（d）{返回d.ratio；}）；
var svg=d3.选择（“主体”）.选择全部（“svg”）
.数据（数据.数据）
.输入（）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
var g=svg.selectAll（“.arc”）
.data（函数（d，i）{返回饼图（d[“饼图”+（i+1）].results）}）
.enter（）.append（“g”）
.attr（“类”、“弧”）
g、 附加（“路径”）
.attr（“d”，弧）
.style（“fill”，函数（d）{return（d.data.failures>0）？“#d63535”：“#22c12d”；}）

.arc路径{
笔画：白色；
}




    var g = svg.selectAll(".arc")
        .data(function(d,i) { return pie(d["pie"+(i+1)].results) })
        .enter().append("g")
        .attr("class", "arc")

        g.append("path")
         .attr("d", arc)
         .style("fill", function(d) { return (d.data.failures > 0) ? "#d63535" : "#22c12d"; });