Question

我正在尝试使用我在网上找到的d3.js饼图来可视化我使用MySQL文件中的MySQL查询导入的数据。这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <title>Status Codes</title>
</head>
<body>

    <h1>HTTP Status Codes</h1>

    <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>

    <script>

        function output(inp) {
            document.body.appendChild(document.createElement('pre')).innerHTML = inp;
        }

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

            var summarizedByKey = d3.nest()
                .key(function(d) { return d.statuscode; })
                .rollup(function(v) { return v.length; })
                .entries(data);

            var summarizedByStatuscode = JSON.stringify(summarizedByKey, undefined, 2);
            output(summarizedByStatuscode);

            var margin = {top: 20, right: 20, bottom: 20, left: 20};
                width = 350 - margin.left - margin.right;
                height = width - margin.top - margin.bottom;

            var chart = d3.select("body")
                .append('svg')
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
                .append("g")
                .attr("transform", "translate(" + ((width/2)+margin.left) + "," + ((height/2)+margin.top) + ")");

            var radius = Math.min(width, height) / 2;

            var color = d3.scale.ordinal()
                .range(["#3399FF", "#5DAEF8", "#86C3FA", "#ADD6FB", "#D6EBFD"]);

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

            var pie = d3.layout.pie()
                .sort(null)
                .startAngle(1.1*Math.PI)
                .endAngle(3.1*Math.PI)
                .values(function(d) { return d.values; });

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

            g.append("path")
                .attr("fill", function(d, i) { return color(i); })
                .transition()
                .ease("exp")
                .duration(2000)
                .attrTween("d", tweenPie);

            function tweenPie(b) {
                var i = d3.interpolate({startAngle: 1.1*Math.PI, endAngle: 1.1*Math.PI}, b);
                return function(t) { return arc(i(t)); };
            }

        });

    </script>

</body>
</html>

当使用参数summaByKey调用函数“output”时，我得到以下结果：

[
  {
    "key": "200",
    "values": 227
  },
  {
    "key": "301",
    "values": 9
  }
]

在chrome中打开html文件时出现以下错误：

d3.layout.pie(...).sort(...).startAngle(...).endAngle(...).values is not a function

(anonymous function) @ statuscodes.html:53
(anonymous function) @ d3.v3.min.js:1
t @ d3.v3.min.js:1
u @ d3.v3.min.js:1)

有人可以帮我修复此错误吗？

d3.js错误 - 不是一个功能

0 个答案: